Basics of React and Event Handling:-

Setting Up Your Development Environment:

1. Install Node.js:

• Node.js is a JavaScript runtime environment that allows you to run JavaScript code outside of a web browser. Visit the Node.js website (https://nodejs.org/) and download the latest version of Node.js for your operating system. Follow the installation instructions to install Node.js on your computer.

1. Create a New React App:

• Once Node.js is installed, open your terminal or command prompt and run the following command to create a new React app:
  npx create-react-app my-react-app
• Replace my-react-app with the name of your project. This command will create a new directory with all the necessary files and dependencies for a React app.

1. Start the Development Server:

• Navigate to the directory of your newly created React app and run the following command to start the development server:
  cd my-react-app npm start
• This command will start the development server and open your default web browser to http://localhost:3000, where you can see your React app running.

Understanding React Components:

At the heart of React development are components, which are reusable building blocks for creating user interfaces. React components can be functional or class-based, and they encapsulate both the structure and behavior of UI elements.

Creating Your First React Component:

Let’s create a simple functional component called HelloWorld that renders a greeting message:

import React from 'react';

const HelloWorld = () => {
  return <h1>Hello, World!</h1>;
};

export default HelloWorld;

In this example:

• We import the React library, which is necessary for creating React components.
• We define a functional component named HelloWorld using the arrow function syntax.
• Inside the component, we return a JSX element <h1>Hello, World!</h1>.
• Finally, we export the HelloWorld component so that it can be imported and used in other parts of our application.

Event Handling in React:

React provides a straightforward way to handle user events such as clicks, input changes, and form submissions. Here’s an example of handling a click event:

import React from 'react';

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

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

export default Button;

Exploring React Hooks:

Hooks are functions that enable functional components to use state and other React features without needing to write a class. Let’s explore a couple of hooks:

1. useState Hook:

• useState allows functional components to manage local state. Here’s an example:

   import React, { useState } from 'react';

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

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

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

   export default Counter;

2. useEffect Hook:

• useEffect enables functional components to perform side effects, such as data fetching or DOM manipulation, after render. Example:

   import React, { useState, useEffect } from 'react';

   const DataFetcher = () => {
     const [data, setData] = useState(null);

     useEffect(() => {
       fetch('https://api.example.com/data')
         .then(response => response.json())
         .then(data => setData(data))
         .catch(error => console.error(error));
     }, []);

     return <div>{data ? <p>Data: {data}</p> : <p>Loading...</p>}</div>;
   };

   export default DataFetcher;