React

React is a popular JavaScript library used to create modern websites and web applications. It helps developers build user interfaces using small, reusable components, making code easier to write and manage. React updates only the necessary parts of a webpage when data changes, which makes websites faster, smoother, and more interactive for users.

Why do we use React ?

React is used to build fast, interactive, and user-friendly web applications. It allows developers to create reusable components, making development easier and code more organized. React also improves performance by updating only the parts of a webpage that change, helping websites run smoothly and efficiently.

In an e-commerce website, a product card component can be created once and reused to display hundreds of products. If the product price changes, React updates only that specific part of the page instead of reloading the entire website, making the application faster and smoother.

How to start React Project

To start a modern React project, the standard and most recommended tool is Vite, as the old create-react-app utility has been officially deprecated

Prerequisites

Make sure you have Node.js installed on your machine.

1. Open your terminal or command prompt.

2. Run node -v to check your version.

3. If it is not installed, download it from the official Node.js Website.

Create the Project

Open your terminal, navigate to the folder where you want to keep your project, and run the following command.

npm create vite@latest my-react-app -- --template react

Note :- Replace my-react-app with your preferred project name.

Install Dependencies and Start the App

Vite scaffolds the project folder instantly. Next, run these three commands in sequence to step into the project folder, install the required packages, and fire up the local development server.

cd my-react-app
npm install
npm run dev

View Your Application

Once the local server boots up, your terminal will provide a local URL, typically http://localhost:5173. Open this link in your web browser to see your brand-new, running React application.

Component in React

A Component is one of the core building blocks of React. It is a reusable and independent piece of code that represents a part of the User Interface (UI). Components allow developers to break down complex interfaces into smaller, manageable, and reusable pieces.

Why Do We Need Components?

In large applications, managing the entire UI in a single file becomes difficult. Components help organize the code by dividing the UI into smaller sections, making it easier to develop, maintain, and reuse.

For example, a website can be divided into components such as:

• Navbar

• Footer

• User Profile Card

• Product Card

• Sidebar

Each of these components can be developed and maintained independently.

Functional Component Example

Modern React applications primarily use Functional Components.

function Welcome() {
  return <h1>Hello World!</h1>;
}

This component renders a simple heading.

To use the component:

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

Components with Props

Props (Properties) allow data to be passed from a parent component to a child component.

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

Usage:

<Welcome name="John" />
<Welcome name="Emma" />

Output:

Hello, John
Hello, Emma

The same component can display different content based on the data it receives.

Features of Components

Reusability

A component can be reused multiple times throughout an application, reducing code duplication.

Maintainability

Since the UI is divided into smaller parts, updating and maintaining code becomes much easier.

Readability

Components improve code structure and make applications easier to understand.

Modularity

Each component focuses on a specific task, promoting a clean and organized architecture.

Conclusion

Components are the foundation of React applications. They enable developers to create reusable, modular, and maintainable user interfaces. By breaking the UI into smaller components, React applications become easier to build, scale, and manage. In modern React development, almost every part of the interface is created as a component.

Hooks in React

React features such as state, lifecycle methods, context, and more without writing class components.

Hooks make React code simpler, more readable, and easier to reuse.

Why Do We Need Hooks ?

Before Hooks, developers often used class components to manage state and lifecycle logic. Hooks enable these capabilities in functional components, resulting in cleaner and more maintainable code.

• Manage component state

• Handle side effects

• Access context

• Reuse logic across components

• Write cleaner and more concise code

Custom Hook

A Custom Hook is a JavaScript function that allows you to extract and reuse stateful logic across multiple React components. It follows the same rules as built-in Hooks and its name must start with use.

• Promote code reusability

• Reduce duplication

• Improve readability

• Keep components focused on UI

• Simplify maintenance and testing

Creating a Custom Hook

import { useState } from "react";

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

  const increment = () => setCount(prev => prev + 1);
  const decrement = () => setCount(prev => prev - 1);
  const reset = () => setCount(initialValue);

  return { count, increment, decrement, reset };
}

Using a Custom Hook

function Counter() {
  const { count, increment, decrement, reset } = useCounter(0);

  return (
    <div>
      <h2>{count}</h2>
      <button onClick={increment}>Increase</button>
      <button onClick={decrement}>Decrease</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
}

In this example, the counter logic is separated from the component, making the component cleaner and easier to understand.

Rules for Custom Hooks

1. The function name must start with use.

2. Custom Hooks can call other Hooks.

3. Follow the standard Rules of Hooks.

4. Use them only for reusable logic, not for rendering UI.

useState Hook

The useState Hook is one of the most commonly used Hooks in React. It allows functional components to store and manage state. Whenever the state changes, React automatically re-renders the component and updates the UI.

• Adds state to functional components.

• Triggers UI updates automatically.

• Easy to understand and use.

• Eliminates the need for class component state management.

• Makes components more interactive and dynamic.

const [state, setState] = useState(initialValue);

Parameters

• state – The current state value.

• setState – A function used to update the state.

• initialValue – The initial value of the state.

Basic Example

import { useState } from "react";

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

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

How It Works

1. useState(0) initializes the state with 0.

2. count stores the current state value.

3. setCount() updates the state.

4. When the button is clicked, React re-renders the component with the new value.

useEffect Hook

The useEffect Hook is used to perform side effects in React functional components. Side effects are operations that interact with the outside world, such as fetching data from an API, updating the DOM, setting up event listeners, or managing timers.

Before Hooks, these tasks were typically handled using lifecycle methods in class components. The useEffect Hook provides a simpler and more concise way to manage them in functional components.

• Simplifies side effect management

• Replaces multiple lifecycle methods

• Supports cleanup functionality

• Makes code more organized and readable

• Works seamlessly with functional components

useEffect(() => {
  // Side effect logic

  return () => {
    // Cleanup logic (optional)
  };
}, [dependencies]);

• Effect Function – Contains the side effect logic.

• Cleanup Function – Optional function that runs before the component unmounts or before the effect runs again.

• Dependency Array – Controls when the effect should execute.

Example

import { useState, useEffect } from "react";

function Users() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(response => response.json())
      .then(data => setUsers(data));
  }, []);

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

• The API call runs only once when the component mounts.

• The fetched data is stored in state and displayed in the UI.

Common Use Cases

• Fetching data from APIs

• Updating the document title

• Managing timers and intervals

• Adding and removing event listeners

• Handling subscriptions

• Synchronizing external data with components