How Do I Learn React? A Comprehensive Guide

Learn React development efficiently and effectively with this comprehensive guide. From grasping the fundamentals to mastering advanced techniques, discover how to embark on a rewarding React learning journey. We’ll explore a detailed roadmap and practical insights to help you become proficient in React. This guide will help anyone looking to master React, whether you’re a beginner or an experienced developer looking to upskill.

1. Understanding the Core Concepts of React

Before diving into coding, it’s vital to grasp the fundamental concepts that underpin React.

1.1 What is React?

React is a declarative, efficient, and flexible JavaScript library for building user interfaces (UIs). Created by Facebook, it allows developers to construct complex UIs from small and isolated pieces of code called components. React handles the view layer for web and mobile apps, enabling the creation of reusable UI components. This approach simplifies the development process, making it more maintainable and scalable. React is not a full-fledged framework like Angular but a library focused on UI development, which can be integrated with other libraries and frameworks.

1.2 Key Concepts: Components, JSX, Props, and State

• Components: The building blocks of any React application. They are independent and reusable bits of code that return React elements describing a part of the UI. Components can be functional or class-based, but modern React development favors functional components with hooks for managing state and side effects.
• JSX (JavaScript XML): A syntax extension to JavaScript that allows you to write HTML-like structures within your JavaScript code. It makes React component code more readable and easier to maintain. JSX is not understood by browsers directly, so it needs to be transformed into standard JavaScript using tools like Babel.
• Props (Properties): Used to pass data from a parent component to a child component. Props are read-only from the child component’s perspective, ensuring data flows in one direction. This unidirectional data flow enhances predictability and simplifies debugging.
• State: A JavaScript object that represents the data a component manages and updates. Unlike props, state is private to the component and can be changed via setState in class components or via hooks like useState in functional components. Changes to state trigger a re-render of the component, updating the UI.

1.3 The Virtual DOM

React uses a virtual DOM (Document Object Model) as an abstraction over the actual DOM. When changes occur in a React component, React first updates the virtual DOM. Then, it compares the virtual DOM with a previous snapshot and calculates the minimal set of changes needed to update the real DOM. This process, known as “diffing,” optimizes performance by reducing the number of direct manipulations to the real DOM, which are costly.

1.4 Unidirectional Data Flow

React follows a unidirectional data flow, meaning data flows in a single direction throughout the application. Typically, data is passed down from parent components to child components via props, and actions or events trigger updates to the state in the parent component. This design pattern helps manage complexity and makes it easier to trace the flow of data, leading to more predictable and maintainable code.

Grasping these core concepts is the foundation of your React journey. With these concepts in mind, you can move on to setting up your development environment.

2. Setting Up Your Development Environment for React

Before you start writing React code, setting up your development environment correctly is essential. This includes installing Node.js, npm (or yarn), and choosing a suitable code editor.

2.1 Installing Node.js and npm (or yarn)

Node.js is a JavaScript runtime built on Chrome’s V8 JavaScript engine. npm (Node Package Manager) is the default package manager for Node.js. Yarn is another package manager developed by Facebook, which provides similar functionality to npm but with some performance improvements.

• Node.js:
  1. Go to the official Node.js website: nodejs.org.
  2. Download the LTS (Long Term Support) version for stability.
  3. Run the installer and follow the prompts.
  4. Verify the installation by opening a terminal and typing node -v and npm -v. This should display the versions of Node.js and npm, respectively.
• Yarn (Alternative to npm):
  1. After installing Node.js and npm, install Yarn globally by running npm install -g yarn in the terminal.
  2. Verify the installation by typing yarn -v in the terminal.

2.2 Choosing a Code Editor

A good code editor can significantly enhance your development experience. Here are some popular options:

• Visual Studio Code (VS Code): A free, lightweight, and powerful editor with excellent support for JavaScript and React development. It offers a wide range of extensions, including ESLint, Prettier, and React-specific tools.
• Sublime Text: A sophisticated text editor for code, markup, and prose. It is known for its speed, ease of use, and a wide variety of plugins.
• Atom: A free and open-source text and source code editor based on web technologies. Atom is highly customizable and has a rich ecosystem of packages.

VS Code is generally recommended due to its extensive feature set and robust community support for React development.

2.3 Setting Up Create React App

Create React App is an officially supported way to create new React applications. It sets up a modern React development environment with just one command, so you can start building your React application quickly.

1. Open your terminal and navigate to the directory where you want to create your React app.
2. Run the following command:

npx create-react-app my-react-app

(Replace my-react-app with your desired application name.)

3. Once the installation is complete, navigate to your project directory:

cd my-react-app

4. Start the development server:

npm start

This will open your new React app in your default web browser, usually at http://localhost:3000.

With your development environment set up, you’re ready to start building your first React component.

3. Building Your First React Component

Creating your first React component is a crucial step in understanding React development. This section will guide you through creating a simple functional component and integrating it into your application.

3.1 Creating a Functional Component

Functional components are a simpler way to write components in React. They are JavaScript functions that optionally accept props as an argument and return React elements.

1. Open your project directory in your code editor.
2. Navigate to the src directory.
3. Create a new file named MyComponent.js.
4. Add the following code to MyComponent.js:

import React from 'react';

function MyComponent(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>This is my first React component.</p>
    </div>
  );
}

export default MyComponent;

In this code:

• import React from 'react'; imports the React library, which is essential for creating React components.
• function MyComponent(props) { ... } defines a functional component named MyComponent. It accepts props as an argument, which allows it to receive data from its parent component.
• The return statement returns JSX that describes the UI. In this case, it’s a div containing an h1 element that displays a greeting using the name prop and a p element with a simple message.
• export default MyComponent; makes the component available for use in other parts of the application.

3.2 Integrating the Component into Your App

Now that you’ve created your component, you need to integrate it into your application.

1. Open src/App.js.
2. Import MyComponent at the top of the file:

import MyComponent from './MyComponent';

3. Use MyComponent inside the App component:

import React from 'react';
import MyComponent from './MyComponent';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <MyComponent name="Learns.edu.vn User" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

In this code, <MyComponent name="Learns.edu.vn User" /> is added inside the App component, passing the name prop with the value “Learns.edu.vn User”.

3.3 Viewing the Results

1. Save both MyComponent.js and App.js.
2. If your development server is running, the browser will automatically refresh, and you should see “Hello, Learns.edu.vn User!” displayed on the screen.

Congratulations you’ve created and integrated your first React component. This is the first step towards building more complex UIs.

4. Working with Props and State in React

Understanding how to use props and state is critical for building dynamic and interactive React applications. This section will guide you through passing data using props and managing component data using state.

4.1 Passing Data with Props

Props (properties) are used to pass data from a parent component to a child component. They are read-only from the child component’s perspective and are a key mechanism for making components reusable and configurable.

1. In MyComponent.js, modify the component to accept and display multiple props:

import React from 'react';

function MyComponent(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>{props.message}</p>
      <p>Age: {props.age}</p>
    </div>
  );
}

export default MyComponent;

2. In App.js, pass additional props to MyComponent:

import React from 'react';
import MyComponent from './MyComponent';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <MyComponent
          name="Learns.edu.vn User"
          message="Welcome to my first React app"
          age={30}
        />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

In this code, the MyComponent now receives three props: name, message, and age. The age prop is passed as a JavaScript expression using curly braces {}.

3. Save both files and view the results in your browser. You should see the new props displayed in the component.

4.2 Managing Component Data with State

State is a way for React components to manage and update their data. Unlike props, state is private to the component and can be changed. Modern React development uses hooks, such as useState, to manage state in functional components.

1. In MyComponent.js, import useState from React and add a state variable:

import React, { useState } from 'react';

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

  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>{props.message}</p>
      <p>Age: {props.age}</p>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default MyComponent;

In this code:

• import { useState } from 'react'; imports the useState hook from React.
• const [count, setCount] = useState(0); declares a state variable count with an initial value of 0. The useState hook returns an array with two elements: the current state value (count) and a function to update the state (setCount).
• <p>Count: {count}</p> displays the current value of the count state variable.
• <button onClick={() => setCount(count + 1)}>Increment</button> creates a button that, when clicked, calls the setCount function to increment the count state variable.

2. Save MyComponent.js and view the results in your browser. You should see a button labeled “Increment.” Clicking this button will update the count state variable and re-render the component, displaying the new count value.

4.3 Understanding State Updates

When updating state using setCount, React re-renders the component to reflect the new state. This re-rendering process is efficient because React only updates the parts of the DOM that have changed. Understanding this update mechanism is crucial for optimizing the performance of your React applications.

By mastering props and state, you can build dynamic and interactive components that respond to user interactions and data changes.

5. Handling Events in React

Handling events is essential for making your React components interactive. React provides a straightforward way to handle DOM events such as clicks, form submissions, and keyboard inputs. This section will guide you through event handling in React components.

5.1 Basic Event Handling

In React, events are handled directly within the JSX elements. You can attach event listeners to HTML elements using on followed by the event name (e.g., onClick, onChange, onSubmit). The event listener should be a function that will be executed when the event occurs.

1. In MyComponent.js, add a button that displays an alert when clicked:

import React, { useState } from 'react';

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

  const showAlert = () => {
    alert('Button clicked');
  };

  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>{props.message}</p>
      <p>Age: {props.age}</p>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={showAlert}>Show Alert</button>
    </div>
  );
}

export default MyComponent;

In this code:

• const showAlert = () => { alert('Button clicked'); }; defines a function that displays an alert message.
• <button onClick={showAlert}>Show Alert</button> attaches the showAlert function to the onClick event of the button.

2. Save MyComponent.js and view the results in your browser. Clicking the “Show Alert” button will display an alert message.

5.2 Passing Event Handlers as Props

Event handlers can also be passed as props from a parent component to a child component. This allows the parent component to control how the child component responds to certain events.

1. In App.js, define an event handler function:

In this code:

• const handleButtonClick = () => { alert('Button in App component clicked'); }; defines a function that displays an alert message.
• onButtonClick={handleButtonClick} passes the handleButtonClick function as a prop to MyComponent.

2. In MyComponent.js, modify the component to use the event handler passed as a prop:

import React, { useState } from 'react';

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

  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>{props.message}</p>
      <p>Age: {props.age}</p>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={props.onButtonClick}>Click Me</button>
    </div>
  );
}

export default MyComponent;

In this code, <button onClick={props.onButtonClick}>Click Me</button> attaches the onButtonClick prop to the onClick event of the button.

3. Save both files and view the results in your browser. Clicking the “Click Me” button will display the alert message defined in the App component.

5.3 Handling Form Events

Handling form events, such as onChange and onSubmit, is crucial for building interactive forms in React.

1. In MyComponent.js, add a simple form with an input field and a submit button:

import React, { useState } from 'react';

function MyComponent(props) {
  const [count, setCount] = useState(0);
  const [inputValue, setInputValue] = useState('');

  const handleInputChange = (event) => {
    setInputValue(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`Input value: ${inputValue}`);
  };

  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>{props.message}</p>
      <p>Age: {props.age}</p>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <form onSubmit={handleSubmit}>
        <label>
          Enter text:
          <input type="text" value={inputValue} onChange={handleInputChange} />
        </label>
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

export default MyComponent;

In this code:

• const [inputValue, setInputValue] = useState(''); declares a state variable inputValue to store the value of the input field.
• const handleInputChange = (event) => { setInputValue(event.target.value); }; defines a function that updates the inputValue state variable whenever the input field changes.
• const handleSubmit = (event) => { event.preventDefault(); alert(Input value: ${inputValue}); }; defines a function that prevents the default form submission behavior and displays an alert message with the current input value.
• <input type="text" value={inputValue} onChange={handleInputChange} /> binds the inputValue state variable to the value attribute of the input field and attaches the handleInputChange function to the onChange event.
• <form onSubmit={handleSubmit}> attaches the handleSubmit function to the onSubmit event of the form.

2. Save MyComponent.js and view the results in your browser. Entering text into the input field and submitting the form will display an alert message with the entered text.

By mastering event handling, you can create interactive and responsive React components that provide a rich user experience.

6. Conditional Rendering in React

Conditional rendering is a fundamental technique in React that allows you to display different UI elements based on certain conditions. This section will guide you through various methods of conditional rendering in React.

6.1 Using If/Else Statements

The most straightforward way to conditionally render content in React is by using if/else statements within your component.

1. In MyComponent.js, add a state variable to track whether a message should be displayed:

import React, { useState } from 'react';

function MyComponent(props) {
  const [count, setCount] = useState(0);
  const [showMessage, setShowMessage] = useState(true);

  const handleButtonClick = () => {
    setShowMessage(!showMessage);
  };

  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>{props.message}</p>
      <p>Age: {props.age}</p>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      {showMessage ? (
        <p>This message is conditionally rendered.</p>
      ) : null}
      <button onClick={handleButtonClick}>
        {showMessage ? 'Hide Message' : 'Show Message'}
      </button>
    </div>
  );
}

export default MyComponent;

In this code:

• const [showMessage, setShowMessage] = useState(true); declares a state variable showMessage with an initial value of true.
• {showMessage ? (<p>This message is conditionally rendered.</p>) : null} uses a ternary operator to conditionally render a paragraph element based on the value of showMessage.
• <button onClick={handleButtonClick}>{showMessage ? 'Hide Message' : 'Show Message'}</button> toggles the value of showMessage when clicked, updating the button text accordingly.

2. Save MyComponent.js and view the results in your browser. Clicking the “Hide Message” button will toggle the display of the conditional message.

6.2 Using Ternary Operators

Ternary operators provide a concise way to conditionally render content in React. They are particularly useful for simple conditional logic.

1. In MyComponent.js, modify the component to display a different message based on the value of count:

import React, { useState } from 'react';

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

  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>{props.message}</p>
      <p>Age: {props.age}</p>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <p>
        {count > 5
          ? 'Count is greater than 5'
          : 'Count is less than or equal to 5'}
      </p>
    </div>
  );
}

export default MyComponent;

In this code, {count > 5 ? 'Count is greater than 5' : 'Count is less than or equal to 5'} uses a ternary operator to display a different message based on whether count is greater than 5.

2. Save MyComponent.js and view the results in your browser. Incrementing the count will change the displayed message when the count exceeds 5.

6.3 Using Logical AND (&&) Operator

The logical AND (&&) operator is a concise way to conditionally render content when you only want to render something if a condition is true.

1. In MyComponent.js, modify the component to display a message only when count is greater than 0:

import React, { useState } from 'react';

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

  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>{props.message}</p>
      <p>Age: {props.age}</p>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      {count > 0 && <p>Count is greater than 0</p>}
    </div>
  );
}

export default MyComponent;

In this code, {count > 0 && <p>Count is greater than 0</p>} only renders the paragraph element if count is greater than 0.

2. Save MyComponent.js and view the results in your browser. Incrementing the count will display the message only when the count is greater than 0.

By mastering conditional rendering techniques, you can create dynamic and adaptive UIs that respond to different states and conditions.

7. List and Keys in React

Rendering lists of data is a common task in React development. When rendering lists, it is essential to use keys to help React efficiently update the DOM. This section will guide you through rendering lists and using keys in React.

7.1 Rendering Lists

To render a list of data in React, you can use the map function to transform an array of data into an array of React elements.

1. In MyComponent.js, add an array of items to the component:

import React from 'react';

function MyComponent(props) {
  const items = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'];

  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>{props.message}</p>
      <p>Age: {props.age}</p>
      <ul>
        {items.map((item) => (
          <li>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default MyComponent;

In this code:

• const items = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5']; defines an array of items to be rendered.
• {items.map((item) => (<li>{item}</li>))} uses the map function to transform each item in the items array into a list item element.

2. Save MyComponent.js and view the results in your browser. You should see a list of items displayed on the screen.

7.2 Using Keys

When rendering lists, React requires each list item to have a unique key prop. Keys help React identify which items have changed, been added, or been removed. Using keys improves the performance of list updates.

1. Modify the component to add keys to the list items:

import React from 'react';

function MyComponent(props) {
  const items = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'];

  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>{props.message}</p>
      <p>Age: {props.age}</p>
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default MyComponent;

In this code:

• <li key={index}>{item}</li> adds a key prop to each list item, using the index of the item as the key.

7.3 Best Practices for Keys

• Unique Keys: Keys should be unique among sibling elements.
• Stable Keys: Keys should be stable and not change between re-renders.
• Use Data IDs: If your data has unique IDs, use those as keys.
• Avoid Indexes: Using indexes as keys can lead to performance issues and unexpected behavior when the list changes.

Here’s an example using unique IDs from a dataset:

import React from 'react';

function MyComponent(props) {
  const items = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' },
  ];

  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>{props.message}</p>
      <p>Age: {props.age}</p>
      <ul>
        {items.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default MyComponent;

In this code, key={item.id} uses the unique id from each item as the key.

By using keys correctly, you can ensure that React efficiently updates lists, providing a smooth user experience.

8. Working with Forms in React

Forms are a crucial part of many web applications. React provides a way to handle form inputs and manage form state effectively. This section will guide you through working with controlled and uncontrolled components in React forms.

8.1 Controlled Components

In a controlled component, the form data is handled by the React component’s state. The component controls the input elements by providing their values and updating them via event handlers.

1. In MyComponent.js, add a controlled input field:

import React, { useState } from 'react';

function MyComponent(props) {
  const [inputValue, setInputValue] = useState('');

  const handleInputChange = (event) => {
    setInputValue(event.target.value);
  };

  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>{props.message}</p>
      <p>Age: {props.age}</p>
      <label>
        Controlled Input:
        <input
          type="text"
          value={inputValue}
          onChange={handleInputChange}
        />
      </label>
      <p>Input Value: {inputValue}</p>
    </div>
  );
}

export default MyComponent;

In this code:

• const [inputValue, setInputValue] = useState(''); declares a state variable inputValue to store the value of the input field.
• const handleInputChange = (event) => { setInputValue(event.target.value); }; defines a function that updates the inputValue state variable whenever the input field changes.
• <input type="text" value={inputValue} onChange={handleInputChange} /> binds the inputValue state variable to the value attribute of the input field and attaches the handleInputChange function to the onChange event.

2. Save MyComponent.js and view the results in your browser. Entering text into the input field will update the inputValue state variable and display the current input value.

8.2 Handling Form Submission

To handle form submission, you can attach an event listener to the onSubmit event of the form.

1. Modify the component to include a form and handle its submission:

import React, { useState } from 'react';

function MyComponent(props) {
  const [inputValue, setInputValue] = useState('');

  const handleInputChange = (event) => {
    setInputValue(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`Submitted value: ${inputValue}`);
  };

  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>{props.message}</p>
      <p>Age: {props.age}</p>
      <form onSubmit={handleSubmit}>
        <label>
          Controlled Input:
          <input
            type="text"
            value={inputValue}
            onChange={handleInputChange}
          />
        </label>
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

export default MyComponent;

In this code:

• const handleSubmit = (event) => { event.preventDefault(); alert(Submitted value: ${inputValue}); }; defines a function that prevents the default form submission behavior and displays an alert message with the current input value.
• <form onSubmit={handleSubmit}> attaches the handleSubmit function to the onSubmit event of the form.

2. Save MyComponent.js and view the results in your browser. Entering text into the input field and submitting the form will display an alert message with the submitted value.

8.3 Uncontrolled Components

In an uncontrolled component, the form data is handled by the DOM itself. You can access the form values using refs.

1. Modify the component to include an uncontrolled input field:

import React, { useRef } from 'react';

function MyComponent(props) {
  const inputRef = useRef(null);

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`Submitted value: ${inputRef.current.value}`);
  };

  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>{props.message}</p>
      <p>Age: {props.age}</p>
      <form onSubmit={handleSubmit}>
        <label>
          Uncontrolled Input:
          <input type="text" ref={inputRef} />
        </label>
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

export default MyComponent;

In this code:

• const inputRef = useRef(null); declares a ref inputRef to access the input element.
• <input type="text" ref={inputRef} /> attaches the inputRef to the input element.
• alert(Submitted value: ${inputRef.current.value}); accesses the value of the input element using inputRef.current.value.

2. Save MyComponent.js and view the results in your browser. Entering text into the input field and submitting the form will display an alert message with the submitted value.

By mastering form handling in React, you can build robust and interactive forms that provide a seamless user experience.

9. React Hooks Explained

React hooks are functions that let you “hook into” React state and lifecycle features from functional components. They were introduced in React 16.8 and provide a more straightforward way to manage state and side effects in functional components. This section will guide you through some of the most commonly used React hooks.

9.1 useState Hook

The useState hook allows you to add state to functional components.

1. In MyComponent.js, add a state variable using useState:

import React, { useState } from 'react';

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

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

  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>Count: {count}</p>
      <button onClick={incrementCount}>Increment</button>
    </div>
  );
}

export default MyComponent;

In this code:

• import { useState } from 'react'; imports the useState hook from React.
• const [count, setCount] = useState(0); declares a state variable count with an initial value of 0. The useState hook returns an array with two elements: the current state value (count) and a function to update the state (setCount).
• <button onClick={incrementCount}>Increment</button> attaches the incrementCount function to the onClick event