React.js

React.js:

• ReactJS is a component-based JavaScript library used for building dynamic and interactive user interfaces.
• It enables developers to create reusable UI components and develop fast, scalable single-page applications (SPAs) with efficient rendering and updates.

History of react.js:

• React.js was created in 2011 by Jordan Walke, a software engineer at Facebook (now Meta).
• Initially developed as an internal prototype to solve complex UI update issues on the Facebook News Feed, it has grown into one of the most widely used front-end JavaScript libraries in the world.

key components of React.js

1. Components
2. JSX
3. Props
4. State
5. Hooks
6. Virtual DOM

Uses of react:

1. Single-Page Applications (SPAs)
2. High-Frequency Data Updates
3. Complex State Management
4. Component Reusability
5. Dashboard-Heavy Product
6. Large-Scale Teams

Why react.js?

• React.js is primarily used because it simplifies the creation of dynamic, high-performance user interfaces using reusable code.
• React.js was introduced to solve complex code maintenance and slow user interface (UI) rendering performance in large-scale web applications.

difference between library and framework

SPA:

A Single Page Application (SPA) in React is a web application that loads only one single HTML document from the server and then dynamically updates that page as the user interacts with it.

NPM:

• npm (Node Package Manager) is the tool used to download, install, and manage the code libraries and tools required to build a React application.
• It functions as both a command-line installer and a massive public registry containing millions of reusable JavaScript packages, including React itself.

Creating a project in react.js

First create a folder
Then open terminal
And use this command to create a project

npm create vite@latest

And use this command to run a project

npm run dev

Components in react.js

• React components are independent, reusable building blocks that combine business logic, state, and user interface (UI) elements into a single capsule.
• They act like JavaScript functions but work in isolation, allowing you to split complex user interfaces into smaller, manageable pieces.
• Each component outputs HTML-like structures called JSX.

Primary Types of Components:

1. Functional Components:
These are plain JavaScript functions that accept a single "props" object as an argument and return JSX.
2. Class Components:
These are ES6 classes that extend the base React.Component class and require a render() method to return JSX.

difference between functional components and class components

JSX:

• JSX stands for JavaScript XML, and it is a syntax extension for JavaScript used primarily by React to describe what the user interface (UI) should look like.
• It allows developers to write HTML-like markup directly inside a JavaScript file, combining visual structure with component logic in one place.

React hooks:

React Hooks are built-in JavaScript functions introduced in React 16.8 that allow you to use state and other React features inside functional components without writing a class component

useState:

• useState is a built-in React Hook that allows you to add local state to functional components.
• It returns an array containing the current state value and a setter function to update that value.
• When the setter function is called, React automatically re-renders the component to reflect the new data on the screen.

Syntax:

import React, { useState } from 'react';
const [state, setState] = useState(initialValue);

state(variable): The current value of the state.
setState(function): The updater function used to change the value and trigger a re-render.
initialValue: The starting value for your state (can be a number, string, boolean, object, array, or null).

Task using useState - counter app

import { useState } from "react"

function Counter(){
    const [count, setCount] = useState(0);
    function increment(){
        setCount(count + 1)
    }
    function decrement(){
        setCount(count - 1)
    }
    function reset(){
        setCount(0)
    }

    return(
        <div className="div">
            <h1>Counter App</h1>
            <h3>Count: {count}</h3>
            <button onClick={increment}>+</button>
            <button onClick={decrement}>-</button>
            <button onClick={reset}>reset</button>
        </div>
    )
}
export default Counter;

Output: