React

What is React

React is a JavaScript library(using component-based approach) for building user interfaces (UIs)

How React works
React uses a virtual DOM which is a lightweight copy of the real DOM (Document Object Model) to render user interfaces (UI) When data changes, React updates the virtual DOM instead of directly updating the entire DOM. React then uses a diffing algorithm to compare the new and previous virtual DOMs to identify changes. React only updates the parts of the DOM that need to be changed, which reduces the need for full page reloads

Terms

Components

React components are JavaScript functions that return markup

export default keyword specify the main component in the file.


function Button() {    //This is button component
    return (
        <button>Submit</button>
    );
}

export default function MyApp() {   //export default is Starting point
    return (
        <div>
            <h1>Welcome to my app</h1>
            <Button />        //button component inside other component
        </div>
    );
}

Rendering lists

will rely on JavaScript features like for loop and the array map() function to render lists of components.


const vals = [
    {name:'Amit', marks:'1'},  
    {name:'tami', marks:'2'},
];
function ListComponent() {    //This is List component
    const Items = [];
    for (let i = 0; i < vals.length; i++)  {
        Items.push(
            <li>{vals[i].name}, {vals[i].marks}</li>
        );
    }
    return (
        <ul>
            {Items}
        </ul>  
    );
}
export default function main() {    //export default is Starting point
    return (
    <div>
        <h1>Welcome to my app</h1>
        <ListComponent />        // Calling Component from this Component
    </div>
    );
}

Output from Code

Welcome to my app
- Amit, 1
- tami, 2

Event Handler

You can respond to events by declaring event handler functions


function handler() {
    alert('You clicked me');
}
function Button() {    //Component
    return (
        <button onclick={handler}>
            Submit
        </button>  
    );
}
export default function main() {
    return (
    <div>
            <h1>Welcome to my app</h1>
            <Button /> 
    </div>
    );
}

Welcome to my app
 -------
|Submit|    << When click, alert is seen
 -------

Remembering State

Often, we want our component to “remember” some information and display it. For example, maybe we want to count the number of times a button is clicked. To do this, add state to our component


import { useState } from 'react';

export default function MyApp() {
    return (
    <div>
        <h1>Counters
        <MyButton />             // Calls MyButton Component
    </div>
    );
}

function MyButton() {
    // useState() will return 2 things.
    // current state variable (a), and the function that update it (setA).
    const [a, setA] = useState(0);

    function handleClick() {
        setA(a + 1);
    }

    return (
    <button onClick={handleClick}>
        Clicked {a} times
    </button>
    );
}


import { useState } from 'react';

export default function MyApp() {          //Execution Starts here
    const [a, setA] = useState(0);               //Varaiable storing value

    function handleClick() {
        setA(a + 1);
    }

    return (
        // 2 instances of MyButton() called.
        // State(a) is passed to each MyButton()
        // The information you pass down like this is called props
    <div>
        <h1>Counters that update together</h1>
        <MyButton a={a} onClick={handleClick} />
        <MyButton a={a} onClick={handleClick} />
    </div>
    );
}

function MyButton({ a, onClick }) {        //Arguments(var, eventHandler)
    return (
    <button onClick={onClick}>
        Clicked {a} times
    </button>
    );
}