1. What is React?

React is a JavaScript library used for building user interfaces, especially single-page applications where you need a fast and interactive user experience. React allows you to build components, which are reusable UI elements, and manage their state effectively.

2. Setting Up React

To set up React, you'll need Node.js and npm. You can create a new React application using Create React App:

npx create-react-app my-react-app

After the installation is complete, navigate to your project directory and start the development server:

cd my-react-app
npm start

3. React Application Structure

React applications typically have the following structure:

• src: Contains all React components, styles, and assets.
• public: Contains static files like index.html.
• package.json: Manages project dependencies and scripts.

4. Creating a Component

React components are JavaScript functions or classes that return a UI. Here's how to create a functional component:

import React from 'react';

function MyComponent() {
  return <h1>Hello, React!</h1>;
}

export default MyComponent;

To use this component in your application, import it into App.js:

import MyComponent from './MyComponent';

function App() {
  return (
    <div>
      <MyComponent />
    </div>
  );
}

export default App;

5. Props and State

Props (short for "properties") are used to pass data to components. State is used to store and manage data that can change over time.

Here’s an example of using props in a component:

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

function App() {
  return <Greeting name="Alice" />;
}

State can be managed using the useState hook in functional components:

import React, { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

6. Event Handling

React allows you to handle events such as clicks and keyboard input. Here's how to handle a button click event:

function Button() {
  const handleClick = () => alert('Button clicked!');
  return <button onClick={handleClick}>Click me</button>
}

7. Conditional Rendering

In React, you can conditionally render components based on state or props. For example:

function UserGreeting() {
  return <h1>Welcome back!</h1>;
}

function GuestGreeting() {
  return <h1>Please sign up.</h1>;
}

function Greeting({ isLoggedIn }) {
  return isLoggedIn ? <UserGreeting /> : <GuestGreeting />;
}

8. Lists and Keys

React renders lists of elements efficiently using the map() function. Each list item should have a unique key:

function List() {
  const items = ['Apple', 'Banana', 'Cherry'];
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

9. Forms in React

React makes it easy to manage forms with controlled components. Example of a controlled form input:

function Form() {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <form>
      <label>Name:
        <input type="text" value={value} onChange={handleChange} />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

10. Running React in Production

To create a production build of your React app, use:

npm run build

This will create an optimized build in the build folder that you can deploy to a server.