0% found this document useful (0 votes)

31 views80 pages

React Programs

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)

31 views80 pages

React Programs

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

You are on page 1/ 80

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

************************************************
<html>
<head>
<script crossorigin
src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-
dom.development.js"></script>
</head>
<body>at
<div id="example"></div>
<script>
const reactEle = React.createElement('h1', {}, 'My First React App');
const domEle = document.getElementById('example');
const root = ReactDOM.createRoot(domEle);
root.render(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="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-
dom.development.js"></script>
</head>
<body>
<div id="example"></div>
<script>
const title = React.createElement('h1', {}, 'My First React Code');
const paragraph = React.createElement('p', {}, 'Writing some more HTML');
const containerDiv = React.createElement('div', {id:myDiv1}, [title,
paragraph]);

const domEle = document.getElementById('example');

const root = ReactDOM.createRoot(domEle);
root.render(containerDiv);
</script>
</body>
</html>

Program-3 : Nested Element using JSX (Babel)

************************************
<html>
<head>
<script crossorigin
src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-
dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</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 = document.getElementById('example');

const root = ReactDOM.createRoot(domEle);

root.render(reactEle)
</script>
</body>
</html>

Program-4: use Bootstrap

************************
1. install bootstrap
npm i bootstrap
2. add below 2 lines to index.js file
import 'bootstrap/dist/css/bootstrap.min.css';
import "bootstrap/dist/js/bootstrap.bundle.min.js";

Program-5: use Bootstrap-icons

******************************
1. install bootstrap icons library
npm i bootstrap-icons
2. import bootstrap-icons.css file in to index.js
import 'bootstrap-icons/font/bootstrap-icons.css';
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>
);
root.render(element);
}
setInterval(tick, 1000);

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

program-9: Data Binding

***********************
import React from 'react';
class App extends React.Component {
render() {
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
let user = {
firstName: 'sanjay',
lastName: 'samantra'
};
return (
<div>
<h2>React Version is {React.version}</h2>
<h2>{1 + 1}</h2>
<h2>my name is- {user.firstName}</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/sachin.jpg' />
(OR)
1. import sachin from './sachin.jpg'; (OR) const sachin = require('./sachin.jpg')
2. <img src={sachin} />

program-11 : CSS
****************
import React from 'react';
class App extends React.Component {
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

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

-------------
DashedBox2.css
--------------
.error{
background-color:yellow;
}

-------------
import React from 'react';
import styles from './DashedBox.module.css';
import './DashedBox2.css';

const DashedBox = () => (

console.log(styles)
<div className={styles.container}>
<p className={styles.content}>Get started with CSS Modules style</p>
<div className={styles.error}>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 React.Component {
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 React.Component {
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>
{unreadMessages.length > 0 &&
<h2>
You have {unreadMessages.length} 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 React.Component {
render() {
let cars = ['tata', 'honda', 'maruti', 'hundai', 'toyota']
return (
cars.map((car, ind) => {
return <li>{ind} - {car}</li>
})
)
}
}
export default List;
(OR)
import React from 'react';
class List extends React.Component {
render() {
let cars = ['tata', 'honda', 'maruti', 'hundai', 'toyota'];
let carList = cars.map(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>
{countries.map((country,ind)=>{
return <option key={ind}>{country}</option>
})}
</select>
<hr/>
datalist:
<input list="countries" name="country" id="country" />
<datalist id="countries">
{countries.map((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%'>
{employees.map(emp => (
<tr key={emp.eId}>
<td>{emp.eId}</td>
<td>{emp.name}</td>
<td>{emp.sal}</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={emp.eId}>
<td>{emp.eId}</td>
<td>{emp.name}</td>
<td>{emp.sal}</td>
</tr>
);
empRows.push(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>
{
employees.map((emp, ind) => (
<tr key={ind}>
{Object.values(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>
{this.productList.map(item => (
<Product product={item} />
))}
</div>
)
}
}
--------------------------------------
import React, { Component } from 'react';
import './product.css';
export default class Product extends Component {
render() {
return (
<div class='product'>
{this.props.product.id} <br />
{this.props.product.name} <br />
{this.props.product.price} <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 = () => {
this.count = this.count + 1;
this.forceUpdate();
};
render() {
return (
<div>
<p>The count is: {this.count}</p>
<button onClick={this.increment}>Add one</button>
</div>
);
}
}

program-25: Props
******************
import React from 'react';
import Child from '../child/child';
class Parent extends React.Component {
render() {
let user = { name: 'sachin', age: 35 }
return (
<div>
This is Parent Component
<Child name={user.name} age={user.age} />
</div>
);
}
}
export default Parent;
-------------------
import React from 'react';
class Child extends React.Component {
render() {
return (
<div>
<h2>This is child component</h2>
<h2>{this.props.name}--{this.props.age}</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 } = this.props.prodObj;
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 {this.props.children}</h2>
</div>
)
}
}

Program-27 propTypes
*******************
import React from 'react';
import { PropTypes } from 'prop-types';
class Student extends React.Component {

render() {
return (
<div>
<p>Student Name: {this.props.name}</p>
<p>Age: {this.props.age}</p>
</div>
);
}
}
Student.propTypes = {
name: PropTypes.string.isRequired,
age: PropTypes.number
};
export default Student;

Program-28 Requiring Single Child

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

Program-29: props.children
**************************
import React from 'react';
import Greet from '../greet/greet';
class Content extends React.Component {
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 React.Component {
render() {
return (
<h2>
This is Greet Component
{this.props.children}
</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);
this.state = {
parentName: 'Parentttt'
};
this.greetParent = this.greetParent.bind(this);
this.greetParentWithParam = this.greetParentWithParam.bind(this);
}
greetParent() {
alert(`Hello ${this.state.parentName}`)
}
greetParentWithParam(data) {
alert(`Hello parent with parameter from ${data}`)
}
render() {
return (
<div>
<Child greetHandler={this.greetParent}
greetHandler2={this.greetParentWithParam}/>
</div>
)
}
}
-----------------------
import React from 'react';
class Child extends React.Component {
render() {
return (
<div>
<div>I am child component</div>
<button onClick={this.props.greetHandler}>Invoke parent
Method</button>
<button onClick={() =>
this.props.greetHandler2('childparameter')}>Invoke parent Method</button>
</div>
);
}}
export default Child;

Program-31: States
******************
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {count: 0 };
}
increment = () => {
this.setState({count: this.state.count + 1});
}
render() {
return (
<div>
<div>count:{this.state.count}</div>
<button onClick={this.increment}>click!</button>
</div>
);
}
};

Program-32 asynchronous state

*******************************
import React, { Component } from "react";
export default class Counter extends Component {
constructor(props) {
super(props);
this.state = {
count: 0,
};
}
incrementCountFiveTimes() {
this.increment();
this.increment();
this.increment();
this.increment();
this.increment();
}
increment() {
this.setState({ count: this.state.count + 1 });
console.log(this.state.count);
}
render() {
return (
<h2>
counter works
<div>Count - {this.state.count}</div>
<button className="btn btn-primary m-2" onClick={this.increment}>
Increment
</button>
<button className="btn btn-primary m-2"
onClick={this.incrementCountFiveTimes}>
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 React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
}
}
increment() {
this.setState((prevState) => ({
count: prevState.count + 1
}))
}
incrementFive() {
this.increment();
this.increment();
this.increment();
this.increment();
this.increment();
}
render() {
return (
<h2>
counter works
<div>Count - {this.state.count}</div>
<button onClick={() => this.incrementFive()}>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 React.Component {
constructor(props) {
super(props);
this.state = { flag: true };
}
toggleFlag = () => {
this.setState({ flag: !this.state.flag });
}
render() {
return (
<div>
{this.state.flag ? <div>Hellllllo</div> : null}
<button onClick={this.toggleFlag}>
{this.state.flag ? '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)
this.state = {
flag: true,
}
}
togglePassword = () => {
this.setState({
flag: !this.state.flag
})
}
render() {

return (
<div>
<input type={this.state.flag ? 'password' : 'text'} />
<button onClick={this.togglePassword}>{this.state.flag ? '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 = e.target.value;
setRemaining(100-msg.length)
};
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(e.target.value)
}
return <>
<select onChange={stateChanged}>
{stateNames.map((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 './ThemeDemo.css';
export default function ThemeDemo() {
const [isDark, setIsDark] = useState(false);
const changeMode = () => {
setIsDark(!isDark)
}
useEffect(() => {
if (isDark) {
document.body.classList.add('dark');
} else {
document.body.classList.remove('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';

class Addition extends React.Component {

state = {
a: 0,
b: 0,
total: 0
}
changeFirst = (e) => {
this.setState({ a: parseInt(e.target.value) })
}
changeSecond = (e) => {
this.setState({ b: parseInt(e.target.value) })
}
addition = () => {
this.setState({ total: this.state.a + this.state.b })
}
render() {
return (
<div>
Addition Works!!!
<input onKeyUp={this.changeFirst}></input>
<input onKeyUp={this.changeSecond}></input>

<h2>Addition is {this.state.total}</h2>
<button onClick={this.addition}>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(+e.target.value);
}} />
<input type="number" onKeyUp={(e) => {
setnum2(+e.target.value);
}} />

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 (folderInfo.isFolder) { // if folder
return <div>
<span onClick={() => setExpand(!expand)} style={{ cursor: 'pointer' }}>
📁
{folderInfo.name}
<br />
</span>
<div
style={{ display: expand ? "block" : "none", paddingLeft: "20px" }}
>
{folderInfo.items.map((subfolderInfo, ind) => (
<Folder folderInfo={subfolderInfo} key={ind} />
))}
</div>
</div>
} else { // if file
return <span>
🏢
{folderInfo.name} <br />
</span>

}
}

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

import './TrafficLight.css';

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'>
{Object.keys(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(
employees.filter((emp) => JSON.stringify(emp).includes(searchText))
);
};
const onSearchTextChange = (searchText, filteredData) => {
setFilteredEmployees(filteredData);
};
const sortAsc = () => {
const sortedData = filteredEmployees.sort((e1, e2) =>
e1.name.localeCompare(e2.name))
setFilteredEmployees([...sortedData]);
};
const sortDesc = () => {
const sortedData = filteredEmployees.sort((e1, e2) =>
e2.name.localeCompare(e1.name))
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>
{filteredEmployees.map((emp, ind) => (
<tr key={ind}>
<td>{emp.number}</td>
<td>{emp.name}</td>
<td>{emp.position}</td>
</tr>
))}
</tbody>
</table>
}
</>
);
}

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

const endOffset = itemOffset + itemsPerPage;

console.log(`Loading items from ${itemOffset} to ${endOffset}`);
const filteredProducts = productsArr.slice(itemOffset, endOffset);
const pageCount = Math.ceil(productsArr.length / itemsPerPage);

const handlePageClick = (event) => {

const newOffset = (event.selected * itemsPerPage) % productsArr.length;
console.log(
`User requested page number ${event.selected}, which is offset ${newOffset}`
);
setItemOffset(newOffset);
};

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

<div className="container">
<div className="row">
{filteredProducts.map((product) => (
<div className="col-sm-3" key={product.id}>
<div className="card text-center">
<img
src={product.image}
className="card-img-top"
alt="..."
style={{ height: "200px" }}
/>
<div className="card-body">
<h5 className="card-title">{product.category}</h5>
<p className="card-text">{product.title}</p>
<p
className="card-text"
style={{ height: "200px", overflow: "scroll" }}
>
{product.description}
</p>
<p className="card-text"> {product.price}</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"
/>
</>
);
}

ProductsPagination.css
=======================
.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 = () => {
console.log('I am F1...')
}
add = (a, b) => {
console.log(`Addition of ${a} & ${b} is ${a + b}`)
}
render() {
return <>
<button onClick={this.f1} className='btn btn-primary'>btn-1</button>
<button onClick={() => { this.add(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] = React.useState(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';

class Crud extends React.Component {

constructor() {
super();
this.state = {
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 }
],
newEmp: { eId: '', name: '', sal: 0 }
}
}
deleteRow = (ind) => {
this.state.employees.splice(ind, 1);
this.setState({ employees: this.state.employees })
}
viewRow = (emp) => {
alert(`${emp.eId} ${emp.name} ${emp.sal}`)
}
updateId = (e) => {
//this.state.newEmp.eId = e.target.value;
this.setState({ newEmp: this.state.newEmp.id = e.target.value })
this.setState({ newEmp: this.state.newEmp })
}
updateName = (e) => {
this.state.newEmp.name = e.target.value;
this.setState({ newEmp: this.state.newEmp })
}
updateSal = (e) => {
this.state.newEmp.sal = e.target.value;
this.setState({ newEmp: this.state.newEmp })
}
addRow = () => {
this.state.employees.push(this.state.newEmp);
this.setState({ employees: this.state.employees })
//this.setState({ newEmp: { eId: '', name: '', sal: 0 } })
}

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>
{this.state.employees.map((emp, ind) => (
<tr key={emp.eId}>
<td>{ind}</td>
<td>{emp.eId}</td>
<td>{emp.name}</td>
<td>{emp.sal}</td>
<td>
<button onClick={() =>
this.deleteRow(ind)}>Delete</button>
<button onClick={() =>
this.viewRow(emp)}>View</button>
</td>
</tr>
))}
</table>

Emp Id:
<input onKeyUp={this.updateId}></input> <br></br><br></br>
Name:
<input onKeyUp={this.updateName}></input> <br></br><br></br>
Salary:
<input onKeyUp={this.updateSal}></input> <br></br><br></br>

<button onClick={this.addRow}>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 } = e.target;
setEmp({ ...emp, [name]: value })
}
return <>
<h3>Edit Employee</h3>
<p>eId : <input value={emp.eId} name='eId' onChange={(e) =>
changeHandler(e)} /></p>
<p>Name : <input value={emp.name} name='name' onChange={(e) =>
changeHandler(e)} /></p>
<p>Salary : <input value={emp.sal} 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() {
console.log('Demo1 render called....');
setInterval(() => {
this.setState({name:'sachin1'})
}, 5000)
return (
<div>
This is Demo1 Component {this.state.name}
</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) {
console.log("demo-2 render called");
return (
<div>
Demo2
{props.cars.map((car) => {
return <li>{car}</li>;
})}
</div>
);
}
export default React.memo(Demo2);

Program-50 constructor & getDerivedStateFromProps

**************************************************
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {favoritecolor: "red"};
}
static getDerivedStateFromProps(props, state) {
return {favoritecolor: props.favcol };
}
render() {
return (
<h1>My Favorite Color is {this.state.favoritecolor}</h1>
);
}
}

program-51 componentDidMount
******************************
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {favoritecolor: "red"};
}
componentDidMount() {
setTimeout(() => {
this.setState({favoritecolor: "yellow"})
}, 1000)
}
render() {
return (
<h1>My Favorite Color is {this.state.favoritecolor}</h1>
);
}
}

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

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

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

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

class Child extends React.Component {

componentWillUnmount() {
alert("The component named Header is about to be unmounted.");
}
render() {
return (
<h1>Hello World!</h1>
);
}
}
program: 61 useEffect hook
**************************
import React, { useEffect, useState } from "react";
export default function Demo() {
const [a, setA] = useState(10);
const [b, setB] = useState(20);
const [c, setC] = useState(30);

useEffect(() => {
console.log("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(() => {
console.log("use effect called while mounting/updating");
return () => {
console.log("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(() => {
myRef.val = count;
});
return (
<h1>
Now: {count}, before: {myRef.val}
<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 = React.createRef();
this.myRef2 = React.createRef();
}
add = () => {
let value_1 = parseInt(this.myRef1.current.value);
let value_2 = parseInt(this.myRef2.current.value);
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={this.add}>Add</button>
</>
)
}

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

const add = () => {

const val1 = +inputRef1.current.value;
const val2 = +inputRef2.current.value;
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(this.input1.value)
let val2 = parseInt(this.input2.value)
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={this.add}>Add</button>
</div>
)
}
}
----------------------------------------------------------------
export default function Addition() {
let inputRef1;
let inputRef2;

const add = () => {

const val1 = +inputRef1.value;
const val2 = +inputRef2.value;
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)
this.myRef = React.createRef();
}
fun1 = () => {
console.log(this.myRef.current.className)
console.log(this.myRef.current.id)
}
render() {
return (
<div>
<FancyButton ref={this.myRef} >
<div>button text</div>
</FancyButton>

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

</div>
)
}
}
-------------------------------------
import React from 'react';
const FancyButton = React.forwardRef((props, ref) => (
<button ref={ref} className="FancyButton" id='btn1'>
{props.children}
</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(() => {
prevValue.current = counter;
}, [counter]);
return <>
<p>Current value - {counter} , previous Value is-{prevValue.current}</p>
<button onClick={increment}>Increment</button>
</>
}
Program : Search Filter with Deferred Value (useState, useDeferredValue, useMemo)
============================================
// App.js
import { useState, useDeferredValue, useMemo } from "react";
const ITEMS = Array.from({ length: 10000 }, (_, i) => `Item ${i + 1}`);

export default function SearchFilter() {

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

const filtered = useMemo(() => {

return ITEMS.filter(i =>
i.toLowerCase().includes(deferredQuery.toLowerCase())
);
}, [deferredQuery]);

return (
<div style={{ padding: 20 }}>
<h2>Search Filter</h2>
<input
value={query}
onChange={e => setQuery(e.target.value)}
placeholder="Type to search"
/>
<p>Showing {filtered.length} results</p>
<ul>
{filtered.slice(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) => {

e.preventDefault();
alert(fname+' '+lname);
};

return (
<>
<form onSubmit={submitHandler}>
First Name:
<input name="fname" value={fname} onChange={(e) =>
setFname(e.target.value)} />
Last Name:
<input name="lname" value={lname} onChange={(e) =>
setLname(e.target.value)} />
<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';

class MyForm extends React.Component {

constructor(props) {
super(props);
this.state = {
username: '',
age: null,
};
}
mySubmitHandler = (event) => {
event.preventDefault();
alert("You are submitting " + this.state.username + " " + this.state.age);
}
myChangeHandler = (event) => {
let nam = event.target.name;
let val = event.target.value;
console.log(nam, val)
this.setState({ [nam]: val });
}
render() {
return (
<form onSubmit={this.mySubmitHandler}>
<h1>Hello {this.state.username} {this.state.age}</h1>
<p>Enter your name:</p>
<input
type='text'
name='username'
onChange={this.myChangeHandler}
/>
<p>Enter your age:</p>
<input
type='text'
name='age'
onChange={this.myChangeHandler}
/>
<input type='submit' />
<input type='reset' value='clear' />
</form>
);
}
}
export default MyForm;

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) => {

e.preventDefault();
console.log(user);
};

return (
<>
<form onSubmit={submitHandler}>
First Name:
<input
name="fname"
value={user.fname}
onChange={(e) => setUser({ ...user, fname: e.target.value })}
/>
Last Name:
<input
name="lname"
value={user.lname}
onChange={(e) => setUser({ ...user, lname: e.target.value })}
/>
<br />
<br />
state data: {user.fname + " " + user.lname}
<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) => {

e.preventDefault();
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) => {
event.preventDefault();
console.log(formData);
}
const handleReset = () => {
setFormData(defaultFormValues);
}
const isFormValid = formData.name !== '' && formData.age !== '';
const handleChange = (event) => {
const { name, value, type, checked } = event.target;

if (type === 'checkbox') {

if (checked) {
setFormData({ ...formData, interests: [...formData.interests,
value] });
} else {
setFormData({
...formData,
interests: [...formData.interests.filter(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={formData.name}
onChange={handleChange} required></input>
</p>
<p>
<label>Age:</label>
<input name='age' value={formData.age}
onChange={handleChange}></input>
</p>
<p>
<label>Gender:</label>
<input name='gender' type='radio'
value='male' checked={formData.gender ===
'male'}
onChange={handleChange} /> Male
<input name='gender' type='radio'
value='female' checked={formData.gender ===
'female'}
onChange={handleChange} /> female
</p>
<p>
<label>DOB:</label>
<input name='dob' type='date'
value={formData.dob} onChange={handleChange} />
</p>
<p>
<label>Interests:</label>
<input name='interests' type='checkbox'
value='reading'
checked={formData.interests.includes('reading')}
onChange={handleChange} />Reading

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

value='swimimg'
checked={formData.interests.includes('swimimg')}
onChange={handleChange} />Swimimg
</p>
<p>
<label>Country:</label>
<select name='country' value={formData.country}
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={formData.bio} 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>
{JSON.stringify(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", "Node.js", "Python"];
const validationSchema = Yup.object({
name: Yup.string().required("Name is required"),
email: Yup.string()
.email("Invalid email address")
.required("Email is required"),
password: Yup.string()
.min(6, "Password must be at least 6 characters")
.required("Password is required"),
confirmPassword: Yup.string()
.oneOf([Yup.ref("password"), null], "Passwords must match")
.required("Confirm password is required"),
gender: Yup.string().required("Gender is required"),
role: Yup.string().required("Role is required"),
skills: Yup.array().min(1, "Select at least one skill"),
acceptTerms: Yup.boolean().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>
{skillsList.map((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>{JSON.stringify(formData, null, 2)}</pre>
</div>
)}
</div>
</div>
</>
}

program-73 Form Validation while submitting

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

Program-74 Error Message While Typing

**************************************
import React from 'react';
class MyForm extends React.Component {
constructor(props) {
super(props);
this.state = {
username: '',
age: null,
nameErrorMsg: '',
ageErrorMsg: '',
};
}
myChangeHandler = (event) => {
let nam = event.target.name;
let val = event.target.value;
let err1= '';
let err2 = '';
if (nam === "username") {
if (val.length < 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>;
}
}
this.setState({ nameErrorMsg: err1 });
this.setState({ ageErrorMsg: err2 });
this.setState({ [nam]: val });
}
render() {
return (
<form>
<h1>Hello {this.state.username} {this.state.age}</h1>
<p>Enter your name:</p>
<input
type='text'
name='username'
onChange={this.myChangeHandler}
/>
{this.state.nameErrorMsg}

<p>Enter your age:</p>

<input
type='text'
name='age'
onChange={this.myChangeHandler}
/>
{this.state.ageErrorMsg}
</form>
);
}
}

export default MyForm;

Program-75 Error Message onSubmit

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

class MyForm extends React.Component {

constructor(props) {
super(props);
this.state = {
username: '',
age: null,
nameErrorMsg: '',
ageErrorMsg: '',
};
}
myChangeHandler = (event) => {
let nam = event.target.name;
let val = event.target.value;
this.setState({ [nam]: val });
}
mySubmitHandler = (event) => {
event.preventDefault();

let err1 = '';

let err2 = '';

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

<p>Enter your age:</p>

<input
type='text'
name='age'
onChange={this.myChangeHandler}
/>
{this.state.ageErrorMsg}

<input type="submit" />

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

program-76 Load a Form With Default Values

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

class MyForm extends React.Component {

constructor(props) {
super(props);
this.state = {
username: 'sachin',
age: 35,
address: 'bang'
};
}
myChangeHandler = (event) => {
let nam = event.target.name;
let val = event.target.value;
this.setState({ [nam]: val });
}
mySubmitHandler = (event) => {
event.preventDefault();
alert(this.state.username + " " + this.state.age + " " +
this.state.address);
}
render() {
return (
<form onSubmit={this.mySubmitHandler}>
<h2>Hello {this.state.username} age is {this.state.age}
address is {this.state.address} </h2>
<p>Enter your name:</p>
<input
type='text'
name='username'
onChange={this.myChangeHandler}
value={this.state.username}
/>
<p>Enter your age:</p>
<input
type='text'
name='age'
onChange={this.myChangeHandler}
value={this.state.age}
/>
<p>Enter your Address:</p>
<textarea
name='address'
onChange={this.myChangeHandler}
value={this.state.address} />

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

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

export default class Test extends Component {

constructor(props) {
super(props);
this.state = {
mycar: 'Volvo'
};
}
changeHandler = (event) => {
this.setState({ mycar: event.target.value })
}
render() {
return (
<form>
<select value={this.state.mycar} onChange={this.changeHandler}>
<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: {this.state.mycar}</div>
</form>
);
}
}

Program-79 Fetch() Example

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

export default class Test extends Component {

constructor(props) {
super(props)
this.state = {
users: []
}
}

fetchUsers = () => {
const myURL = 'https://jsonplaceholder.typicode.com/users';

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

<table className="table table-bordered">

{comments.map((comment) => (
<tr key={comment.id}>
<td>{comment.id}</td>
<td>{comment.name}</td>
<td>{comment.email}</td>
<td>{comment.body}</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 "./Curd.css";

export default class Curd extends Component {

constructor(props) {
super(props);

this.state = {
modalIsOpen: false,
isEdit: false,
users: [],
id: "",
name: "",
email: "",
address: "",
phone: "",
};
}
myChangeHandler = (event) => {
let nam = event.target.name;
let val = event.target.value;
this.setState({ [nam]: val });
};
mySubmitHandler = (event) => {
event.preventDefault();
let output = {};
output = {
name: this.state.name,
email: this.state.email,
phone: this.state.phone,
address: this.state.address,
};
if (this.state.isEdit) {
this.updateEmployees(output, this.state.id);
} else {
this.addEmployee(output);
}
};
fetchEmployees = () => {
const myURL = "http://localhost:4000/users";
axios.get(myURL).then((result) => {
this.setState({ users: result.data });
});
};

addEmployee(data) {
const myURL = "http://localhost:4000/users";
axios.post(myURL, data).then((response) => {
Swal.fire("Employee got added", "", "success");
this.closeModal();
this.fetchEmployees();
});
}

updateEmployees = (data, empId) => {

axios
.put(`http://localhost:4000/users/${empId}`, data)
.then((response) => {
Swal.fire("Employee got updated", "", "success");
this.closeModal();
this.fetchEmployees();
})
.then((data) => {
console.log(data);
})
.catch((error) => {
console.log(error);
});
};
deleteEmployee = (empId) => {
axios.delete(`http://localhost:4000/users/${empId}`).then((result) => {
this.fetchEmployees();
});
};
componentDidMount() {
this.fetchEmployees();
}
openModal = () => {
this.setState({ modalIsOpen: true, isEdit: false });
};
openEditModal = (id, name, email, address, phone) => {
this.setState({
id: id,
name: name,
email: email,
address: address,
phone: phone,
isEdit: true,
modalIsOpen: true,
});
};
closeModal = () => {
this.setState({ modalIsOpen: false });
};
render() {
let nameValue;
if (this.state.isEdit) {
nameValue = this.state.name;
}
let emailValue;
if (this.state.isEdit) {
emailValue = this.state.email;
}
let addressValue;
if (this.state.isEdit) {
addressValue = this.state.address;
}
let phoneVlue;
if (this.state.isEdit) {
phoneVlue = this.state.phone;
}
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={this.openModal}
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>
{this.state.users.map((user, ind) => {
return (
<tr key={user.id}>
<td>{user.id}</td>
<td>{user.name}</td>
<td>{user.email}</td>
<td>{user.address}</td>
<td>{user.phone}</td>
<td>
<a
className="edit"
onClick={() =>
this.openEditModal(
user.id,
user.name,
user.email,
user.address,
user.phone
)
}
>
<AiFillEdit />
</a>
<a
className="delete"
href="/"
onClick={() => this.deleteEmployee(user.id)}
>
Delete
</a>
</td>
</tr>
);
})}
</tbody>
</table>
</div>
</div>
</div>
<Modal
isOpen={this.state.modalIsOpen}
onRequestClose={this.closeModal}
ariaHideApp={false}
contentLabel="Example Modal"
>
<button onClick={this.closeModal}>close</button>
<form onSubmit={this.mySubmitHandler}>
<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={this.myChangeHandler}
className="form-control"
value={nameValue}
required
/>
</div>
<div className="form-group">
<label>Email</label>
<input
type="email"
name="email"
onChange={this.myChangeHandler}
className="form-control"
value={emailValue}
required
/>
</div>
<div className="form-group">
<label>Phone</label>
<input
type="number"
name="phone"
onChange={this.myChangeHandler}
className="form-control"
value={phoneVlue}
required
/>
</div>
<div className="form-group">
<label>Address</label>
<textarea
name="address"
onChange={this.myChangeHandler}
className="form-control"
value={addressValue}
required
></textarea>
</div>
</div>
<div className="modal-footer">
<input
type="button"
className="btn btn-default"
onClick={this.closeModal}
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) {
event.preventDefault();
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>
{users.length > 0 ? (
users.map((user) => (
<tr key={user.id}>
<td>{user.name}</td>
<td>{user.email}</td>
<td>{user.phone}</td>
<td>{user.address}</td>
<td>
<button className="btn btn-danger" onClick={() =>
deleteUser(user.id)}>
DELETE
</button>  
<button className="btn btn-secondary" onClick={() =>
editUser(user.id)}>
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(e.target.value)} /> <br /><br />
email: <input name="email" value={email}
onChange={e=>setEmail(e.target.value)} /> <br /><br />
phone: <input name="phone" value={phone}
onChange={e=>setPhone(e.target.value)} /> <br /><br />
address: <input name="address" value={address}
onChange={e=>setAddress(e.target.value)} /><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)
this.state = {
users: []
}
}
async fetchUsers() {
try {
let response = await
axios.get('https://jsonplaceholder.typicode.com/users');
this.setState({ users: response.data })
}
catch (error) {
console.log(error)
}
}
componentDidMount() {
this.fetchUsers()
}
render() {
return (
<table className='table table-bordered table-striped'>
<thead>
<tr>
<th>userID</th>
<th>name</th>
<th>email</th>
</tr>
</thead>
<tbody>
{this.state.users.map((user, ind) => {
return (<tr key={ind}>
<td>{user.id}</td>
<td>{user.name}</td>
<td>{user.email}</td>
</tr>)
})}
</tbody>
</table>
)
}
}

Program-83 Request Interceptor

****************************
axios.interceptors.request.use( req => {
req.meta = req.meta || {}
req.meta.requestStartedAt = new Date().getTime();
return req;
});

Program-84 Response Interceptor

******************************
axios.interceptors.response.use(res => {
res.durationInMs = new Date().getTime() - res.config.meta.requestStartedAt
return res;
},
err => {
err.durationInMs = new Date().getTime() -
err.config.meta.requestStartedAt
throw err;
});

Program:85 Request & Response Interceptor

******************************************
import axios from 'axios';
axios.interceptors.request.use( req => {
req.meta = req.meta || {}
req.meta.requestStartedAt = new Date().getTime();
return req;
});

axios.interceptors.response.use(res => {
res.durationInMs = new Date().getTime() - res.config.meta.requestStartedAt
return res;
},
err => {
err.durationInMs = new Date().getTime() - err.config.meta.requestStartedAt
throw err;
});

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

const url = `https://api.github.com/users/${githubUserName}`;

console.log(`Sending a GET reqeust to: ${url}`);
const { data, durationInMs } = await axios.get(url, { headers });
console.log(`Github username ${githubUserName} has real name: ${data?.name} and
works at ${data?.company}`,);
console.log(`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 (index.js)

import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
const client = new ApolloClient({
uri: 'http://localhost:5000/',
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(() => {
console.log(`${InputComponent.name} Mounted`);
return () => {
console.log(`${InputComponent.name} UnMounted`);
}
}, []);
useEffect(() => { // To Make sure this effect gets called only on update
not on mount
if (isFirstRender.current) {
isFirstRender.current = false;
} else {
console.log(`${InputComponent.name} 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

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

withcounter.js
--------------
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;
clickCounter.js
---------------
import React from "react";
import CounterHOC from "./CounterHOC";
function ClickCounterWithHOC(props) {
return (
<button onClick={props.increment}> Clicked {props.count} Times</button>
);
}
export default CounterHOC(ClickCounterWithHOC);

hovercounter.js
--------------
import React from "react";
import CounterHOC from "./CounterHOC";
function HoverCounterWithHOC(props) {
return (
<button onMouseOver={props.increment}> Clicked {props.count} Times</button>
);
}
export default CounterHOC(HoverCounterWithHOC);

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

useEffect(() => {
// Log data on component update
console.log(`Component ${WrappedComponent.name} updated.`);
});

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

};

WithLogger.displayName = `withLogger(${WrappedComponent.displayName ||
WrappedComponent.name})`;
return WithLogger;
};

export default withLogger;

program:86 Routing
******************
index.js
------
import { BrowserRouter } from 'react-router-dom';
<BrowserRouter>
<App />
</BrowserRouter>

center.js
---------
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>

nav.js
------
<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 = React.lazy(() => 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);
this.state = {
count: 0
};
}
incrementCount = () => {
this.setState({ count: this.state.count + 1 })
}
render() {
return (
<div>
<p>You clicked {this.state.count} times</p>
<button onClick={() => this.incrementCount()}>
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>
{employees.map((employee, ind) => {
return (
<tr>
<td>{employee.id}</td>
<td>{employee.name}</td>
<td>{employee.sal}</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(e.target.value)}
/> <br /><br />

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

Name : <input
name="sal"
type="text"
value={sal}
onChange={e => setSal(e.target.value)}
/> <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("https://jsonplaceholder.typicode.com/users")
.then(response => response.json())
.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>
{users.map((user, ind) => {
return (
<tr>
<td>{user.id}</td>
<td>{user.name}</td>
<td>{user.email}</td>
<td>{user.phone}</td>
</tr>
)
})}
</tbody>
</table>
</div>
);
}

program-91 custom Hook

***********************
fetchHook.js
------------
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 response.json();
setData(data);
}, []);

return data;
}

test.js
-------
import React, { useState, useEffect } from 'react'
import useFetch from '../customhook/fetchHook';

export default function Test() {

let users = useFetch('https://jsonplaceholder.typicode.com/users')
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>
{users.map((user, ind) => {
return (
<tr>
<td>{user.id}</td>
<td>{user.name}</td>
<td>{user.email}</td>
<td>{user.phone}</td>
</tr>
)
})}
</tbody>
</table>
</div>
);
}

program-92: Context Example

************************
UserContext.js
--------------
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 <UserContext.Provider value={{ user, setLoggedinUser }}>
{children}
</UserContext.Provider>
}

ThemeContext.js
---------------
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 <ThemeContext.Provider value={{ theme, toggleTheme }}>
{children}
</ThemeContext.Provider>
}

-Wrap the component with Context Providers

-Consume the data from Context (DashBoard.js)

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, {user.name}</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-->store.js
actions-->actions.js
reducers-->reducers.js
components-->counter.js

4. Create Actions (actions.js)

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 (action.type) {
case "INCREMENT":
return state + 1;
case "DECREMENT":
return state - 1;
case "RESET":
return (state = 0);
default:
return state;
}
};
export default counterReducer;

6. create Store (store.js)

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

7. Provide Store (index.js)

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

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
<React.StrictMode>
<Provider store={mystore}>
<App />
</Provider>
</React.StrictMode>
);

8. Import and Dispatch the Actions(Counter.js)

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

import { decrement, increment, reset } from '../actions/actions'
export default function Counter() {
const count = useSelector((state) => state.counter)
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-->store.js
features/todo --> todoSlice.js
components--> ToDoList.js , ToDo.js, AddToDo.js

4. Create a Redux Store

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

5. Provide the Redux Store to React(index.js)

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) => {
state.todoList.push(action.payload);
},
prepare: (text) => ({
payload: {
id: Math.random() * 20,
text,
completed: false,
}
})
},
deleteToDo: (state, action) => {
state.todoList = state.todoList.filter(todo => todo.id !==
action.payload);
return state;
},
toggleToDo: (state, action) => {
state.todoList = state.todoList.map((toDo) =>
toDo.id === action.payload ? { ...toDo,
isCompleted: !toDo.isCompleted } : toDo
);
return state;
}
}
})
// Action creators are generated for each case reducer function
export const { addToDo, deleteToDo, toggleToDo } = todoSlice.actions; //
Action Creators
export default todoSlice.reducer;

7. Read data from the store with the useSelector hook (ToDoList.js)
import { useSelector } from 'react-redux'
import ToDo from './ToDo';
import AddToDo from './AddToDo';
export default function ToDoList() {
const todoArr = useSelector((state) => state.todoReducer.todoList);
const CompletedToDos = todoArr.filter(todo => todo.isCompleted);
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/>
{todoArr.map((todoObj, ind) => {
return <ToDo todoObj={todoObj} ind={ind} />
})}
<hr />
{CompletedToDos.length}/{todoArr.length} are
completed
</div>
</div>
</>
}

9. ToDo.js
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: todoObj.isCompleted ? 'line-
through' : 'none' }}>
{todoObj.text}
</span>  
<button onClick={() =>
{ deleteMyTodo(todoObj.id) }}>DELETE</button>  
<button onClick={() =>
{ toggleMyTodo(todoObj.id) }}>TOGGLE</button>  
</li>
</>
}
10. AddToDo.js
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(myRef1.current.value);
dispatch(actionObj);
myRef1.current.value = '';
};
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 }) => {
console.log("child render");
return (
<>
<h2>My Todos</h2>
{todos.map((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>
{todos.map((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) => {
console.log("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);
this.state = { 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 (this.state.hasError) {
return <h2>Something went wrong, Component cann't be loaded </h2>
} else {
// Normally, just render children
return this.props.children;
}
}
}

import React, { Component } from 'react'

export class BuggyCounter extends Component {
constructor(props) {
super(props);
this.state = { counter: 0 };
}
increment = () => {
this.setState({ counter: this.state.counter + 1 });
}
render() {
if (this.state.counter === 5) {
// Simulate a JS error
throw new Error('I crashed!');
}
return <>
<h1>Count is : {this.state.counter}</h1>
<button onClick={this.increment}>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 index.html
<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 ReactDOM.createPortal(
<div style={styles.overlay}>
<div style={styles.modal}>
{children}
</div>
</div>,
document.getElementById('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 Sample Programs
No ratings yet
React Sample Programs
12 pages
FSD 2 Unit 2
No ratings yet
FSD 2 Unit 2
27 pages
Unit 2
No ratings yet
Unit 2
46 pages
React Fullnotes
No ratings yet
React Fullnotes
44 pages
React Props and State Descriptive (21-11-2023)
No ratings yet
React Props and State Descriptive (21-11-2023)
18 pages
React Props and State Subjective
No ratings yet
React Props and State Subjective
10 pages
Unit 6 ReactJS
No ratings yet
Unit 6 ReactJS
19 pages
WDF Exercises
No ratings yet
WDF Exercises
26 pages
React Bootcamp
No ratings yet
React Bootcamp
5 pages
React
No ratings yet
React
29 pages
Unit V React
No ratings yet
Unit V React
38 pages
Harry React CheatSheet
No ratings yet
Harry React CheatSheet
40 pages
React Cheatsheet
No ratings yet
React Cheatsheet
16 pages
Veeresh FSD Assignment 2
No ratings yet
Veeresh FSD Assignment 2
24 pages
2 Cde
No ratings yet
2 Cde
6 pages
React Note 1
No ratings yet
React Note 1
10 pages
React Basics for Developers
No ratings yet
React Basics for Developers
9 pages
Delightful React Code and Sketches
100% (1)
Delightful React Code and Sketches
90 pages
Component Creation Lab
No ratings yet
Component Creation Lab
10 pages
Chapter 7 Updated
No ratings yet
Chapter 7 Updated
39 pages
Loogbook
No ratings yet
Loogbook
13 pages
React Basics
No ratings yet
React Basics
16 pages
React Js Cheat Sheet
100% (1)
React Js Cheat Sheet
280 pages
Awtsangeej
No ratings yet
Awtsangeej
30 pages
Unit 2 Reactjs
No ratings yet
Unit 2 Reactjs
86 pages
React Tutorial - Beginner To Advanced
No ratings yet
React Tutorial - Beginner To Advanced
30 pages
Reactjs Code in Vs Examples
No ratings yet
Reactjs Code in Vs Examples
20 pages
React.js Basics and Setup Guide
No ratings yet
React.js Basics and Setup Guide
30 pages
React 2
No ratings yet
React 2
9 pages
React Ans Key
No ratings yet
React Ans Key
21 pages
React Js
No ratings yet
React Js
58 pages
React JS Cheat Sheet & Guide
100% (1)
React JS Cheat Sheet & Guide
101 pages
Unit1 - Introduction To React - Js
No ratings yet
Unit1 - Introduction To React - Js
28 pages
React-Dev-Learn
No ratings yet
React-Dev-Learn
17 pages
Components in REACT
No ratings yet
Components in REACT
21 pages
ReactJS Developer Guide
100% (2)
ReactJS Developer Guide
302 pages
CS142 Project 4 - Page Generation With ReactJS Bai Thuc Hanh 4
No ratings yet
CS142 Project 4 - Page Generation With ReactJS Bai Thuc Hanh 4
5 pages
React JS 1
No ratings yet
React JS 1
28 pages
React-Dev-Learn
No ratings yet
React-Dev-Learn
17 pages
Unit 2
No ratings yet
Unit 2
11 pages
Awt Code Nah
No ratings yet
Awt Code Nah
25 pages
Section 2 - Unit 2 React JS
No ratings yet
Section 2 - Unit 2 React JS
41 pages
React Native 10
No ratings yet
React Native 10
83 pages
React Js Lab Final
No ratings yet
React Js Lab Final
42 pages
React 2
No ratings yet
React 2
19 pages
? All-In-One React - Js Guide For Students & Developers?
No ratings yet
? All-In-One React - Js Guide For Students & Developers?
48 pages
Unit 3 Class Notes
No ratings yet
Unit 3 Class Notes
36 pages
React Cheatsheet Zero To Mastery V1.02
100% (1)
React Cheatsheet Zero To Mastery V1.02
36 pages
React Web Dev Guide
No ratings yet
React Web Dev Guide
7 pages
FST Lab Programs
No ratings yet
FST Lab Programs
30 pages
React Notes 2
No ratings yet
React Notes 2
122 pages
React-Basics - React-Quick-Reference - MD at Master Learning-Zone - React-Basics GitHub
No ratings yet
React-Basics - React-Quick-Reference - MD at Master Learning-Zone - React-Basics GitHub
10 pages
Programs
No ratings yet
Programs
14 pages
React Research
No ratings yet
React Research
21 pages
React.js Core Concepts Guide
100% (2)
React.js Core Concepts Guide
33 pages
React
No ratings yet
React
13 pages
11 ReactJS
No ratings yet
11 ReactJS
26 pages
React JS Update V2
No ratings yet
React JS Update V2
32 pages
Invoicegopro
No ratings yet
Invoicegopro
1 page
Day 29 Git
No ratings yet
Day 29 Git
6 pages
Day 32 EJS
No ratings yet
Day 32 EJS
1 page
Day 28 Terminal
No ratings yet
Day 28 Terminal
4 pages
How People Cheat in Interviews Without Being Caugh
No ratings yet
How People Cheat in Interviews Without Being Caugh
5 pages
Nodejs Notes
No ratings yet
Nodejs Notes
62 pages
React Notes by Nareshit
No ratings yet
React Notes by Nareshit
48 pages
Java Interview Questions Guide
No ratings yet
Java Interview Questions Guide
25 pages
Java Try-Catch Exception Handling
No ratings yet
Java Try-Catch Exception Handling
50 pages
Manual 11 - Classes & Objects (OOP) in Python
No ratings yet
Manual 11 - Classes & Objects (OOP) in Python
6 pages
SIT232 Programming Project 1
No ratings yet
SIT232 Programming Project 1
10 pages
Rajshree ITR
No ratings yet
Rajshree ITR
21 pages
Chapter 3.1-3.4
No ratings yet
Chapter 3.1-3.4
14 pages
C & C++ Interview Questions
No ratings yet
C & C++ Interview Questions
27 pages
Mastering Arduinojson 6: Efficient Json Serialization For Embedded C++
No ratings yet
Mastering Arduinojson 6: Efficient Json Serialization For Embedded C++
54 pages
Project Program Question 4
No ratings yet
Project Program Question 4
7 pages
Intro To Java Programming Topic 2 3
No ratings yet
Intro To Java Programming Topic 2 3
20 pages
Java How To Program Early Objects 10th Edition Deitel Test Bank Instant Download
100% (17)
Java How To Program Early Objects 10th Edition Deitel Test Bank Instant Download
27 pages
Java Lab File
No ratings yet
Java Lab File
26 pages
Kotlin Ultimo Salto Handson
No ratings yet
Kotlin Ultimo Salto Handson
23 pages
MQ
No ratings yet
MQ
197 pages
Data Structures & Algorithm in Java - Robert Lafore - PPT
No ratings yet
Data Structures & Algorithm in Java - Robert Lafore - PPT
682 pages
C++ For Java Programmers PDF
100% (5)
C++ For Java Programmers PDF
290 pages
Ch05 Structural Modeling 2025- 學員版
No ratings yet
Ch05 Structural Modeling 2025- 學員版
40 pages
CS193D Exam Solutions
No ratings yet
CS193D Exam Solutions
19 pages
Where Can Buy (Ebook PDF) Programming Logic & Design Comprehensive 9th Edition Ebook With Cheap Price
100% (5)
Where Can Buy (Ebook PDF) Programming Logic & Design Comprehensive 9th Edition Ebook With Cheap Price
41 pages
Comprog 2 Finals
0% (1)
Comprog 2 Finals
12 pages
Exercises in Programming Style 2nd Edition Cristina Videira Lopes PDF Download
100% (5)
Exercises in Programming Style 2nd Edition Cristina Videira Lopes PDF Download
59 pages
Javascript Objects
No ratings yet
Javascript Objects
37 pages
Core Java Notes: Chapter-1, 2,3 Features of JAVA Environment
No ratings yet
Core Java Notes: Chapter-1, 2,3 Features of JAVA Environment
31 pages
Creating Events in Delphi 6
No ratings yet
Creating Events in Delphi 6
32 pages
M.tech. (ICT) Part I (Semester I & II)
No ratings yet
M.tech. (ICT) Part I (Semester I & II)
22 pages
Intermediate Code Generation
100% (1)
Intermediate Code Generation
42 pages
IPA - Practice Question and Ans
85% (13)
IPA - Practice Question and Ans
29 pages
Java Syllabus
No ratings yet
Java Syllabus
26 pages
Access Modifiers Interview Questions
No ratings yet
Access Modifiers Interview Questions
4 pages