0% found this document useful (0 votes)

15 views80 pages

React Basics: Create Elements & Components

Uploaded by

nawab8770668117

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as TXT, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

15 views80 pages

React Basics: Create Elements & Components

Uploaded by

nawab8770668117

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as TXT, PDF, TXT or read online on Scribd

Program-1 : Hello World Without Create-react-app

************************************************
<html>
<head>
<script crossorigin
src="[Link]
<script crossorigin src="[Link]
[Link]"></script>
</head>
<body>at
<div id="example"></div>
<script>
const reactEle = [Link]('h1', {}, 'My First React App');
const domEle = [Link]('example');
const root = [Link](domEle);
[Link](reactEle);
</script>
</body>
</html>
Note: React object is available(can be used in console like other objects)

Program-2 : Nested Element Without Create-react-app

***************************************************
<html>
<head>
<script crossorigin
src="[Link]
<script crossorigin src="[Link]
[Link]"></script>
</head>
<body>
<div id="example"></div>
<script>
const title = [Link]('h1', {}, 'My First React Code');
const paragraph = [Link]('p', {}, 'Writing some more HTML');
const containerDiv = [Link]('div', {id:myDiv1}, [title,
paragraph]);

const domEle = [Link]('example');

const root = [Link](domEle);
[Link](containerDiv);
</script>
</body>
</html>

Program-3 : Nested Element using JSX (Babel)

************************************
<html>
<head>
<script crossorigin
src="[Link]
<script crossorigin src="[Link]
[Link]"></script>
<script src="[Link]
</head>
<body>
<div id="example"></div>
<script type="text/babel">
const reactEle = <div>
<h1>Hello World</h1>
<p>This is a paragraph</p>
<div>This is a div</div>
</div>
const domEle = [Link]('example');

const root = [Link](domEle);

[Link](reactEle)
</script>
</body>
</html>

Program-4: use Bootstrap

************************
1. install bootstrap
npm i bootstrap
2. add below 2 lines to [Link] file
import 'bootstrap/dist/css/[Link]';
import "bootstrap/dist/js/[Link]";

Program-5: use Bootstrap-icons

******************************
1. install bootstrap icons library
npm i bootstrap-icons
2. import [Link] file in to [Link]
import 'bootstrap-icons/font/[Link]';
3. Use class names
<i className="bi-alarm"></i>
<i className="bi-airplane" style={{ fontSize: "2rem", color:
"cornflowerblue" }}></i>

Program-6 : How to use React-icons

********************************
1. install react-icons
npm install react-icons
2. import react-icons in component
import { FaEdit, FaTrash } from 'react-icons/fa';
import { BsFillCalendarDateFill,BsFillClockFill } from 'react-icons/bs';
3. use the Icons
<FaEdit />
<FaTrash color='red' />

Program-7: React Rendering Elements

*********************************
export default function tick() {
const element = (
<div>
<h1>Hello, world!</h1>
<h2>Now The Time is {new Date().toLocaleTimeString()}.</h2>
</div>
);
[Link](element);
}
setInterval(tick, 1000);

Program-8: Fragments
*********************
import React from 'react';
class Header extends [Link] {
render() {
return (
<[Link]>
<div>I am an element!</div>
<button>I am another element</button>
</[Link]>
);
}
}
export default Header;

program-9: Data Binding

***********************
import React from 'react';
class App extends [Link] {
render() {
function formatName(user) {
return [Link] + ' ' + [Link];
}
let user = {
firstName: 'sanjay',
lastName: 'samantra'
};
return (
<div>
<h2>React Version is {[Link]}</h2>
<h2>{1 + 1}</h2>
<h2>my name is- {[Link]}</h2>
<h2>my full name is- {formatName(user)}</h2>
</div>
);
}
}
export default App;
program-10 display Image
*************************
1. place the image inside 'public' folder
2. use it in HTML file
<img src='images/[Link]' />
(OR)
1. import sachin from './[Link]'; (OR) const sachin = require('./[Link]')
2. <img src={sachin} />

program-11 : CSS
****************
import React from 'react';
class App extends [Link] {
render() {
var myStyle={
color:'blue',
backgroundColor:'yellow',
border:'5px solid green'
}
return (
<div>
Hello World!!!
<p style={{color:'red',fontSize:'42px'}}>this is paragraph</p>
<div style={myStyle}>this is a div</div>
</div>
);
}
}
export default App;

program-12 CSS Modules

*********************
[Link]
-------------------
.container {
margin: 40px;
border: 5px dashed pink;
}
.content {
font-size: 15px;
text-align: center;
}
.error {
color: red;
}

-------------
[Link]
--------------
.error{
background-color:yellow;
}

-------------
import React from 'react';
import styles from './[Link]';
import './[Link]';

const DashedBox = () => (

[Link](styles)
<div className={[Link]}>
<p className={[Link]}>Get started with CSS Modules style</p>
<div className={[Link]}>this is a div</div>
</div>
);
export default DashedBox;

Program-13 conditional CSS

**************************
import React from 'react';
export default function Demo1() {
let num = 5;
let style1 = { color: 'blue' }
let style2 = { color: 'red' }
return (
<>
<div style={num % 2 === 0 ? { color: "green" } : { color: "red" }}>
Number {num} is {num % 2 === 0 ? "even" : "odd"}
</div>
<div style={num % 2 === 0 ? style1 : style2}>
Number {num} is {num % 2 === 0 ? "even" : "odd"}
</div>
<button className={`btn btn-lg ${num % 2 === 0 ? "btn-success" :
"btn-danger"}`}>
add a class dynamically
</button>
</>
)
}

program-14 : Conditional Operator

*********************************
import React from 'react';
class Conditional extends [Link] {
render() {
let x = 4;
return (
<h1>{x % 2 == 0 ? `${x} is Even` : `${x} is odd`}</h1>
)
}
}
export default Conditional;
Program-15 : if else
*******************
import React from 'react';
class Conditional extends [Link] {
render() {
let x = prompt("enter a number")
if(x%2==0){
return ( <h2>{x} is even</h2> )
}
else{
return ( <h2>{x} is odd</h2> )
}
}
}
export default Conditional;

Program-16 Logical &&

**********************
import React, { Component } from 'react'
export default class Conditional extends Component {
render() {
<div>
<h1>Hello!</h1>
{[Link] > 0 &&
<h2>
You have {[Link]} unread messages.
</h2>
}
</div>
}
}

program-17 switch case

**********************
import React from "react";

export default function ConditionalDemo2() {

program-18 List of items

************************
import React from 'react';
class List extends [Link] {
render() {
let cars = ['tata', 'honda', 'maruti', 'hundai', 'toyota']
return (
[Link]((car, ind) => {
return <li>{ind} - {car}</li>
})
)
}
}
export default List;
(OR)
import React from 'react';
class List extends [Link] {
render() {
let cars = ['tata', 'honda', 'maruti', 'hundai', 'toyota'];
let carList = [Link](car => <h2>{car}</h2>)
return <div>{carList}</div>
}
}
export default List;

Program:19 Countries DropDown & Datalist

**************************************
export default function ListDemo2() {
const countries = ["Afghanistan","Albania","Algeria"]
return <>
<h2>Countries Dropdown</h2>
Dropdown:
<select>
{[Link]((country,ind)=>{
return <option key={ind}>{country}</option>
})}
</select>
<hr/>
datalist:
<input list="countries" name="country" id="country" />
<datalist id="countries">
{[Link]((country,ind)=>{
return <option key={ind} value={country} />
})}
</datalist>
</>
}
program-20 List of Objects
**************************
import React from 'react';
export default function EmployeeList {
let employees = [
{ eId: 101, name: "sanjay", sal: 5000 },
{ eId: 104, name: "deepak", sal: 8000 },
{ eId: 103, name: "ranjan", sal: 7000 },
{ eId: 102, name: "manoj", sal: 9000 }
]
return
<table border='1' align='center' width='50%'>
{[Link](emp => (
<tr key={[Link]}>
<td>{[Link]}</td>
<td>{[Link]}</td>
<td>{[Link]}</td>
</tr>
))}
</table>
}

-------------------(OR)--------------------------------------
import React, { Component } from 'react';
export default class Demo extends Component {
render() {
let employees = [
{ eId: 101, name: "sanjay", sal: 5000 },
{ eId: 104, name: "deepak", sal: 8000 },
{ eId: 103, name: "ranjan", sal: 7000 },
{ eId: 102, name: "manoj", sal: 9000 }
]
const empRows = [];
for (let emp of employees) {
const row = (
<tr key={[Link]}>
<td>{[Link]}</td>
<td>{[Link]}</td>
<td>{[Link]}</td>
</tr>
);
[Link](row);
}
return (
<table className='table table-bordered table-striped'>
<thead>
<tr>
<th>Emp Id</th>
<th>Name</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
{empRows}
</tbody>
</table>
);
}
}

Program-21 Iterate objects

**************************
import React, { Component } from 'react'

export default class Demo1 extends Component {

render() {
let employees = [
{ eId: 101, name: "sanjay", sal: 5000 },
{ eId: 104, name: "deepak", sal: 8000 },
{ eId: 103, name: "ranjan", sal: 7000 },
{ eId: 102, name: "manoj", sal: 9000 }
]
return <div className="container">
<h2 className='text-center'>Employees Table</h2>
<table className="table table-bordered">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>salary</th>
</tr>
</thead>
<tbody>
{
[Link]((emp, ind) => (
<tr key={ind}>
{[Link](emp).map((val, ind) => (
<td key={ind}>{val}</td>
))}
</tr>
))
}
</tbody>
</table>
</div>
}
}

Program-22 productList & Product

********************************
import React, { Component } from 'react'
import Product from './product'
export default class Productlist extends Component {
productList = [
{ pId: 101, name: "iphone", price: 5000 },
{ pId: 102, name: "samsung", price: 4000 },
{ pId: 103, name: "oppo", price: 3000 },
];
render() {
return (
<div>
<h1>This is Product-List Component</h1>
{[Link](item => (
<Product product={item} />
))}
</div>
)
}
}
--------------------------------------
import React, { Component } from 'react';
import './[Link]';
export default class Product extends Component {
render() {
return (
<div class='product'>
{[Link]} <br />
{[Link]} <br />
{[Link]} <br />
<button class='btn btn-success'>Buy Now</button>
</div>
)
}
}

program-23 problem with Local Variables declared inside render()

*********************************************************
import React, { Component } from 'react'
export default class Test extends Component {
render() {
let count = 0;
function increment() {
count = count + 1;
alert(count);
};
return (
<div>
<p>The count is: {count}</p>
<button onClick={() => increment()}>Add one</button>
</div>
);
}
}
// render() method gets invoked only if there is a change in props/state

program-24 Force Update

************************
import React, { Component } from 'react'
export default class Conditional extends Component {
count = 0;
increment = () => {
[Link] = [Link] + 1;
[Link]();
};
render() {
return (
<div>
<p>The count is: {[Link]}</p>
<button onClick={[Link]}>Add one</button>
</div>
);
}
}

program-25: Props
******************
import React from 'react';
import Child from '../child/child';
class Parent extends [Link] {
render() {
let user = { name: 'sachin', age: 35 }
return (
<div>
This is Parent Component
<Child name={[Link]} age={[Link]} />
</div>
);
}
}
export default Parent;
-------------------
import React from 'react';
class Child extends [Link] {
render() {
return (
<div>
<h2>This is child component</h2>
<h2>{[Link]}--{[Link]}</h2>
</div>
);
}
}
export default Child;

Program-26 Props De-structuring

******************************
import React, { Component } from 'react'

export default class Product extends Component {

render() {
let { pId, name, price } = [Link];
return (
<div style={{ border: '2px solid red' }}>
{pId} <br />
{name} <br />
{price} <br />
<button class='btn btn-success'>Buy Now</button>
<h2>the text from my parent comp is {[Link]}</h2>
</div>
)
}
}

Program-27 propTypes
*******************
import React from 'react';
import { PropTypes } from 'prop-types';
class Student extends [Link] {

render() {
return (
<div>
<p>Student Name: {[Link]}</p>
<p>Age: {[Link]}</p>
</div>
);
}
}
[Link] = {
name: [Link],
age: [Link]
};
export default Student;

Program-28 Requiring Single Child

*******************************
import React from 'react';
import { PropTypes } from 'prop-types';
class Container extends [Link] {
render() {
return (
<div>
{[Link]}
</div>
);
}
}
[Link] = {
children: [Link]
};
export default Container;
---------------------------------
import React from 'react';
import Container from './Container';
import Student from './Student';
class App extends [Link] {
render() {
return (
<div>
<Container>
<Student name="Mark" age="24" />
<Student name="Peter" age="25" />
</Container>
</div>
);
}
}
export default App;

Program-29: [Link]
**************************
import React from 'react';
import Greet from '../greet/greet';
class Content extends [Link] {
render() {
return (
<div>
<Greet>
<p>I am child-1</p>
<p>I am child-2</p>
</Greet>
<Greet>
<p>I am child-1</p>
<p>I am child-2</p>
</Greet>
</div>
);
}
}
export default Content;
-----------------------------
import React from 'react';
class Greet extends [Link] {
render() {
return (
<h2>
This is Greet Component
{[Link]}
</h2>

);
}
}
export default Greet;

Program-30: Methods as props

****************************
import React, { Component } from 'react';
import Child from '../child/child';

export default class Parent extends Component {

constructor(props) {
super(props);
[Link] = {
parentName: 'Parentttt'
};
[Link] = [Link](this);
[Link] = [Link](this);
}
greetParent() {
alert(`Hello ${[Link]}`)
}
greetParentWithParam(data) {
alert(`Hello parent with parameter from ${data}`)
}
render() {
return (
<div>
<Child greetHandler={[Link]}
greetHandler2={[Link]}/>
</div>
)
}
}
-----------------------
import React from 'react';
class Child extends [Link] {
render() {
return (
<div>
<div>I am child component</div>
<button onClick={[Link]}>Invoke parent
Method</button>
<button onClick={() =>
[Link].greetHandler2('childparameter')}>Invoke parent Method</button>
</div>
);
}}
export default Child;

Program-31: States
******************
class Counter extends [Link] {
constructor(props) {
super(props);
[Link] = {count: 0 };
}
increment = () => {
[Link]({count: [Link] + 1});
}
render() {
return (
<div>
<div>count:{[Link]}</div>
<button onClick={[Link]}>click!</button>
</div>
);
}
};

Program-32 asynchronous state

*******************************
import React, { Component } from "react";
export default class Counter extends Component {
constructor(props) {
super(props);
[Link] = {
count: 0,
};
}
incrementCountFiveTimes() {
[Link]();
[Link]();
[Link]();
[Link]();
[Link]();
}
increment() {
[Link]({ count: [Link] + 1 });
[Link]([Link]);
}
render() {
return (
<h2>
counter works
<div>Count - {[Link]}</div>
<button className="btn btn-primary m-2" onClick={[Link]}>
Increment
</button>
<button className="btn btn-primary m-2"
onClick={[Link]}>
Increment
</button>
</h2>
);
}
}

Program-33 setState() in Detail-2

*********************************
//React may group multiple setState calls in to a single update for better
performance
//when we want to update the state based on the previous State,
//we need to pass a function as an arguement to setState() instead passing an
object

import React from 'react';

class Counter extends [Link] {
constructor(props) {
super(props);
[Link] = {
count: 0
}
}
increment() {
[Link]((prevState) => ({
count: [Link] + 1
}))
}
incrementFive() {
[Link]();
[Link]();
[Link]();
[Link]();
[Link]();
}
render() {
return (
<h2>
counter works
<div>Count - {[Link]}</div>
<button onClick={() => [Link]()}>Increment</button>
</h2>
);
}
}
export default Counter;

Program -34 Batch update

***********************
import React, { useState } from "react";

export default function Demo1() {

const [count, setCount] = useState(0);
const increment = () => {
setCount((prevState) => prevState + 1);
// setCount(count + 1);
};
const increment5 = () => {
increment();
increment();
increment();
increment();
increment();
};
return (
<div>
<div>{count}</div>
<button onClick={increment5}>Increment By 5</button>
</div>
);
}

Program-35 Show/Hide
*********************
import React from 'react';
class MyClass extends [Link] {
constructor(props) {
super(props);
[Link] = { flag: true };
}
toggleFlag = () => {
[Link]({ flag: ![Link] });
}
render() {
return (
<div>
{[Link] ? <div>Hellllllo</div> : null}
<button onClick={[Link]}>
{[Link] ? 'HIDE' : 'SHOW'}
</button>
</div>
);
}
}
export default MyClass;
--------------------------------------
import React, { useState } from 'react';
export default function Demo() {
const [flag, toggleFlag] = useState(true);
const toggle = function () {
toggleFlag(!flag)
}
return (
<div>
{flag ? <div>Hellllllo</div> : null}
<button onClick={toggle}>
{flag ? 'HIDE' : 'SHOW'}
</button>
</div>
)
}

Program-36 Show/Hide Password

*****************************
import React, { Component } from 'react';
export default class Test extends Component {
constructor(props) {
super(props)
[Link] = {
flag: true,
}
}
togglePassword = () => {
[Link]({
flag: ![Link]
})
}
render() {

return (
<div>
<input type={[Link] ? 'password' : 'text'} />
<button onClick={[Link]}>{[Link] ? 'Show
password' : 'Hide password'}</button>
</div>
)
}
}
------------------------------------------------
import React, { useState } from "react";

export default function Demo() {

const [flag, toggleFlag] = useState(true);
const toggle = function () {
toggleFlag(!flag);
};
return (
<div>
<input type={flag ? "password" : "text"} />
<button onClick={toggle}>
{flag ? "Show password" : "Hide password"}
</button>
</div>
);
}

Program:37 Remaining Character

******************************
export default function RemainingChar() {
const [remaining, setRemaining] = useState(100);
const keyUpHandler = (e) => {
const msg = [Link];
setRemaining([Link])
};
return (
<>
<textarea onKeyUp={keyUpHandler} maxLength={100} className="m-1"></textarea>
<p>remaining char: {remaining}</p>
</>
);
}
Program:38 Selected value from dropdown
***************************************
import React, { useState } from 'react'
export default function StateDropDown() {
const stateNames = ['Karnataka', 'Odisha', 'Tamilnadu', 'Kerala', 'Bihar',
'UP'];
const [selectedState, setSelectedState] = useState(stateNames[0]);
const stateChanged = (e) => {
setSelectedState([Link])
}
return <>
<select onChange={stateChanged}>
{[Link]((state, ind) => {
return <option key={ind}>{state}</option>
})}
</select>
<h2>You have Selected - {selectedState}</h2>
</>
}

Program:39 Dark/Light Mode

**************************
import React, { useEffect, useState } from 'react';
import './[Link]';
export default function ThemeDemo() {
const [isDark, setIsDark] = useState(false);
const changeMode = () => {
setIsDark(!isDark)
}
useEffect(() => {
if (isDark) {
[Link]('dark');
} else {
[Link]('dark');
}
}, [isDark])

return <>
<h2>Toggle Dark/Light Mode</h2>
<div>This page is in <b>{isDark ? 'Dark' : 'Light'}</b> Mode</div>
<button onClick={changeMode}>Go To {!isDark ? 'Dark' : 'Light'}
Mode</button>
</>
}
======
.dark{
background-color:black;
color:white
}

Program-39 Addition
*******************
import React from 'react';

<h2>Addition is {[Link]}</h2>
<button onClick={[Link]}>Addddddd</button>
</div>
);
}
}
export default Addition;
----------------------------------------------------
import React, { useState } from 'react'
export default function Demo() {
const [num1, setnum1] = useState(0);
const [num2, setnum2] = useState(0);
const [total, settotal] = useState(0);

return (
<div>
<div>
<input type="number" onKeyUp={(e) => {
setnum1(+[Link]);
}} />
<input type="number" onKeyUp={(e) => {
setnum2(+[Link]);
}} />

Addition is: {total}

<button onClick={(e) => {

settotal(num1 + num2);
}}>Get Totaaal</button>
</div>
</div>
);
}
Program-40 : Folder Explorer
****************************
import React, { useState } from "react";
export default function Folder({ folderInfo }) {
const [expand, setExpand] = useState(false);

if ([Link]) { // if folder
return <div>
<span onClick={() => setExpand(!expand)} style={{ cursor: 'pointer' }}>
📁
{[Link]}
<br />
</span>
<div
style={{ display: expand ? "block" : "none", paddingLeft: "20px" }}
>
{[Link]((subfolderInfo, ind) => (
<Folder folderInfo={subfolderInfo} key={ind} />
))}
</div>
</div>
} else { // if file
return <span>
🏢
{[Link]} <br />
</span>

}
}

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

import './[Link]';

const config = {
red: { backgroundColor: 'red', duration: 4000, next: 'green' },
yellow: { backgroundColor: 'yellow', duration: 1000, next: 'red' },
green: { backgroundColor: 'green', duration: 3000, next: 'yellow' }
};
export default function TrafficLight() {
const [currentColor, setCurrentColor] = useState('green');

useEffect(() => {
const { duration, next } = config[currentColor];
const timerId = setTimeout(() => {
setCurrentColor(next);
}, duration);
return () => {
clearTimeout(timerId);
};
}, [currentColor]);

return <div className="wrapper">

<div className='traffic-light-container traffic-light-container--vertical'>
{[Link](config).map((color) => (
<div key={color} className="traffic-light"
style={{
backgroundColor: color === currentColor
? config[color].backgroundColor
: ''
}}
/>
))}
</div>
</div>
}
-------------------------
.wrapper {
align-items: center;
display: flex;
flex-direction: column;
gap: 16px;
justify-content: center;
}
.traffic-light-container {
background-color: #000;
border-radius: 8px;
display: flex;
padding: 8px;
gap: 8px;
}
.traffic-light-container--vertical {
flex-direction: column;
}
.traffic-light {
--size: 50px;
background-color: #555;
border-radius: var(--size);
height: var(--size);
width: var(--size);
}

Program: 41 Search
******************
import React, { useState } from "react";
import SearchBar from "react-js-search";

export default function EmployeeList() {

const onSearchClick = (searchText) => {

setFilteredEmployees(
[Link]((emp) => [Link](emp).includes(searchText))
);
};
const onSearchTextChange = (searchText, filteredData) => {
setFilteredEmployees(filteredData);
};
const sortAsc = () => {
const sortedData = [Link]((e1, e2) =>
[Link]([Link]))
setFilteredEmployees([...sortedData]);
};
const sortDesc = () => {
const sortedData = [Link]((e1, e2) =>
[Link]([Link]))
setFilteredEmployees([...sortedData]);
};

return (
<>
<SearchBar
// onSearchTextChange={onSearchTextChange}
onSearchButtonClick={onSearchClick}
placeHolderText={"Search here..."}
data={employees}
/>
<button onClick={sortAsc}>Asc</button>
<button onClick={sortDesc} className='ms-1'>Desc</button>
<hr />
{
<table className="table table-bordered">
<tbody>
{[Link]((emp, ind) => (
<tr key={ind}>
<td>{[Link]}</td>
<td>{[Link]}</td>
<td>{[Link]}</td>
</tr>
))}
</tbody>
</table>
}
</>
);
}

Program-42 Pagination
************************
import React, { useState } from "react";
import productsArr from "./[Link]";
import ReactPaginate from "react-paginate";
import "./[Link]";
export default function ProductsPagination() {
const [itemOffset, setItemOffset] = useState(0);
const itemsPerPage = 4;

const endOffset = itemOffset + itemsPerPage;

[Link](`Loading items from ${itemOffset} to ${endOffset}`);
const filteredProducts = [Link](itemOffset, endOffset);
const pageCount = [Link]([Link] / itemsPerPage);

const handlePageClick = (event) => {

const newOffset = ([Link] * itemsPerPage) % [Link];
[Link](
`User requested page number ${[Link]}, which is offset ${newOffset}`
);
setItemOffset(newOffset);
};

return (
<>
<h1 className="text-center">Products With Pagination</h1>

<div className="container">
<div className="row">
{[Link]((product) => (
<div className="col-sm-3" key={[Link]}>
<div className="card text-center">
<img
src={[Link]}
className="card-img-top"
alt="..."
style={{ height: "200px" }}
/>
<div className="card-body">
<h5 className="card-title">{[Link]}</h5>
<p className="card-text">{[Link]}</p>
<p
className="card-text"
style={{ height: "200px", overflow: "scroll" }}
>
{[Link]}
</p>
<p className="card-text"> {[Link]}</p>
<a href="#" className="btn btn-primary">
BUY NOW
</a>
</div>
</div>
</div>
))}
</div>
</div>

<ReactPaginate
breakLabel="..."
nextLabel="next >"
onPageChange={handlePageClick}
pageRangeDisplayed={5}
pageCount={pageCount}
previousLabel="< previous"
renderOnZeroPageCount={null}
containerClassName="pagination"
pageLinkClassName="page-num"
previousLinkClassName="page-num"
nextLinkClassName="page-num"
activeLinkClassName="active"
/>
</>
);
}

[Link]
=======================
.pagination {
list-style: none;
display: flex;
justify-content: center;
align-items: center;
margin: 10px;
font-size: 16px;
gap: 5px;
}
.pagination .page-num {
padding: 10px 15px;
cursor: pointer;
border-radius: 5px;
font-weight: bold;
text-decoration: none;
}
.pagination .page-num:hover {
background-color: aqua;
color: white;
}
.pagination .active {
background-color: aqua;
}

Program- 43 ToDo CRUD

**********************
export default function ToDoCRUD() {
let initialtodos = [
{ id: 1, text: 'To Do 1', completed: true },
{ id: 2, text: 'To Do 2', completed: false },
{ id: 3, text: 'To Do 3', completed: true }
]
let [todoArr, setToDoArr] = useState(initialtodos);

let deleteToDo = (id) => {

Program-44 Event with parameter

***********************************
import React, { Component } from 'react';
export default class EventDemo1 extends Component {
f1 = () => {
[Link]('I am F1...')
}
add = (a, b) => {
[Link](`Addition of ${a} & ${b} is ${a + b}`)
}
render() {
return <>
<button onClick={this.f1} className='btn btn-primary'>btn-1</button>
<button onClick={() => { [Link](2, 3) }} className='btn btn-secondary
m-1'>Add</button>
</>
}
}

Assignment
==========
-add 2 input boxes (num1,num2)
-add a button, onClick of button find the addition Result
Program-45 Modal
******************
1. npm i react-modal
2. add the below code

import React, { useState } from 'react';

import Modal from 'react-modal';
export default function Test() {
const [modalIsOpen, setIsOpen] = [Link](false);

function openModal() {
setIsOpen(true);
}
function closeModal() {
setIsOpen(false);
}
return (
<div>
<button onClick={openModal}>Open Modal</button>
<Modal
isOpen={modalIsOpen}
onRequestClose={closeModal}
contentLabel="Example Modal"
shouldCloseOnOverlayClick={false}
>

<button onClick={closeModal}>close</button>
<div>I am a modal</div>
<div>this is a div</div>
<input />
</Modal>
</div>
)
}

Program-46 Employee CRUD

*************************
import React from 'react';

render() {
return (
<div>
<table border='1' align='center' width='50%'>
<tr>
<th>Sl No.</th>
<th>Emp Id</th>
<th>Name</th>
<th>Salary</th>
<th>Action</th>
</tr>
{[Link]((emp, ind) => (
<tr key={[Link]}>
<td>{ind}</td>
<td>{[Link]}</td>
<td>{[Link]}</td>
<td>{[Link]}</td>
<td>
<button onClick={() =>
[Link](ind)}>Delete</button>
<button onClick={() =>
[Link](emp)}>View</button>
</td>
</tr>
))}
</table>

Emp Id:
<input onKeyUp={[Link]}></input> <br></br><br></br>
Name:
<input onKeyUp={[Link]}></input> <br></br><br></br>
Salary:
<input onKeyUp={[Link]}></input> <br></br><br></br>

<button onClick={[Link]}>Add a new employee</button>

</div>
);
}
}
export default Crud;

Program-47 CRUD (functional component)

************************************
import React, { useState } from 'react'
import EmployeeList from './EmployeeList'
import AddEmployee from './AddEmployee'
import EditEmployee from './EditEmployee';

export default function EmployeeCrud() {

const deleteEmployee = (idToDelete) => {

return <>
<h2 className='text-center'>This is EmployeeCRUD Component</h2>
<div className='container'>
<div className='row'>
<div className='col-sm-8'>
<h3>Employee List</h3>
<EmployeeList
employees={employees}
deleteEmployee={deleteEmployee}
editEmployee={editEmployee}
/>
</div>
<div className='col-sm-4'>
{
isEdit ?
<EditEmployee
selectedEmployee={selectedEmployee}
saveEditedEmployee={saveEditedEmployee}
cancelSave={cancelSave}
/>
:
<AddEmployee addEmployee={addEmployee} />
}
</div>
</div>
</div>
</>
}

------------------------------------------------
import React from 'react'
import { useState } from 'react';

export default function EditEmployee({ selectedEmployee, saveEditedEmployee,

cancelSave }) {
const [emp, setEmp] = useState(selectedEmployee);
const changeHandler = (e) => {
const { name, value } = [Link];
setEmp({ ...emp, [name]: value })
}
return <>
<h3>Edit Employee</h3>
<p>eId : <input value={[Link]} name='eId' onChange={(e) =>
changeHandler(e)} /></p>
<p>Name : <input value={[Link]} name='name' onChange={(e) =>
changeHandler(e)} /></p>
<p>Salary : <input value={[Link]} name='sal' onChange={(e) =>
changeHandler(e)} /></p>
<div className='text-center'>
<button onClick={cancelSave} className='btn btn-secondary mx-
1'>Cancel</button>
<button onClick={() => saveEditedEmployee(emp)} className='btn btn-
primary'>Save</button>
</div>
</>
}

------------------------------------------------
import React, { useState } from 'react'

export default function AddEmployee({ addEmployee }) {

Program-48 Pure Component

**************************
import React, { Component } from 'react'
import { PureComponent } from 'react';
export default class Demo1 extends PureComponent {
state = {
name: 'sachin'
}
render() {
[Link]('Demo1 render called....');
setInterval(() => {
[Link]({name:'sachin1'})
}, 5000)
return (
<div>
This is Demo1 Component {[Link]}
</div>
)
}
}

Program:49 react memo

*********************
import React, { useState } from "react";
import Demo2 from "../demo2/Demo2";

export default function Demo() {

const [counter, setCounter] = useState(0);
const [cars, setCars] = useState(["tata", "honda", "maruti"]);
return (

function Demo2(props) {
[Link]("demo-2 render called");
return (
<div>
Demo2
{[Link]((car) => {
return <li>{car}</li>;
})}
</div>
);
}
export default [Link](Demo2);

Program-50 constructor & getDerivedStateFromProps

**************************************************
class Header extends [Link] {
constructor(props) {
super(props);
[Link] = {favoritecolor: "red"};
}
static getDerivedStateFromProps(props, state) {
return {favoritecolor: [Link] };
}
render() {
return (
<h1>My Favorite Color is {[Link]}</h1>
);
}
}

program-51 componentDidMount
******************************
class Header extends [Link] {
constructor(props) {
super(props);
[Link] = {favoritecolor: "red"};
}
componentDidMount() {
setTimeout(() => {
[Link]({favoritecolor: "yellow"})
}, 1000)
}
render() {
return (
<h1>My Favorite Color is {[Link]}</h1>
);
}
}

Program-52 shouldComponentUpdate
**********************************
class Header extends [Link] {
constructor(props) {
super(props);
[Link] = {favoritecolor: "red"};
}
shouldComponentUpdate() {
return false;
}
changeColor = () => {
[Link]({favoritecolor: "blue"});
}
render() {
return (
<div>
<h1>My Favorite Color is {[Link]}</h1>
<button type="button" onClick={[Link]}>Change color</button>
</div>
);
}
}

Program-53 getSnapshotBeforeUpdate
************************************
class Header extends [Link] {
constructor(props) {
super(props);
[Link] = {favoritecolor: "red"};
}
componentDidMount() {
setTimeout(() => {
[Link]({favoritecolor: "yellow"})
}, 1000)
}
getSnapshotBeforeUpdate(prevProps, prevState) {
[Link]("div1").innerHTML =
"Before the update, the favorite was " + [Link];
}
componentDidUpdate() {
[Link]("div2").innerHTML =
"The updated favorite is " + [Link];
}
render() {
return (
<div>
<h1>My Favorite Color is {[Link]}</h1>
<div id="div1"></div>
<div id="div2"></div>
</div>
);
}
}

program-54 componentDidUpdate
*********************************
class Header extends [Link] {
constructor(props) {
super(props);
[Link] = {favoritecolor: "red"};
}
componentDidMount() {
setTimeout(() => {
[Link]({favoritecolor: "yellow"})
}, 1000)
}
componentDidUpdate() {
[Link]("mydiv").innerHTML =
"The updated favorite is " + [Link];
}
render() {
return (
<div>
<h1>My Favorite Color is {[Link]}</h1>
<div id="mydiv"></div>
</div>
);
}
}

program-60 (componentWillUnmount)
*********************************
class Container extends [Link] {
constructor(props) {
super(props);
[Link] = {show: true};
}
delHeader = () => {
[Link]({show: false});
}
render() {
let myheader;
if ([Link]) {
myheader = <Child />;
};
return (
<div>
{myheader}
<button type="button" onClick={[Link]}>Delete Header</button>
</div>
);
}
}

useEffect(() => {
[Link]("use effect called");
}, [a,b]);
return (
<>
<div>Demo</div>
<div>
{a} {b} {c}
</div>
<button onClick={() => setA(15)}>
update A
</button>
<button onClick={() => setB(25)}>
update B
</button>
<button onClick={() => setC(35)}>
update C
</button>
</>
);
}

program: 62 componentWillUnmount in functional component

*****************************************************
import React, { useEffect, useState } from "react";

export default function Demo3() {

const [color, setColor] = useState("red");
useEffect(() => {
[Link]("use effect called while mounting/updating");
return () => {
[Link]("use effect called while unmounting");
};
}, []);
return (
<div>
<p id="para1">This is a paragraph</p>
<button
onClick={() => {
setColor("red");
}}
>
click me
</button>
<h2>color value is {color}</h2>
</div>
);
}

Program:63 How to get prev state and props

******************************************
import { useEffect, useRef, useState } from "react";
export default function Counter() {
const [count, setCount] = useState(0);
const myRef = useRef();
useEffect(() => {
[Link] = count;
});
return (
<h1>
Now: {count}, before: {[Link]}
<button onClick={()=>{setCount(count+1)}}>Increment</button>
</h1>
);
}

program-64 Addition using refs

*****************************
import React, { Component } from 'react';
import PropTypes from 'prop-types';

export default class Test extends Component {

constructor(props) {
super(props)
this.myRef1 = [Link]();
this.myRef2 = [Link]();
}
add = () => {
let value_1 = parseInt([Link]);
let value_2 = parseInt([Link]);
alert(value_1 + value_2);
}
render() {
return (
<>
<input name="textbox1" ref={this.myRef1} type="text" />
<input name="textbox2" ref={this.myRef2} type="text" />
<button onClick={[Link]}>Add</button>
</>
)
}

}
--------------------------------------------------
import React, { useRef } from "react";
export default function Addition() {
const inputRef1 = useRef();
const inputRef2 = useRef();

const add = () => {

const val1 = +[Link];
const val2 = +[Link];
alert(val1 + val2);
};

return (
<div>
num1: <input ref={inputRef1} />
num2: <input ref={inputRef2} />
<button onClick={add}>Add</button>
</div>
);
}

program-65 call back refs

*************************
import React, { Component } from 'react'
export default class Test extends Component {
add = () => {
let val1 = parseInt([Link])
let val2 = parseInt([Link])
alert(val1 + val2)
}
render() {
return (
<div>
<input type="text" ref={(input) => { this.input1 = input }} />
<input type="text" ref={(input) => { this.input2 = input }} />
<button type="button" onClick={[Link]}>Add</button>
</div>
)
}
}
----------------------------------------------------------------
export default function Addition() {
let inputRef1;
let inputRef2;

const add = () => {

const val1 = +[Link];
const val2 = +[Link];
alert(val1 + val2);
};

return (
<div>
num1: <input ref={input => { inputRef1 = input; }} />
num2: <input ref={input => { inputRef2 = input; }} />
<button onClick={add}>Add</button>
</div>
);
}
program- 66 Ref Forwarding
***************************
import React, { Component } from 'react'
import FancyButton from '../FancyButton/FancyButton'

export default class Test extends Component {

constructor(props) {
super(props)
[Link] = [Link]();
}
fun1 = () => {
[Link]([Link])
[Link]([Link])
}
render() {
return (
<div>
<FancyButton ref={[Link]} >
<div>button text</div>
</FancyButton>

<button onClick={this.fun1}>click me</button>

</div>
)
}
}
-------------------------------------
import React from 'react';
const FancyButton = [Link]((props, ref) => (
<button ref={ref} className="FancyButton" id='btn1'>
{[Link]}
</button>
));
export default FancyButton;

Program : display previous State & Current State

************************************************
export default function CounterDemo3() {
let [counter, updateCounter] = useState(0);
let prevValue = useRef(0);

let increment = () => {

updateCounter(counter + 1);
}
useEffect(() => {
[Link] = counter;
}, [counter]);
return <>
<p>Current value - {counter} , previous Value is-{[Link]}</p>
<button onClick={increment}>Increment</button>
</>
}
Program : Search Filter with Deferred Value (useState, useDeferredValue, useMemo)
============================================
// [Link]
import { useState, useDeferredValue, useMemo } from "react";
const ITEMS = [Link]({ length: 10000 }, (_, i) => `Item ${i + 1}`);

export default function SearchFilter() {

const [query, setQuery] = useState("");
const deferredQuery = useDeferredValue(query);

const filtered = useMemo(() => {

return [Link](i =>
[Link]().includes([Link]())
);
}, [deferredQuery]);

return (
<div style={{ padding: 20 }}>
<h2>Search Filter</h2>
<input
value={query}
onChange={e => setQuery([Link])}
placeholder="Type to search"
/>
<p>Showing {[Link]} results</p>
<ul>
{[Link](0, 20).map(i => (
<li key={i}>{i}</li>
))}
</ul>
</div>
);
}

program-67 Form Submit

**********************
import React, { useState } from "react";

export default function Demo() {

const [fname, setFname] = useState("sachin");
const [lname, setLname] = useState("tendulkar");

const submitHandler = (e) => {

[Link]();
alert(fname+' '+lname);
};

return (
<>
<form onSubmit={submitHandler}>
First Name:
<input name="fname" value={fname} onChange={(e) =>
setFname([Link])} />
Last Name:
<input name="lname" value={lname} onChange={(e) =>
setLname([Link])} />
<br />
<br />
<button>submit</button>
</form>
</>
);
}

Program-68 UnControlled Form Elements

*************************************
import React, { useState } from 'react'
import { useRef } from 'react';

export default function FormDemo2() {

Program-70 Multiple input fields

********************************
import React from 'react';

Program-71 form data in an object

*********************************
import React, { useState } from "react";

export default function Form1() {

const [user, setUser] = useState({ fname: "sachin", lname: "tendulkar" });

const submitHandler = (e) => {

[Link]();
[Link](user);
};

return (
<>
<form onSubmit={submitHandler}>
First Name:
<input
name="fname"
value={[Link]}
onChange={(e) => setUser({ ...user, fname: [Link] })}
/>
Last Name:
<input
name="lname"
value={[Link]}
onChange={(e) => setUser({ ...user, lname: [Link] })}
/>
<br />
<br />
state data: {[Link] + " " + [Link]}
<button>submit</button>
</form>
</>
);
}

program-72 Form Validation while typing

*****************************************
import React, { useState } from "react";

export default function Demo() {

const [fname, setFname] = useState("sachin");
const [lname, setLname] = useState("tendulkar");
const [fNameErrorMsg, setfNameErrorMsg] = useState("");
const [lNameErrorMsg, setlNameErrorMsg] = useState("");

const submitHandler = (e) => {

[Link]();
alert(fname + " " + lname);
};

const changeHandler = (e) => {

return (
<>
<form onSubmit={submitHandler}>
First Name:
<input name="fname" value={fname} onChange={changeHandler} />
<span class="text-danger">{fNameErrorMsg}</span> <br/>
Last Name:
<input name="lname" value={lname} onChange={changeHandler} />
<span class="text-danger">{lNameErrorMsg}</span>
<br /><br />
<button>submit</button>
</form>
</>
);
}

Controlled Form Example

*****************************
import React, { useState } from 'react'
export default function FormDemo2() {
const defaultFormValues = {
name: '',
age: '',
gender: '',
dob: '',
interests: [],
country: '',
bio: ''
}
const [formData, setFormData] = useState(defaultFormValues);
const handleSubmit = (event) => {
[Link]();
[Link](formData);
}
const handleReset = () => {
setFormData(defaultFormValues);
}
const isFormValid = [Link] !== '' && [Link] !== '';
const handleChange = (event) => {
const { name, value, type, checked } = [Link];

if (type === 'checkbox') {

if (checked) {
setFormData({ ...formData, interests: [...[Link],
value] });
} else {
setFormData({
...formData,
interests: [...[Link](interest => interest !
== value)]
});
}
} else {
setFormData({ ...formData, [name]: value });
}
}
return <>
<h3 className='text-center'>React Controlled Form</h3>
<div className='container'>
<div className='row'>
<div className='col-sm-6 offset-sm-3'>
<div className='border border-3 rounded-3 p-2 m-2'>
<form onSubmit={handleSubmit}>
<p>
<label>Name:</label>
<input name='name' value={[Link]}
onChange={handleChange} required></input>
</p>
<p>
<label>Age:</label>
<input name='age' value={[Link]}
onChange={handleChange}></input>
</p>
<p>
<label>Gender:</label>
<input name='gender' type='radio'
value='male' checked={[Link] ===
'male'}
onChange={handleChange} /> Male
<input name='gender' type='radio'
value='female' checked={[Link] ===
'female'}
onChange={handleChange} /> female
</p>
<p>
<label>DOB:</label>
<input name='dob' type='date'
value={[Link]} onChange={handleChange} />
</p>
<p>
<label>Interests:</label>
<input name='interests' type='checkbox'
value='reading'
checked={[Link]('reading')}
onChange={handleChange} />Reading

<input name='interests' type='checkbox'

value='swimimg'
checked={[Link]('swimimg')}
onChange={handleChange} />Swimimg
</p>
<p>
<label>Country:</label>
<select name='country' value={[Link]}
onChange={handleChange}>
<option value=''>Select a Country</option>
<option value='india'>India</option>
<option value='usa'>USA</option>
<option value='srilanka'>Srilanka</option>
<option value='canada'>Canada</option>
<option value='mexico'>Mexico</option>
</select>
</p>
<p>
<label>Bio:</label>
<textarea rows='2' cols='30' name='bio'
value={[Link]} onChange={handleChange}>

</textarea>
</p>
<input type='reset' value='Clear' className='mx-2 btn
btn-danger'
onClick={handleReset} />
<input type='submit' value='Submit' className='btn btn-
primary' disabled={!isFormValid} />
</form>

<pre>
{[Link](formData,null,4)}
</pre>
</div>
</div>
</div>
</div>
</>
}

Formik & Yup

=============
import React, { useState } from 'react';
import { Formik, Form, Field, ErrorMessage } from "formik";
import * as Yup from "yup";

const initialFormValue = {
name: "", email: "", password: "", confirmPassword: "",
gender: "", role: "", skills: [], acceptTerms: false
}
const skillsList = ["JavaScript", "React", "[Link]", "Python"];
const validationSchema = [Link]({
name: [Link]().required("Name is required"),
email: [Link]()
.email("Invalid email address")
.required("Email is required"),
password: [Link]()
.min(6, "Password must be at least 6 characters")
.required("Password is required"),
confirmPassword: [Link]()
.oneOf([[Link]("password"), null], "Passwords must match")
.required("Confirm password is required"),
gender: [Link]().required("Gender is required"),
role: [Link]().required("Role is required"),
skills: [Link]().min(1, "Select at least one skill"),
acceptTerms: [Link]().oneOf([true], "You must accept the terms"),
});

export default function FormDemo3() {

const [formData, setFormData] = useState(null);

return <>
<h3 className='text-center'>React Form Using Formik & Yup</h3>
<div className='col-sm-6 offset-sm-3'>
<div className='border border-3 rounded-3 p-2 m-2'>
<Formik
initialValues={initialFormValue}
validationSchema={validationSchema}
onSubmit={(values, { resetForm }) => {
setFormData(values);
resetForm();
}}
>
{({ values, isSubmitting }) => (
<Form>
<div className='my-1'>
<label>Name:</label>
<Field name="name" type="text" />
<div className="text-danger"><ErrorMessage
name="name" /></div>
</div>
<div className='my-1'>
<label>Email:</label>
<Field name="email" type="email" />
<div className="text-danger"><ErrorMessage
name="email" /></div>
</div>
<div className='my-1'>
<label>Password:</label>
<Field name="password" type="password" />
<div className="text-danger"><ErrorMessage
name="password" /></div>
</div>
<div className='my-1'>
<label>Confirm Password:</label>
<Field name="confirmPassword" type="password" />
<div className="text-danger"><ErrorMessage
name="confirmPassword" /></div>
</div>
<div className='my-1'>
<label>Gender:</label>
<Field as="select" name="gender">
<option value="">Select</option>
<option value="male">Male</option>
<option value="female">Female</option>
</Field>
<div className="text-danger"><ErrorMessage
name="gender" /></div>
</div>
<div className='my-1'>
<label>Role:</label>
<label>
<Field type="radio" name="role"
value="developer" />
Developer
</label>
<label>
<Field type="radio" name="role"
value="designer" />
Designer
</label>
<div className="text-danger"><ErrorMessage
name="role" /></div>
</div>
<div className='my-1'>
<label>Skills:</label>
{[Link]((skill) => (
<label key={skill} style={{ display:
"block" }}>
<Field
type="checkbox"
name="skills"
value={skill}
/>
{skill}
</label>
))}
<div className="text-danger"><ErrorMessage
name="skills" /></div>
</div>
<div className='my-1'>
<label>
<Field type="checkbox" name="acceptTerms" />
I accept the terms and conditions
</label>
<div className="text-danger"><ErrorMessage
name="acceptTerms" /></div>
</div>
<button type="submit" disabled={isSubmitting}
style={{ marginTop: "10px" }}>
Submit
</button>
</Form>
)}
</Formik>
{formData && (
<div style={{ marginTop: "20px", background: "#f9f9f9",
padding: "15px" }}>
<h3>Submitted Data:</h3>
<pre>{[Link](formData, null, 2)}</pre>
</div>
)}
</div>
</div>
</>
}

program-73 Form Validation while submitting

*********************************************
import React from 'react';
class MyForm extends [Link] {
constructor(props) {
super(props);
[Link] = {
username: '',
age: null,
};
}
mySubmitHandler = (event) => {
[Link]();
let age = [Link];
if (!Number(age)) {
alert("Your age must be a number");
}
}
myChangeHandler = (event) => {
let nam = [Link];
let val = [Link];
[Link]({[nam]: val});
}
render() {
return (
<form onSubmit={[Link]}>
<h1>Hello {[Link]} {[Link]}</h1>
<p>Enter your name:</p>
<input
type='text'
name='username'
onChange={[Link]}
/>
<p>Enter your age:</p>
<input
type='text'
name='age'
onChange={[Link]}
/>
<br/>
<br/>
<input type='submit' />
</form>
);
}
}
export default MyForm;

Program-74 Error Message While Typing

**************************************
import React from 'react';
class MyForm extends [Link] {
constructor(props) {
super(props);
[Link] = {
username: '',
age: null,
nameErrorMsg: '',
ageErrorMsg: '',
};
}
myChangeHandler = (event) => {
let nam = [Link];
let val = [Link];
let err1= '';
let err2 = '';
if (nam === "username") {
if ([Link] < 5) {
err1 = <strong>Your name must contain 5 chars</strong>;
}
}
if (nam === "age") {
if (val !== "" && !Number(val)) {
err2 = <strong>Your age must be a number</strong>;
}
}
[Link]({ nameErrorMsg: err1 });
[Link]({ ageErrorMsg: err2 });
[Link]({ [nam]: val });
}
render() {
return (
<form>
<h1>Hello {[Link]} {[Link]}</h1>
<p>Enter your name:</p>
<input
type='text'
name='username'
onChange={[Link]}
/>
{[Link]}

<p>Enter your age:</p>

<input
type='text'
name='age'
onChange={[Link]}
/>
{[Link]}
</form>
);
}
}

export default MyForm;

Program-75 Error Message onSubmit

*********************************
import React from 'react';

let err1 = '';

let err2 = '';

if ([Link] < 5) {
err1 = <strong>Your name mustcontain 5 chars</strong>;
}
if ([Link] !== "" && !Number([Link])) {
err2 = <strong>Your age must be a number</strong>;
}
[Link]({ nameErrorMsg: err1, ageErrorMsg: err2 });
//alert("You are submitting " + [Link] + " " +
[Link]);
}
render() {
return (
<form onSubmit={[Link]}>
<h1>Hello {[Link]} {[Link]}</h1>
<p>Enter your name:</p>
<input
type='text'
name='username'
onChange={[Link]}
/>
{[Link]}

<p>Enter your age:</p>

<input
type='text'
name='age'
onChange={[Link]}
/>
{[Link]}

<input type="submit" />

</form>
);
}
}
export default MyForm;

program-76 Load a Form With Default Values

********************************************
import React from 'react';

<br></br>
<input type="submit" />
</form>
);
}
}
export default MyForm;

Program-77 DropDown
********************
class MyForm extends [Link] {
import React, { Component } from 'react'

export default class Test extends Component {

constructor(props) {
super(props);
[Link] = {
mycar: 'Volvo'
};
}
changeHandler = (event) => {
[Link]({ mycar: [Link] })
}
render() {
return (
<form>
<select value={[Link]} onChange={[Link]}>
<option value="Ford">Ford</option>
<option value="Volvo">Volvo</option>
<option value="Fiat">Fiat</option>
<option value="Maruti">Maruti</option>
<option value="Tata">Tata</option>
</select>
<div>Selected Car: {[Link]}</div>
</form>
);
}
}

Program-79 Fetch() Example

****************************
import React, { Component } from 'react'

export default class Test extends Component {

constructor(props) {
super(props)
[Link] = {
users: []
}
}

fetchUsers = () => {
const myURL = '[Link]

fetch(myURL)
.then((response) => [Link]())
.then((data) => {
[Link](data);
[Link]({ 'users': data })
});
}
componentDidMount() {
[Link]();
}
render() {
return (
<table className='table table-bordered table-striped'>
<thead>
<tr>
<th>userID</th>
<th>name</th>
<th>email</th>
</tr>
</thead>
<tbody>
{[Link]((user, ind) => {
return (<tr key={ind}>
<td>{[Link]}</td>
<td>{[Link]}</td>
<td>{[Link]}</td>
</tr>)
})}
</tbody>
</table>
)
}
}
-----------------------------------------------------
import React, { useEffect, useState } from "react";
export default function Comments() {
const [comments, setComments] = useState([]);
useEffect(() => {
fetch("[Link]
.then((response) => [Link]())
.then((result) => {
setComments(result);
});
});
return (
<>
<h1>Comment List</h1>

<table className="table table-bordered">

{[Link]((comment) => (
<tr key={[Link]}>
<td>{[Link]}</td>
<td>{[Link]}</td>
<td>{[Link]}</td>
<td>{[Link]}</td>
</tr>
))}
</table>
</>
);
}

Program-80 HTTP CRUD using Axios

***********************************
import React, { Component } from "react";
import Modal from "react-modal";
import axios from "axios";
import Swal from "sweetalert2";
import "./[Link]";

export default class Curd extends Component {

constructor(props) {
super(props);

[Link] = {
modalIsOpen: false,
isEdit: false,
users: [],
id: "",
name: "",
email: "",
address: "",
phone: "",
};
}
myChangeHandler = (event) => {
let nam = [Link];
let val = [Link];
[Link]({ [nam]: val });
};
mySubmitHandler = (event) => {
[Link]();
let output = {};
output = {
name: [Link],
email: [Link],
phone: [Link],
address: [Link],
};
if ([Link]) {
[Link](output, [Link]);
} else {
[Link](output);
}
};
fetchEmployees = () => {
const myURL = "[Link]
[Link](myURL).then((result) => {
[Link]({ users: [Link] });
});
};

addEmployee(data) {
const myURL = "[Link]
[Link](myURL, data).then((response) => {
[Link]("Employee got added", "", "success");
[Link]();
[Link]();
});
}

updateEmployees = (data, empId) => {

axios
.put(`[Link] data)
.then((response) => {
[Link]("Employee got updated", "", "success");
[Link]();
[Link]();
})
.then((data) => {
[Link](data);
})
.catch((error) => {
[Link](error);
});
};
deleteEmployee = (empId) => {
[Link](`[Link] => {
[Link]();
});
};
componentDidMount() {
[Link]();
}
openModal = () => {
[Link]({ modalIsOpen: true, isEdit: false });
};
openEditModal = (id, name, email, address, phone) => {
[Link]({
id: id,
name: name,
email: email,
address: address,
phone: phone,
isEdit: true,
modalIsOpen: true,
});
};
closeModal = () => {
[Link]({ modalIsOpen: false });
};
render() {
let nameValue;
if ([Link]) {
nameValue = [Link];
}
let emailValue;
if ([Link]) {
emailValue = [Link];
}
let addressValue;
if ([Link]) {
addressValue = [Link];
}
let phoneVlue;
if ([Link]) {
phoneVlue = [Link];
}
return (
<div>
<div className="container">
<div className="table-responsive">
<div className="table-wrapper">
<div className="table-title">
<div className="row">
<div className="col-sm-6">
<h2 style={{textAlign : 'left'}}>
Manage <b>Employees</b>
</h2>
</div>
<div className="col-sm-6">
<a
className="btn btn-success"
onClick={[Link]}
data-toggle="modal"
>
<GrAddCircle/>
<span>Add New Employee</span>
</a>
</div>
</div>
</div>
<table className="table table-striped table-hover">
<thead>
<tr>
<th>ID </th>
<th>Name</th>
<th>Email</th>
<th>Address</th>
<th>Phone</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{[Link]((user, ind) => {
return (
<tr key={[Link]}>
<td>{[Link]}</td>
<td>{[Link]}</td>
<td>{[Link]}</td>
<td>{[Link]}</td>
<td>{[Link]}</td>
<td>
<a
className="edit"
onClick={() =>
[Link](
[Link],
[Link],
[Link],
[Link],
[Link]
)
}
>
<AiFillEdit />
</a>
<a
className="delete"
href="/"
onClick={() => [Link]([Link])}
>
Delete
</a>
</td>
</tr>
);
})}
</tbody>
</table>
</div>
</div>
</div>
<Modal
isOpen={[Link]}
onRequestClose={[Link]}
ariaHideApp={false}
contentLabel="Example Modal"
>
<button onClick={[Link]}>close</button>
<form onSubmit={[Link]}>
<div className="modal-header">
<h4 className="modal-title">Add Employee</h4>
</div>
<div className="modal-body">
<div className="form-group">
<label>Name</label>
<input
type="text"
name="name"
onChange={[Link]}
className="form-control"
value={nameValue}
required
/>
</div>
<div className="form-group">
<label>Email</label>
<input
type="email"
name="email"
onChange={[Link]}
className="form-control"
value={emailValue}
required
/>
</div>
<div className="form-group">
<label>Phone</label>
<input
type="number"
name="phone"
onChange={[Link]}
className="form-control"
value={phoneVlue}
required
/>
</div>
<div className="form-group">
<label>Address</label>
<textarea
name="address"
onChange={[Link]}
className="form-control"
value={addressValue}
required
></textarea>
</div>
</div>
<div className="modal-footer">
<input
type="button"
className="btn btn-default"
onClick={[Link]}
data-dismiss="modal"
value="Cancel"
/>
<input type="submit" className="btn btn-info" value="Save" />
</div>
</form>
</Modal>
</div>
);
}
}
Program:81 CRUD example Functional component
*******************************************
import axios from "axios";
import React, { useState } from "react";
import Swal from "sweetalert2";

export default function Crud() {

const [users, setUsers] = useState([]);
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [phone, setPhone] = useState("");
const [address, setAddress] = useState("");

const fetchUsers = async function() {

};
const mySubmitHandler = function(event) {
[Link]();
addUser();
};
return (
<>
<h1 className="text-center">CRUD Example</h1>
<hr />
<button onClick={fetchUsers}>get data</button>

<div className="container">
<div className="row">
<div className="col-sm-8">
<table className="table table-bordered table-striped table-responsive">
<thead>
<tr>
<th>Name</th>
<th>email</th>
<th>phone</th>
<th>address</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{[Link] > 0 ? (
[Link]((user) => (
<tr key={[Link]}>
<td>{[Link]}</td>
<td>{[Link]}</td>
<td>{[Link]}</td>
<td>{[Link]}</td>
<td>
<button className="btn btn-danger" onClick={() =>
deleteUser([Link])}>
DELETE
</button>  
<button className="btn btn-secondary" onClick={() =>
editUser([Link])}>
EDIT
</button>
</td>
</tr>
))
) : (
<tr>
<td colSpan={5} className='text-center'>No data yet</td>
</tr>
)}
</tbody>
</table>
</div>
<div className="col-sm-4">
<form onSubmit={mySubmitHandler}>
Name: <input name="name" value={name}
onChange={e=>setName([Link])} /> <br /><br />
email: <input name="email" value={email}
onChange={e=>setEmail([Link])} /> <br /><br />
phone: <input name="phone" value={phone}
onChange={e=>setPhone([Link])} /> <br /><br />
address: <input name="address" value={address}
onChange={e=>setAddress([Link])} /><br />
<br />
<button className="btn btn-primary">Add Employee</button>
</form>
</div>
</div>
</div>
</>
);
}

program: 82 axios & async-await

******************************
import React, { Component } from 'react';
import axios from 'axios';
export default class Test extends Component {
constructor(props) {
super(props)
[Link] = {
users: []
}
}
async fetchUsers() {
try {
let response = await
[Link]('[Link]
[Link]({ users: [Link] })
}
catch (error) {
[Link](error)
}
}
componentDidMount() {
[Link]()
}
render() {
return (
<table className='table table-bordered table-striped'>
<thead>
<tr>
<th>userID</th>
<th>name</th>
<th>email</th>
</tr>
</thead>
<tbody>
{[Link]((user, ind) => {
return (<tr key={ind}>
<td>{[Link]}</td>
<td>{[Link]}</td>
<td>{[Link]}</td>
</tr>)
})}
</tbody>
</table>
)
}
}

Program-83 Request Interceptor

****************************
[Link]( req => {
[Link] = [Link] || {}
[Link] = new Date().getTime();
return req;
});

Program-84 Response Interceptor

******************************
[Link](res => {
[Link] = new Date().getTime() - [Link]
return res;
},
err => {
[Link] = new Date().getTime() -
[Link]
throw err;
});

Program:85 Request & Response Interceptor

******************************************
import axios from 'axios';
[Link]( req => {
[Link] = [Link] || {}
[Link] = new Date().getTime();
return req;
});

[Link](res => {
[Link] = new Date().getTime() - [Link]
return res;
},
err => {
[Link] = new Date().getTime() - [Link]
throw err;
});

(async () => {
try {
const headers = { Accept: 'application/json', 'Accept-Encoding': 'identity' };
const githubUserName = 'abraham';

const url = `[Link]

[Link](`Sending a GET reqeust to: ${url}`);
const { data, durationInMs } = await [Link](url, { headers });
[Link](`Github username ${githubUserName} has real name: ${data?.name} and
works at ${data?.company}`,);
[Link](`Successful response took ${durationInMs} milliseconds`);

//the below request will fail

Program: graphQL
=================
1. install apollo-client and graphQL
npm install @apollo/client graphql

2. Initialize ApolloClient ([Link])

import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
const client = new ApolloClient({
uri: '[Link]
cache: new InMemoryCache()
});

3. Connect your Apollo-client to React / Set Up ApolloProvider

4. Fetch data with useQuery

import { gql, useQuery } from '@apollo/client';

const GET_COMMENTS_QUERY = gql`

query comments {
comments {
id
name
email
}
}
`;
const { loading, error, data } = useQuery(GET_COMMENTS_QUERY);

Program- HOC For Logging

========================
import React, { useState, useEffect, useRef } from 'react';
const LoggerHOC = (InputComponent) => {
const EnhancedComponent = (props) => {
const isFirstRender = useRef(true);
useEffect(() => {
[Link](`${[Link]} Mounted`);
return () => {
[Link](`${[Link]} UnMounted`);
}
}, []);
useEffect(() => { // To Make sure this effect gets called only on update
not on mount
if ([Link]) {
[Link] = false;
} else {
[Link](`${[Link]} Updated`);
};
});
return <InputComponent {...props} />
}
return EnhancedComponent;
}
export default LoggerHOC;
program-78 without HOC
**********************
import React,{ useState } from "react";
export default function ClickCounter() {
const [count, setCount] = useState(0);

const increment = () => {

setCount(count + 1);
};
return (
<>
<h2>In Click Counter Component - count is {count}</h2>
<button onClick={increment}>Click me</button>
</>
);
}

------------------------------------------------
import React, { useState } from "react";

export default function HoverCounter() {

const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1);
};
return (
<>
<h2>In Hover Counter Component - count is {count}</h2>
<button onMouseOver={increment}>Hover me</button>
</>
);
}

Program-79 With HOC

*********************

[Link]
--------------
import React, { useState } from "react";
const UpdatedComponent = (OriginalComponent) => {
function CounterHOC() {
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1);
};
return <OriginalComponent count={count} increment={increment} />;
}
return CounterHOC;
};
export default UpdatedComponent;
[Link]
---------------
import React from "react";
import CounterHOC from "./CounterHOC";
function ClickCounterWithHOC(props) {
return (
<button onClick={[Link]}> Clicked {[Link]} Times</button>
);
}
export default CounterHOC(ClickCounterWithHOC);

[Link]
--------------
import React from "react";
import CounterHOC from "./CounterHOC";
function HoverCounterWithHOC(props) {
return (
<button onMouseOver={[Link]}> Clicked {[Link]} Times</button>
);
}
export default CounterHOC(HoverCounterWithHOC);

Program- Logging
==========================
const withLogger = (WrappedComponent) => {
const WithLogger = (props) => {
useEffect(() => {
// Log data on component mount
[Link](`Component ${[Link]} mounted.`);
return () => {
// Log data on component unmount
[Link](`Component ${[Link]} unmounted.`);
};
}, []);

useEffect(() => {
// Log data on component update
[Link](`Component ${[Link]} updated.`);
});

return <WrappedComponent {...props} />;

};

[Link] = `withLogger(${[Link] ||
[Link]})`;
return WithLogger;
};

export default withLogger;

program:86 Routing
******************
[Link]
------
import { BrowserRouter } from 'react-router-dom';
<BrowserRouter>
<App />
</BrowserRouter>

[Link]
---------
import { Route, Routes } from "react-router";
<Routes>
<Route exact path="/" element={<Home />} />
<Route exact path="/home" element={<Home />} />
<Route exact path="/aboutus" element={<Aboutus />} />
<Route exact path="/careers" element={<Careers />} />
<Route exact path="/products" element={<Products />} />
<Route path="*" element={<NotFound />} />
</Routes>

[Link]
------
<ul class="nav navbar-nav">
<li class="active">
<Link to="/products">Product</Link>
</li>
<li>
<Link to="/greet">greet</Link>
</li>
<li>
<Link to="/http">http</Link>
</li>
<li>
<Link to="/parent">parent</Link>
</li>
</ul>

Program : 87 Protected Routes

==========================
<Route exact path="/careers" element={
<ProtectedRoute>
<Careers></Careers>
</ProtectedRoute>
} />
---------------------------------------------------
import React from "react";
import { Navigate } from "react-router-dom";
export default function ProtectedRoute({ children }) {
const role = "student";
if (role === "student") {
alert('you are not allowed to go to this route')
return <Navigate to="/home" replace />;
}
return children;
}

Lazy Loading
============
const ProductList = [Link](() => import("./components/list/product_list"));

<Suspense fallback={<h1>Loading...</h1>}>
<Routes>
<Route exact path="products" element={<ProductList />} />
</Routes>
</Suspense>

program-88 useState Hook

************************
import React, { Component } from 'react';

export default class Demo1 extends Component {

constructor(props) {
super(props);
[Link] = {
count: 0
};
}
incrementCount = () => {
[Link]({ count: [Link] + 1 })
}
render() {
return (
<div>
<p>You clicked {[Link]} times</p>
<button onClick={() => [Link]()}>
Click me
</button>
</div>
);
}
}
---------------------------
import React, { useState } from 'react';
export default function Demo1() {
// Declare a new state variable, which is "count"
const [count, setCount] = useState(0); // initial value for count is '0'

return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
Program-89 useState with array data
************************************
import React, { useState } from 'react'

export default function Test() {

const [employees, setEmployees] = useState([
{ id: 101, name: 'sanjay', sal: 5000 },
{ id: 102, name: 'yash', sal: 7000 },
{ id: 103, name: 'suresh', sal: 6000 },
]);

const [id, setId] = useState();

const [name, setName] = useState('');
const [sal, setSal] = useState();

return (
<>
<table className='table table-bordered table-striped table-responsive'>
<thead>
<tr>
<th>eid</th>
<th>name</th>
<th>sal</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{[Link]((employee, ind) => {
return (
<tr>
<td>{[Link]}</td>
<td>{[Link]}</td>
<td>{[Link]}</td>
<td>
<button className='btn btn-danger' onClick={()
=> deleteEmp(ind)}>DELETE</button>
</td>
</tr>
)
})}
</tbody>
</table>
<hr />
<form onSubmit={addEmployee}>
id : <input
name="id"
type="text"
value={id}
onChange={e => setId([Link])}
/> <br /><br />

Name : <input
name="name"
type="text"
value={name}
onChange={e => setName([Link])}
/> <br /><br />

Name : <input
name="sal"
type="text"
value={sal}
onChange={e => setSal([Link])}
/> <br /><br />

<input type='submit' />

</form>

</>
);
}

program-90 useEffect
********************
import React, { useState, useEffect } from 'react'

export default function Test() {

const [users, setUsers] = useState([]);

useEffect(() => {
fetch("[Link]
.then(response => [Link]())
.then(result => setUsers(result));
}, []);

return (
<div>
<table className='table table-bordered table-striped table-responsive'>
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>email</th>
<th>phone</th>
</tr>
</thead>
<tbody>
{[Link]((user, ind) => {
return (
<tr>
<td>{[Link]}</td>
<td>{[Link]}</td>
<td>{[Link]}</td>
<td>{[Link]}</td>
</tr>
)
})}
</tbody>
</table>
</div>
);
}

program-91 custom Hook

***********************
[Link]
------------
import React, { useEffect, useState } from "react";

export default function useFetch(url) {

const [data, setData] = useState([]);

useEffect(async () => {
const response = await fetch(url);
const data = await [Link]();
setData(data);
}, []);

return data;
}

[Link]
-------
import React, { useState, useEffect } from 'react'
import useFetch from '../customhook/fetchHook';

export default function Test() {

let users = useFetch('[Link]
return (
<div>
<table className='table table-bordered table-striped table-responsive'>
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>email</th>
<th>phone</th>
</tr>
</thead>
<tbody>
{[Link]((user, ind) => {
return (
<tr>
<td>{[Link]}</td>
<td>{[Link]}</td>
<td>{[Link]}</td>
<td>{[Link]}</td>
</tr>
)
})}
</tbody>
</table>
</div>
);
}

program-92: Context Example

************************
[Link]
--------------
import { createContext, useState } from "react";
export const UserContext = createContext();
export const UserProvider = ({ children }) => {
const [user, setUser] = useState({ name: 'Guest' });
const setLoggedinUser = (name) => {
setUser({ name })
}
return <[Link] value={{ user, setLoggedinUser }}>
{children}
</[Link]>
}

[Link]
---------------
import { createContext, useState } from "react";
export const ThemeContext = createContext();
export const ThemeProvider = ({ children }) => {
const [theme, setTheme] = useState('light');
const toggleTheme = () => {
setTheme((prev) => {
return prev === 'light' ? 'dark' : 'light';
})
}
return <[Link] value={{ theme, toggleTheme }}>
{children}
</[Link]>
}

-Wrap the component with Context Providers

-Consume the data from Context ([Link])

import React, { useContext } from "react";
import { ThemeContext } from "./ThemeContext";
import { UserContext } from "./UserContext";
const Dashboard = () => {
const { theme, toggleTheme } = useContext(ThemeContext);
const { user, setLoggedinUser } = useContext(UserContext);
return <div style={{ padding: 20, background: theme === "light" ? "#fff" :
"#333", color: theme === "light" ? "#000" : "#fff" }}>
<h2>Welcome, {[Link]}</h2>
<h2>Current Theme : {theme}</h2>
<button onClick={() => setLoggedinUser("John Doe")}>Login as John
Doe</button>
<br /><br />
<button onClick={toggleTheme}>Toggle Theme</button>
</div>
};
export default Dashboard;

Program- 94 Redux Counter

*************************
1. create a new project
npx create-react-app counter-app

2. install redux & react-redux

npm install redux react-redux @reduxjs/toolkit

3. Create Folders & Files for actions, reducers, store and components
store-->[Link]
actions-->[Link]
reducers-->[Link]
components-->[Link]

4. Create Actions ([Link])

export const increment = () => { // Action Creator function
return { type: 'INCREMENT' } // action object
}
export const decrement = () => {
return { type: 'DECREMENT' }
}
export const reset = () => {
return { type: 'RESET' }
}

5. Add Reducer Code

const counterReducer = (state = 1, action) => {
switch ([Link]) {
case "INCREMENT":
return state + 1;
case "DECREMENT":
return state - 1;
case "RESET":
return (state = 0);
default:
return state;
}
};
export default counterReducer;

6. create Store ([Link])

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from '../reducers/counter_reducer';
const myStore = configureStore({
reducer: {
counter: counterReducer
}
});
export default myStore;

7. Provide Store ([Link])

import { Provider } from 'react-redux';
import mystore from './store/store'

const root = [Link]([Link]("root"));

[Link](
<[Link]>
<Provider store={mystore}>
<App />
</Provider>
</[Link]>
);

8. Import and Dispatch the Actions([Link])

import { useDispatch, useSelector } from 'react-redux';

import { decrement, increment, reset } from '../actions/actions'
export default function Counter() {
const count = useSelector((state) => [Link])
const dispatch = useDispatch();
return <>
<h3 className='text-center'>Counter Example Using REDUX</h3>
<div className='col-md-4 offset-md-4'>
<div className='m-3 p-3 border border-3 rounded-3 text-
center'>
<h4>Count is: {count}</h4>

<button class="btn btn-secondary" onClick={() =>

dispatch(decrement())}>Decrement</button>
<button class="btn btn-danger mx-2" onClick={() =>
dispatch(reset())}>Reset</button >
<button class="btn btn-primary" onClick={() =>
dispatch(increment())}> Increment</button >
</div>
</div >
</>
}

Program-95: Redux ToDo example

********************************
1. create a new project
npx create-react-app <projectName>
2. install react-redux
npm install @reduxjs/toolkit react-redux

3. Create Folders & Files for actions, reducers, store and components
store-->[Link]
features/todo --> [Link]
components--> [Link] , [Link], [Link]

4. Create a Redux Store

import { configureStore } from '@reduxjs/toolkit'
export const store = configureStore({
reducer: {todoReducer:todoReducer}
})

5. Provide the Redux Store to React([Link])

6. Create a Redux "slice" reducer with createSlice , Export the generated slice
reducer and action creators
import { createSlice } from '@reduxjs/toolkit';
const initialState = {
todoList: [
{ id: 1, text: "Learn React", isCompleted: false },
{ id: 2, text: "Complete Java Assignments", isCompleted: true },
]
}
// slice = reducers + action_creators
export const todoSlice = createSlice({
name: 'todo',
initialState,
reducers: {
addToDo: {
reducer: (state, action) => {
[Link]([Link]);
},
prepare: (text) => ({
payload: {
id: [Link]() * 20,
text,
completed: false,
}
})
},
deleteToDo: (state, action) => {
[Link] = [Link](todo => [Link] !==
[Link]);
return state;
},
toggleToDo: (state, action) => {
[Link] = [Link]((toDo) =>
[Link] === [Link] ? { ...toDo,
isCompleted: ![Link] } : toDo
);
return state;
}
}
})
// Action creators are generated for each case reducer function
export const { addToDo, deleteToDo, toggleToDo } = [Link]; //
Action Creators
export default [Link];

7. Read data from the store with the useSelector hook ([Link])
import { useSelector } from 'react-redux'
import ToDo from './ToDo';
import AddToDo from './AddToDo';
export default function ToDoList() {
const todoArr = useSelector((state) => [Link]);
const CompletedToDos = [Link](todo => [Link]);
return <>
<div className='col-sm-4 offset-4'>
<div className='p-3 m-3 border border-3 rounded-3'>
<h2 className='text-center'>ToDo List Using
REDUX</h2>
<hr />
<AddToDo />
<hr/>
{[Link]((todoObj, ind) => {
return <ToDo todoObj={todoObj} ind={ind} />
})}
<hr />
{[Link]}/{[Link]} are
completed
</div>
</div>
</>
}

9. [Link]
import { useDispatch } from 'react-redux'
import { deleteToDo, toggleToDo } from '../features/todo/todoSlice';
export default function ToDo({ todoObj }) {
const dispatch = useDispatch();
const deleteMyTodo = (id) => {
const actionObj = deleteToDo(id);
dispatch(actionObj)
}
const toggleMyTodo = (id) => {
const actionObj = toggleToDo(id);
dispatch(actionObj)
}
return <>
<li>
<span style={{ textDecoration: [Link] ? 'line-
through' : 'none' }}>
{[Link]}
</span>  
<button onClick={() =>
{ deleteMyTodo([Link]) }}>DELETE</button>  
<button onClick={() =>
{ toggleMyTodo([Link]) }}>TOGGLE</button>  
</li>
</>
}
10. [Link]
import React, { useRef } from 'react'
import { useDispatch } from 'react-redux';
import { addToDo } from '../features/todo/todoSlice';
export default function AddToDo() {
const dispatch = useDispatch();
const myRef1 = useRef();
const addNewToDo = () => {
const actionObj = addToDo([Link]);
dispatch(actionObj);
[Link] = '';
};
return <>
<input ref={myRef1} />  
<button onClick={addNewToDo}>Add New ToDo</button>
</>
}

Program:-96 useReducer hook

***************************
import React, { useReducer, useRef } from "react";

let nextTodoId = 3;
export default function UseReducerDemo() {
const [todos, dispatch] = useReducer(reducer, initialTodos);
const myref1 = useRef();

const addNewTodo = (title) => {

Program:-97 useCallback Hook

*************************
import { useState, useCallback } from "react";
import ReactDOM from "react-dom";
import Todos from "./Todos";

const App = () => {

const [count, setCount] = useState(0);
const [todos, setTodos] = useState([]);

const increment = () => {

setCount((c) => c + 1);
};
const addTodo = useCallback(() => {
setTodos((t) => [...t, "New Todo"]);
}, [todos]);

return (
<>
<Todos todos={todos} addTodo={addTodo} />
<hr />
<div>
Count: {count}
<button onClick={increment}>+</button>
</div>
</>
);
};
----------------------------------------------
import { memo } from "react";
const Todos = ({ todos, addTodo }) => {
[Link]("child render");
return (
<>
<h2>My Todos</h2>
{[Link]((todo, index) => {
return <p key={index}>{todo}</p>;
})}
<button onClick={addTodo}>Add Todo</button>
</>
);
};
export default memo(Todos);

Program :-98 usememo

********************
import React, { useMemo, useState } from "react";

export default function Demo() {

const [count, setCount] = useState(0);
const [todos, setTodos] = useState(['To Do-1', 'To Do-2']);
const calculation = useMemo(() => expensiveCalculation(count), [count]);
// const calculation = expensiveCalculation(count);

const increment = () => {

setCount((c) => c + 1);
};
const addTodo = () => {
setTodos([...todos, "New Todo"]);
};
return (
<div>
<div>
<h2>My Todos</h2>
{[Link]((todo, index) => {
return <p key={index}>{todo}</p>;
})}
<button onClick={addTodo}>Add Todo</button>
</div>
<hr />
<div>
Count: {count}
<button onClick={increment}>+</button>
<h2>Expensive Calculation</h2>
{calculation}
</div>
</div>
);
}
const expensiveCalculation = (num) => {
[Link]("Calculating...");
for (let i = 0; i < 1000000000; i++) {
num += 1;
}
return num;
};

Program-99 Error Boundary

*************************
import React, { Component } from 'react';
export default class MyErrorBoundry extends Component {
constructor(props) {
super(props);
[Link] = { hasError: false };
}
static getDerivedStateFromError(error) {
// Update state so the next render will show the fallback UI.
return { hasError: true };
}
componentDidCatch(error, errorInfo) {
// You can also log the error to an error reporting service
// logErrorToMyService(error, errorInfo);
}
render() {
if ([Link]) {
return <h2>Something went wrong, Component cann't be loaded </h2>
} else {
// Normally, just render children
return [Link];
}
}
}

import React, { Component } from 'react'

export class BuggyCounter extends Component {
constructor(props) {
super(props);
[Link] = { counter: 0 };
}
increment = () => {
[Link]({ counter: [Link] + 1 });
}
render() {
if ([Link] === 5) {
// Simulate a JS error
throw new Error('I crashed!');
}
return <>
<h1>Count is : {[Link]}</h1>
<button onClick={[Link]}>Increment</button>
</>
}
}

function Test() {
return (
<div>
<p>
<b>
This is an example of error boundaries in React 16.
<br /><br />
Click on the numbers to increase the counters.
<br />
The counter is programmed to throw when it reaches 5. This simulates a
JavaScript error in a component.
</b>
</p>
<hr />
<ErrorBoundary>
<p>These two counters are inside the same error boundary. If one crashes,
the error boundary will replace both of them.</p>
<BuggyCounter />
<BuggyCounter />
</ErrorBoundary>
<hr />
<p>These two counters are each inside of their own error boundary. So if one
crashes, the other is not affected.</p>
<ErrorBoundary><BuggyCounter /></ErrorBoundary>
<ErrorBoundary><BuggyCounter /></ErrorBoundary>
</div>
);
}

Program-100 Portals
*************************
1. add target div in [Link]
<div id="modal-root"></div>

2. Create a Portal Component

import React from 'react';
import ReactDOM from 'react-dom';
const styles = {
overlay: {
display: 'flex', justifyContent: 'Center', alignItems: 'center',
},
modal: {
background: '#fff', padding: '20px', borderRadius: '5px'
}
}
export default function MyModal({ children }) {
return [Link](
<div style={[Link]}>
<div style={[Link]}>
{children}
</div>
</div>,
[Link]('modal-root')
)
}

3. Use the Portal Component in a parent component

import { useState } from 'react';
import MyModal from './components/MyModal';
function App() {
const [showModal, setShowModal] = useState(false);
return <>
<h1>Let's Learn Portals</h1>
<button className='btn btn-primary' onClick={() =>
setShowModal(true)}>Open Modal</button>
{showModal &&
<MyModal>
<h2>This is a Modal</h2>
<button className='btn btn-primary' onClick={() =>
setShowModal(false)}>Close Modal</button>
</MyModal>
}
</>
}
export default App;

React JS Sample Programs and Examples
No ratings yet
React JS Sample Programs and Examples
12 pages
React Lab Exercises
No ratings yet
React Lab Exercises
16 pages
React JS Course Syllabus Overview
100% (2)
React JS Course Syllabus Overview
302 pages
React JS Basics for Single Page Apps
No ratings yet
React JS Basics for Single Page Apps
14 pages
React Component Examples and Usage
No ratings yet
React Component Examples and Usage
10 pages
React HTML Rendering and Components Guide
No ratings yet
React HTML Rendering and Components Guide
24 pages
React JSX and Component Examples
No ratings yet
React JSX and Component Examples
55 pages
React Counter and Form Applications
No ratings yet
React Counter and Form Applications
27 pages
React Examples: Button Click & Rendering
No ratings yet
React Examples: Button Click & Rendering
6 pages
Node.js and React Project Setup Guide
No ratings yet
Node.js and React Project Setup Guide
28 pages
React JS Components and Features Guide
No ratings yet
React JS Components and Features Guide
38 pages
Introduction to ReactJS and Setup Guide
No ratings yet
Introduction to ReactJS and Setup Guide
44 pages
MERN Stack: Building React Applications
No ratings yet
MERN Stack: Building React Applications
14 pages
React Basics for Tamil Nadu Youth Training
No ratings yet
React Basics for Tamil Nadu Youth Training
55 pages
10 Essential React Practice Programs
No ratings yet
10 Essential React Practice Programs
8 pages
Overview of React JS Library
No ratings yet
Overview of React JS Library
4 pages
React Props, State, and Styling Guide
No ratings yet
React Props, State, and Styling Guide
23 pages
React Js
No ratings yet
React Js
22 pages
Custom Hooks and Data Fetching in React
No ratings yet
Custom Hooks and Data Fetching in React
26 pages
Introduction to React JS Basics
No ratings yet
Introduction to React JS Basics
28 pages
Introduction to React JS Basics
No ratings yet
Introduction to React JS Basics
38 pages
React 16 Cheat Sheet Guide
No ratings yet
React 16 Cheat Sheet Guide
1 page
React PDF
No ratings yet
React PDF
14 pages
React Setup and JSX Basics Guide
No ratings yet
React Setup and JSX Basics Guide
46 pages
MERN Stack Setup and React Lifecycle
No ratings yet
MERN Stack Setup and React Lifecycle
14 pages
React Component Constructors Explained
No ratings yet
React Component Constructors Explained
49 pages
Quick Start Guide to React Basics
No ratings yet
Quick Start Guide to React Basics
18 pages
Introduction to ReactJS Components
No ratings yet
Introduction to ReactJS Components
21 pages
React Quick Start Guide
No ratings yet
React Quick Start Guide
17 pages
Quick Start Guide to Learning React
No ratings yet
Quick Start Guide to Learning React
17 pages
Introduction to React.js Basics
No ratings yet
Introduction to React.js Basics
30 pages
React - JS: Javascript Library For Building User Interfaces
No ratings yet
React - JS: Javascript Library For Building User Interfaces
122 pages
React
No ratings yet
React
51 pages
React CSS and Component Basics
No ratings yet
React CSS and Component Basics
1 page
React Js
No ratings yet
React Js
52 pages
ReactJS and React Native Fundamentals
100% (1)
ReactJS and React Native Fundamentals
79 pages
React State and Props Overview
No ratings yet
React State and Props Overview
10 pages
React Complete Book
No ratings yet
React Complete Book
39 pages
Overview of ReactJS Features and Components
No ratings yet
Overview of ReactJS Features and Components
19 pages
React
No ratings yet
React
8 pages
React Web Development Lab Record
No ratings yet
React Web Development Lab Record
42 pages
Reactjs 1
No ratings yet
Reactjs 1
35 pages
ReactJS Modules 6 & 7 Overview
No ratings yet
ReactJS Modules 6 & 7 Overview
138 pages
MERN Stack and React Components Guide
No ratings yet
MERN Stack and React Components Guide
74 pages
Unit 5 - React Program (1) (1) - 1
No ratings yet
Unit 5 - React Program (1) (1) - 1
22 pages
React Quick Start Guide
No ratings yet
React Quick Start Guide
15 pages
Integrate React in Existing Apps
No ratings yet
Integrate React in Existing Apps
90 pages
React Tutorial
No ratings yet
React Tutorial
19 pages
ReactJS Beginner Exercises Guide
No ratings yet
ReactJS Beginner Exercises Guide
7 pages
Introduction to React.js Components
No ratings yet
Introduction to React.js Components
122 pages
Basic React Js
No ratings yet
Basic React Js
12 pages
Introduction to React Library Basics
No ratings yet
Introduction to React Library Basics
9 pages
ReactJS Installation and Component Guide
No ratings yet
ReactJS Installation and Component Guide
20 pages
React App Components and Functionality
No ratings yet
React App Components and Functionality
15 pages
React Props, State, and Event Handling Guide
No ratings yet
React Props, State, and Event Handling Guide
31 pages
React Component Patterns Explained
No ratings yet
React Component Patterns Explained
18 pages
React JS: Core Concepts Overview
No ratings yet
React JS: Core Concepts Overview
9 pages
Understanding React Component Warnings
No ratings yet
Understanding React Component Warnings
123 pages
Tax Invoice for GoPro Purchase
No ratings yet
Tax Invoice for GoPro Purchase
1 page
GitHub Account Setup and Usage Guide
No ratings yet
GitHub Account Setup and Usage Guide
6 pages
EJS Templating Setup Guide
No ratings yet
EJS Templating Setup Guide
1 page
Git Bash Terminal Navigation Guide
No ratings yet
Git Bash Terminal Navigation Guide
4 pages
Detecting Cluely in Job Interviews
No ratings yet
Detecting Cluely in Job Interviews
5 pages
Node.js Learning Syllabus Overview
No ratings yet
Node.js Learning Syllabus Overview
62 pages
Understanding React: Key Concepts and Setup
No ratings yet
Understanding React: Key Concepts and Setup
48 pages
Hopf System 6844 Technical Manual
No ratings yet
Hopf System 6844 Technical Manual
163 pages
ELAU PacDrive MC-4 Technical Data
No ratings yet
ELAU PacDrive MC-4 Technical Data
28 pages
Interest on Capital Calculations in Partnerships
No ratings yet
Interest on Capital Calculations in Partnerships
8 pages
Convert Number to Words Function
No ratings yet
Convert Number to Words Function
6 pages
Probability and Statistics in Econometrics
No ratings yet
Probability and Statistics in Econometrics
42 pages
Valvula Reductora de Presion Bermad Area 675 720-UL
No ratings yet
Valvula Reductora de Presion Bermad Area 675 720-UL
4 pages
Java Programming Concepts and Questions
No ratings yet
Java Programming Concepts and Questions
2 pages
Vending Machine Use Case Analysis
No ratings yet
Vending Machine Use Case Analysis
35 pages
BT96040AV-FSTF-12 I2C LCD Specification
No ratings yet
BT96040AV-FSTF-12 I2C LCD Specification
10 pages
Timer Modes in 8051 Microcontroller
No ratings yet
Timer Modes in 8051 Microcontroller
47 pages
CBR Test Procedure for Soil Analysis
No ratings yet
CBR Test Procedure for Soil Analysis
6 pages
VLSI Design Course Overview R21 ECE
No ratings yet
VLSI Design Course Overview R21 ECE
12 pages
Understanding Bitumen and Its Applications
No ratings yet
Understanding Bitumen and Its Applications
91 pages
Dividing by 1-Digit Numbers Guide
No ratings yet
Dividing by 1-Digit Numbers Guide
44 pages
Computer Science Practical Exam 2023
No ratings yet
Computer Science Practical Exam 2023
12 pages
BSLT Grade 9 Visual Arts Term 1 2026
No ratings yet
BSLT Grade 9 Visual Arts Term 1 2026
4 pages
2025SASMO真题答案G6
No ratings yet
2025SASMO真题答案G6
14 pages
Interactive Electrical Schematic Guide
No ratings yet
Interactive Electrical Schematic Guide
9 pages
36kV Shunt Reactor TRV Analysis Report
No ratings yet
36kV Shunt Reactor TRV Analysis Report
5 pages
Thorlabs Single Mode Fiber Laser Specs
No ratings yet
Thorlabs Single Mode Fiber Laser Specs
2 pages
VOL 166 Music Theory 2
100% (15)
VOL 166 Music Theory 2
36 pages
Donut Rewards: Arithmetic Sequence Explained
No ratings yet
Donut Rewards: Arithmetic Sequence Explained
22 pages
Grade V Math Quiz for Cabanatuan City
No ratings yet
Grade V Math Quiz for Cabanatuan City
7 pages
Software Architecture Lab Overview
0% (1)
Software Architecture Lab Overview
3 pages
Understanding Integration Basics
No ratings yet
Understanding Integration Basics
30 pages
Dancing With Maya Between Reality and Illusion, Embracing The Power of Uncertainty - Nodrm
No ratings yet
Dancing With Maya Between Reality and Illusion, Embracing The Power of Uncertainty - Nodrm
566 pages
B. Tech CSE Curriculum 2025-26
No ratings yet
B. Tech CSE Curriculum 2025-26
70 pages
Portable Three-Phase Meter Test System
No ratings yet
Portable Three-Phase Meter Test System
4 pages
Learning Mathematics in Primary Grades Complete Chapter By: Mariniel G. Lacaran
No ratings yet
Learning Mathematics in Primary Grades Complete Chapter By: Mariniel G. Lacaran
277 pages
Business Research Methods: 6th Edition
67% (3)
Business Research Methods: 6th Edition
2 pages