React - Intro

What is React?

- js library
- Bulid UI (User InterFace)
- SPA- Single Page Application

The History

- 2011 in FB
-2013 Open Source

COMPONENT

REUSABLE
SELF-CONTAINED

How to setup React Environment ?

1 install node js

2 vs code

3 open terminal check the version node-v, npm -v

Extension

- VS Code ES7+ React/Redux/React-Native/JS snippets

- prettier

- React Developer Tool

vite comment



Commands used :

Install node js
node --v
npm -v

1 npm create vite@latest
2 create-vite my-project

3 Select a framework: » React
4  Select a variant: » JavaScript

cd my-project
npm install
npm run dev

npm create vite@latest or npm create vite@latest .

fun:


export default App;


import React from 'react'

const App = () => {
  return (
    <div>App</div>
  )
}

export default App

class:

import React, { Component } from 'react'

export class App extends Component {
  render() {
    return (
      <div>App</div>
    )
  }
}

export default App

const App = () => {
  const Pstyle = {
    color: "black",
    textAlign: "center",
    marginTop: "20px",
    backgroundColor: "green",
    padding: "20px",
    textTransform: "uppercase",
  };

  return (
    <>
      <h1
        style={{
          textAlign: "center",
          textTransform: "uppercase",
          color: "red",
        }}
      >
        Main Component
      </h1>
      <p style={Pstyle}>Let's learn React.js</p>\
    </>
  );
};

export default App;

1. Basic Props Example Props allow you to pass data from a parent component to a child component.


import React from 'react';

// Child Component
function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}
ofject
// Parent Component
function App() {
  return (
    <div>
      <Greeting name="John" />
      <Greeting name="Emma" />
    </div>
  );
}

export default App;

2. Destructuring Props You can destructure props for cleaner code.

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

3. Props with Multiple Values You can pass multiple values using props.

function UserCard(props) {
  return (
    <div>
      <h2>Name: {props.name}</h2>

Default Props with Destructuring When using destructuring in the function parameters, you can assign default values directly.

function Greeting({ name = 'Guest' }) {
  return <h1>Hello, {name}!</h1>;
} 

function App() {
  return (
    <div>
      <Greeting /> {/* Default: 'Guest' */}
      <Greeting name="Emma" /> {/* Uses 'Emma' */}
    </div>
  );
}

export default App;

recomm
const {
    CompanyName = "Unknown",
    details = "This is a company details",
    departments,
    oncompanyselect,
    // children,
  } = props;

  return (
    <div>
      <h1>{CompanyName}</h1>
      <p>{details}</p>
      <h3>Departments:</h3>
      {departments ? (
        <ul>
          {departments.map((dept, index) => (
            <li key={index}>{dept}</li>
          ))}
        </ul>
      ) : (
        <p>No departments available.</p>
      )}
      <button onClick={oncompanyselect}>Select Company</button>
    </div>
  );
};

onClick

import React from 'react';

function App() {
  const handleClick = () => {
    alert("Button was clicked!");
  };

  return (
    <div>
      <button onClick={handleClick}>Click Me</button>
    </div>
  );
}

export default App;

 Passing Arguments to onClick
You can pass arguments to the event handler using an arrow function or a function reference.

import React from 'react';

function App() {
  const handleClick = (message) => {
    alert(message);
  };

  return (
    <div>
      <button onClick={() => handleClick("Hello, React!")}>Click Me</button>
    </div>
  );
}

export default App;

onClick with State You can use onClick to update a component's state.

import React, { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);

  const handleIncrement = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={handleIncrement}>Increment</button>
    </div>
  );
}

export default App;