React Js

React Js

Syllabus:

➢ Components
➢ Multiple Components
➢ State&Props
➢ Events&refs
➢ Pure Components
➢ Life cycle Hooks
➢ Unit Test Cases
➢ Introducton to Redux
➢ Multiple Reducers
➢ Integration of react and redux
➢ Saga Middleware
➢ Thunk Middleware
➢ Single Page Applications
➢ Lazy Loading
➢ Routing Parameters in SPA
➢ Crud Operations(MYSQL)
➢ Mini Project(MYSQL-MSSQL-MONGODB)
➢ Crud Operations(Thunk-Middleware)
➢ Mini project(Saga-Middleware)
➢ Server Files(MYSQL-MSSQL-MONGODB)
 React Js

Commands

➢ Create the React application

Create-react-app <application-name>

➢ Switch to project

Cd <project-name>

➢ Run the Project

yarn start

➢ Run the server file

Node <server [Link]>
➢ Download node modules
yarn add <module name1> <module name2>… --save
➢ Download bootstrap ,react bootstrap,material-ui
yarn add bootstrap react-bootstrap @material-ui --save
 React Js

Introduction

✓ React is the UI library.

✓ React library given by facebook.
✓ React acting as UI Layer in web applications.
✓ ReactJS can interact with the Angular,VueJS,.....
✓ we will develop ReactJS Applications by using JSX.
✓ "JSX" stands for JavaScript + XML.
✓ in general, browsers won't understand XML.
✓ so, we must convert XML to Equalent JavaScript.
✓ React simplifies the Complex UI with the help of
Components.
✓ React Applications are Component Based Applications.
✓ React Components are Reusable.
✓ "babel" is the tool used to convert the XML to Equalent
JavaScript.
✓ "React" Applications are faster applications, because of
virtual DOM.

ReactJS Environmental Setup

1) download and install NodeJS

➢ React Installation Depending on Node Server.

➢ "npm" is the tool available in NodeJS, helps to install the
React.
➢ "npm" stands for node packaging manager.

website : [Link]

file : [Link]
 React Js

2) install yarn tool

➢ "yarn" tool provided by facebook

➢ "yarn" tool used to download the libraries.
➢ we will install yarn tool by using command.

> npm install -g yarn@latest

- "npm" stands for node packaging manager

- "-g" stands for global installation

3) install "create-react-app" tool

➢ "create-react-app" tool used to create the "react

applications"
➢ "create-react-app" tool provided by facebook.
➢ we will install "create-react-app" tool by using npm.

> npm install -g create-react-app

steps to create the react applications

1) create the directory

Ex. Demo

2) create the react application

> create-react-app first-app

- where "first-app" is the react application

3) switch to react application

> cd first-app

4) execute the react application

> yarn start

 React Js

- by default react application running on port no.3000

Directory Structure

> create-react-app first-app

node_modules

➢ node_modules containes libraries.

➢ these libraries helps to execute the react applications.

public/[Link]

➢ this template is the main template.

➢ main template containes DOM Element(div) whose id is
"root".
➢ we will manipulate above DOM Element with the help of react
library.

public/[Link]

o /[Link]
o /[Link]
 React Js

➢ these logos helps to execute the react applications in all

devices with clear clarity images.

public/[Link]

➢ To create shortcut icons on devices screens, we must

configure the app details in [Link] file.
➢ we will create shortcut icons for eazily accessing.

public/[Link]

➢ it is used to define secuirity rules to applications.

src

➢ it is used to deploy the applications resorces

Ex. Components,style sheets,images,audio files,video files

src/[Link]

[Link]

[Link]

➢ App compoennt is the default component.

➢ "[Link]" file is the default style sheet for App
Component.
➢ "[Link]" file is the Testing file for the App
Component.

src/[Link]

➢ this file is the entry file of react application.

➢ ReactDOM is the predefined class in react library,helps to
render the particular component to DOM Element.
 React Js

src/[Link]

➢ this file used to develop the mobile applications.

src/[Link]

➢ this file helps to write the unit test cases.

[Link]

➢ [Link] file used to download the 3rd party

libraries.

Ex.

redux

redux-thunk

redux-saga

axios

[Link]

➢ this file is the configuration file of yarn tool

 React Js

Chapter-1(Components)
➢ Simple "JSX Class" behaves like Component.
➢ React Applications are Component Based Applications.
➢ we can create more than one Component.
➢ These Components are Reusable.
➢ Because of Components, React Simplifies the Complex UI.

React Offers Two Types of Components.

1) Stateless Components (Functional Components)

2) Stateful Components (Class Components)

Stateful Components

➢ Simple JSX Class behaves like Stateful Component.

➢ Stateful Components have so many advantages Compared to
Stateless Components.
➢ Stateful Components offers "life cycle hooks", whereas
Stateless Components wont offers.
➢ Stateful Components offers "state" object to store
Component data.

1) create the react project

> create-react-app first-app

2) switch to react project

> cd first-app

3) add the react bootstrap

➢ "react-bootstrap" is the library provided by facebook.

 React Js

➢ "react-bootstrap" is used to create the Rich

UI(Components).

> yarn add react-bootstrap bootstrap --save

4)add the related CDN'S provided by facebook in "[Link]"

<script
src="[Link]
crossorigin></script>

<script src="[Link]
[Link]" crossorigin></script>

<script src="[Link]
[Link]" crossorigin></script>

<link rel="stylesheet"
href="[Link]
[Link]"integrity="sha384-
9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk
"crossorigin="anonymous"/>

5) create the Stateful Component

Directory Structure

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

first-app

src

[Link]

[Link]

*******************************************************
 React Js

[Link]

import React, { Component } from "react";

import Alert from "react-bootstrap/Alert";

import Container from "react-bootstrap/Container";

import Button from "react-bootstrap/Button";

export default class First extends [Link]{

render(){

return(

<div>

<Container fluid>

{/* <Alert variant={'primary'}>Primary Alert</Alert>

<Alert variant={'info'}>Info Alert</Alert>

<Alert variant={'danger'}>Danger Alert</Alert>

<Alert variant={'dark'}>Dark Alert</Alert>

<Alert variant={'secondary'}>secondary Alert</Alert>

<Alert variant={'warning'}>Warning Alert</Alert>

<Alert variant={'light'}>light Alert</Alert>

<Alert variant={'success'}>success Alert</Alert>

*/}

{/*
{['primary','info','danger','success','dark'].map((element,index
)=>(
 React Js

<Alert variant={element}>Alert</Alert>

))} */}

<Alert variant={'danger'}>

<[Link]>Heading</[Link]>

<p>Ea dolores voluptua dolor eos sadipscing et ipsum lorem

gubergren, no et diam nonumy nonumy dolores, takimata rebum sed
duo stet magna, clita tempor amet clita sea amet, ut voluptua
consetetur at et sed kasd, at eirmod eirmod sit at diam. Est sed
ut no justo nonumy. Invidunt elitr amet.</p>

<Button>Learn More</Button>

</Alert> </Container>

</div>

) }};

[Link]

import React from 'react';

import ReactDOM from 'react-dom';

import './[Link]';

import App from './App';

import First from "./First";

import * as serviceWorker from './serviceWorker';

[Link](

<First />,

[Link]('root'));
 React Js

// unregister() to register() below. Note this comes with some

pitfalls.

[Link]();

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

Stateless Components

➢ in functional level components, we can't define state.

➢ in functional level components, everything we must define.
➢ in functional level components, no life cycle hooks to
handle the applications

1) create the react project

> create-react-app first-app

2) switch to react project

> cd first-app

3) create the Stateless Component

Directory Structure

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

first-app

src

[Link]

[Link]

[Link]

*******************************************************
 React Js

[Link]

import React,{ Component } from "react";

import User from "./User";

export default class App extends [Link]{

render(){

return(

<div>

<User key1="welcome to">NareshIT</User>

<User key1="18.x version of">ReactJS</User>

<User key1="popular database is ">MongoDB</User>

</div>

};

};

[Link]

import React from "react";

let User = (props)=>{

return (<div>{props.key1} {[Link]}</div>);

};

export default User;

 React Js

[Link]

import React from 'react';

import ReactDOM from 'react-dom';

import './[Link]';

import App from './App';

import * as serviceWorker from './serviceWorker';

[Link](

<[Link]>

<App />

</[Link]>,

[Link]('root')

);

// If you want your app to work offline and load faster, you can
change

// unregister() to register() below. Note this comes with some

pitfalls.
 React Js

Chapter-2(Multiple-Components)

1) create the react application

> create-react-app demo-app

2) switch to react application

> cd demo-app

3) add the "material ui" library

➢ "material ui" library used to design the rich templates

"[Link]

yarn add @material-ui/core

yarn add @material-ui/icons

[Link]

<link rel="stylesheet"
href="[Link]
,700&display=swap" />
 React Js

<link rel="stylesheet"
href="[Link]
/>

<script src="[Link]
ui/core@latest/umd/[Link]"></script>

<script src="[Link]
ui/core@latest/umd/[Link]"></script>

4) create the Components

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

demo-app

src

[Link]

[Link]

[Link]

[Link]

[Link]

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

[Link]

import React,{ Component } from "react";

import Typography from '@material-ui/core/Typography';

import Avatar from "@material-ui/core/Avatar";

export default class FrontEnd extends [Link]{

 React Js

render(){

return(

<div>

<Typography variant="h5">ReactJS With React

Material UI</Typography>

<Avatar alt="Remy Sharp"

src="[Link] />

</div>

};

[Link]

import React,{ Component } from "react";

import Typography from '@material-ui/core/Typography';

export default class Server extends [Link]{

render(){

return(

<div>

<Typography variant="h5">Deno</Typography>

</div>

} };
 React Js

[Link]

import React,{ Component } from "react";

import Typography from '@material-ui/core/Typography';

export default class BackEnd extends [Link]{

render(){

return(

<div>

<Typography variant="h5">Azure</Typography>

</div>

};

[Link]

import React,{ Component } from "react";

import FrontEnd from "./FroneEnd";

import Server from "./Server";

import BackEnd from "./BackEnd";

export default class MernComponent extends [Link]{

render(){

return(

<div>
 React Js

<FrontEnd />

<Server />

<BackEnd />

</div>

};

[Link]

import React from 'react';

import ReactDOM from 'react-dom';

import './[Link]';

import App from './App';

import MernComponent from "./MernComponent";

import * as serviceWorker from './serviceWorker';

[Link](

<MernComponent />,

[Link]('root')

);

// If you want your app to work offline and load faster, you can
change
 React Js

// unregister() to register() below. Note this comes with some

pitfalls.

// Learn more about service workers: [Link]

[Link]();

***************************************
 React Js

Passing the Data from Parent to SubChilds:

1) create the react project

> create-react-app data-app

2) switch to react project

> cd data-app

3) create the Components

Directory Structure

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

data-app
src
[Link]
[Link]
[Link]
[Link]

*******************************************************
 React Js

[Link]

import React,{ Component } from "react";

import Child from "./Child";

export default class Parent extends [Link]{

constructor(){

super();

[Link] = {

data : "welcome to reactjs"

render(){

return(

<div>

<Child key1={[Link]}/>

</div>

};

[Link]

import React,{ Component } from "react";

import Subchild from "./Subchild";

 React Js

export default class Child extends [Link]{

constructor(){

super();

[Link] = {

data : "Material UI"

render(){

return(

<div>

<Subchild {...[Link]}
key2={[Link]}/>

</div>

};

[Link]

import React,{ Component } from "react";

export default class Subchild extends [Link]{

render(){

return(

<div>
 React Js

<h1>{[Link].key1}......{[Link].key2}</h1>

</div>

}}

[Link]

import React from 'react';

import ReactDOM from 'react-dom';

import './[Link]';

import App from './App';

import Parent from "./Parent";

import * as serviceWorker from './serviceWorker';

[Link](

<Parent />,

[Link]('root')

);

// If you want your app to work offline and load faster, you can
change

// unregister() to register() below. Note this comes with some

pitfalls.
 React Js

// Learn more about service workers: [Link]

[Link]();

***********************************
 React Js

Get The Data from URL/SERVER:

1) create the react application

> create-react-app get-ex

2) switch to react application

> cd get-ex

3) add the axios module

yarn add axios --save

4) create the Components

Directory Structure

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

Get-ex

src

[Link]

[Link]

*************************************************
 React Js

[Link]

import React,{ Component } from "react";

import axios from "axios";

export default class Countries extends [Link]{

constructor(){

super();

[Link] = {

arr : []

};

componentDidMount(){

[Link]("[Link]

.then((posRes)=>{

[Link]({

arr : [Link]

})

},(errRes)=>{

[Link](errRes);

});

};
 React Js

render(){

return(

<div>

<table border="1"

cellPadding="10px"

cellSpacing="10px"

align="center">

<thead style={{backgroundColor:"grey"}}>

<tr>

<th>SNO</th>

<th>Name</th>

<th>Capital</th>

<th>NativeName</th>

<th>Population</th>

<th>Flag</th>

</tr>

</thead>

<tbody>

{[Link]((element,index)=>(

<tr key={index}>

<td>{index+1}</td>

<td>{[Link]}</td>
 React Js

<td>{[Link]}</td>

<td>{[Link]}</td>

<td>{[Link]}</td>

<td><img width="100px"
height="50px" src={[Link]}></img></td>

</tr>

))}

</tbody>

</table>

</div>

};

[Link]

import React from 'react';

import ReactDOM from 'react-dom';

import './[Link]';

import App from './App';

import Countries from "./Countries";

import * as serviceWorker from './serviceWorker';

[Link](
 React Js

<Countries />,

[Link]('root')

);

// If you want your app to work offline and load faster, you can
change

// unregister() to register() below. Note this comes with some

pitfalls.

// Learn more about service workers: [Link]

[Link]();
 React Js

Chapter-3(State&Props)

➢ State is used to store the Component data.

➢ "state" is the predefined property in reactjs.
➢ Recomended place to define "state" is constructor.
➢ constructor will execute at booting time.
➢ React components has a built-in state object.
➢ The state object is where you store property values that
belongs to the component.
➢ When the state object changes, the component re-renders.

1) create the react project

> create-react-app first-app

2) switch to react project

> cd first-app

3) create the Stateless Component

Directory Structure

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

first-app
src
[Link]
[Link]

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

[Link]

import React from 'react';

 React Js

export default class App extends [Link]

{
constructor()
{
super();
[Link]={
boolean:"true",
error:11001,
data:"data from server soon .......!",
"products":[{"p_id":111,"p_name":"p_one","p_cost":10000},
{"p_id":222,"p_name":"p_two","p_cost":20000},
{"p_id":333,"p_name":"p_three","p_cost":30000},
{"p_id":444,"p_name":"p_four","p_cost":40000},
{"p_id":555,"p_name":"p_five","p_cost":50000}]

}
}
render(){
return(
<div>
<table border="1"
cellPadding="10px"
cellSpacing="10px"
align="center">
<thead style={{backgroundColor:"grey"}}>
<tr>
<th>SNO</th>
<th>PID</th>
<th>PNAME</th>
<th>PCOST</th>
 React Js

</tr>
</thead>
<tbody>
{[Link]((element,index)=>
(
<tr>
<td>{index+1}</td>
<td>{element.p_id}</td>
<td>{element.p_name}</td>
<td>{element.p_cost}</td>
</tr>
))}
</tbody>
</table>
<h1>{[Link]([Link])}</h1>
<h1>{[Link]}</h1>
<h1>{[Link]}</h1>
</div>
)
}
}
[Link]

import React from 'react';

import ReactDOM from 'react-dom';

import './[Link]';

import App from './App';

import * as serviceWorker from './serviceWorker';

 React Js

[Link](

<App />,

[Link]('root')

);

// If you want your app to work offline and load faster, you can
change

// unregister() to register() below. Note this comes with some

pitfalls.

// Learn more about service workers: [Link]

[Link]();

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

setState()

➢ To change a value in the state object, use

the [Link]() method.
➢ When a value in the state object changes, the component will
re-render, meaning that the output will change according to
the new value(s).

1) create the react project

> create-react-app first-app

2) switch to react project

> cd first-app
 React Js

3) create the Stateless Component

Directory Structure

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

first-app

src

[Link]

[Link]

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

[Link]

import React,{ Component } from "react";

export default class App extends [Link]{
constructor(){
super();
[Link] = {
"sub" : "Angular9"
};
};
render(){
return(
<div>
<h1>Sub:<span style={{color:'red'}}>{[Link]}</span></h1>
<br></br>
<button onClick={[Link]}>Change</button>
</div>
)
 React Js

};
myFun = ()=>{
[Link]({
sub : "Angular10"
});
};
};

[Link]

import React from 'react';

import ReactDOM from 'react-dom';

import './[Link]';

import App from './App';

import * as serviceWorker from './serviceWorker';

[Link](

<App />,

[Link]('root')

);

// If you want your app to work offline and load faster, you can
change

// unregister() to register() below. Note this comes with some

pitfalls.

// Learn more about service workers: [Link]

 React Js

[Link]();

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

Props:

➢ "props" is the predrfined property in react library

➢ "props" used to receive the data from 3rd party resources
(Components,Redux,Saga,Thunk,.....)
➢ “Props” is a special keyword in React, which stands for
properties and is being used for passing data from one component
to another.
➢ “props” are basically kind of global variable or object.
➢ The data in states and props are used to render the Component
with dynamic data.
➢ Props are passed to components via HTML attributes.
➢ We can say, props are immutable (unable to be changed).

1) create the react project

> create-react-app first-app

2) switch to react project

> cd first-app

3) create the Stateless Component

Directory Structure
 React Js

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

first-app

src

[Link]

[Link]

[Link]

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

[Link]-:

➢ In this project, we will create two components.

➢ [Link] is the first component.
➢ We will share the data from [Link](first component) to
[Link](second component) by using state() method.
➢ Here we will call the second component.

Code:

import React,{ Component } from "react";

import Second from "./Second";

export default class First extends [Link]{

constructor(){

super();

[Link] = {

"data" : "React",

"version" : 16.8,
 React Js

"flag" : true,

"obj" : {"cost":100000},

"arr" : [{"eno":111,"ename":"e_one","esal":10000},

{"eno":222,"ename":"e_two","esal":20000},

{"eno":333,"ename":"e_three","esal":30000},

{"eno":444,"ename":"e_four","esal":40000},

{"eno":555,"ename":"e_five","esal":50000}]

};

render(){

return(

<div>

<Second key1={[Link]}

key2={[Link]}

key3={[Link]}

key4={[Link]}

key5={[Link]}/>

</div>

};

};
 React Js

[Link]-:

➢ This is our second component in this project.

➢ We will receive the data from [Link] by using a
predefined keyword “props”.

Code:

import React,{ Component } from "react";

export default class Second extends [Link]{

render(){

return(

<div>

<table border="1"

cellPadding="10px"

cellSpacing="10px"

align="center">

<thead style={{backgroundColor:"grey"}}>

<tr>

<th>SNO</th>

<th>ENO</th>

<th>ENAME</th>

<th>ESAL</th>

</tr>
 React Js

</thead>

<tbody>

{[Link]((element,index)=>(

<tr>

<td>{index+1}</td>

<td>{[Link]}</td>

<td>{[Link]}</td>

<td>{[Link]}</td>

</tr>

))}

</tbody>

</table>

<h1>{[Link]([Link].key4)}</h1>

<h1>{[Link]([Link].key3)}</h1>

<h1>{[Link].key2}</h1>

<h1>{[Link].key1}</h1>

</div>

};

[Link]-:
 React Js

➢ It is the registration file of react project.

➢ Here we will register our first component.

import React from 'react';

import ReactDOM from 'react-dom';

import './[Link]';

import App from './App';

import First from "./First";

import * as serviceWorker from './serviceWorker';

[Link](

<[Link]>

<First />

</[Link]>,

[Link]('root')

);

[Link]();
 React Js

OutPut:

Difference Between States and Props in react JS-:

state props
1. State is variables, but directly initialized 1. Props are owned by a parent
and managed by the component. component
2. A state is a variable which exists inside 2. props are read-only in the child
a component, that cannot be accessed component that receives from
and modified outside the component parent component. However, call
and can only be used inside the back functions can also be
component. Works very similarly to a passed, which can be executed
variable that is declared inside a inside the child to initiate an
function that cannot be accessed update.
outside the scope of the function in 3. props are immutable (unable to be
normal Javascript. changed).
3. The component itself will update the 4. Props” is a special keyword
state using the setState() function. in React, which stands for
4. States are declared inside the properties and is being used for
constructor via super() method. passing data from one component
to another.
 React Js

Chapter-4(Events&Refs)

Events:

1) create the react project

> create-react-app events-app

2) switch to react project

> cd events-app

3) create the Event Component

Directory Structure

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

events-app

src

[Link]

[Link]

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

[Link]

// import React,{ Component } from "react";

// export default class Events extends [Link]{

// fun_one = ()=>{

// [Link]("event without parameters");

 React Js

// };

// render(){

// return(

// <div>

// <button
onClick={this.fun_one}>ClickMe</button>

// </div>

// )

// }

// };

// import React,{ Component } from "react";

// export default class Events extends [Link]{

// fun_one = (arg1,arg2)=>{

// if(arg1 == "admin" && arg2 == "admi"){

// alert("Login Success");

// }else{

// alert("Login Fail");

// }

// };

// render(){
 React Js

// return(

// <div>

// <button onClick={ ()=>{

this.fun_one("admin","admin") } }>ClickMe</button>

// </div>

// )

// };

// };

[Link]

import React from 'react';

import ReactDOM from 'react-dom';
import './[Link]';
import App from './App';
import Events from "./Events";
import * as serviceWorker from './serviceWorker';

[Link](
<Events />,
[Link]('root')
);

// If you want your app to work offline and load faster, you can
change
// unregister() to register() below. Note this comes with some
pitfalls.
// Learn more about service workers: [Link]
[Link]();
 React Js

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

Refs:

"ref" is the attribute used to assign logical name to DOM Elements.

1) create the react project

> create-react-app events-app

2) switch to react project

> cd events-app

3) add axios module

> yarn add axios -–save

4) create the Event Component

Directory Structure

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

events-app

src

[Link]

[Link]

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

[Link]

import React,{ Component } from "react";

 React Js

export default class Events extends [Link]{

constructor(){

super();

[Link] = {

login : ""

};

};

render(){

return(

<div>

<fieldset>

<legend>Login Form</legend>

<input type="text"

ref="uname"

placeholder="User Name"></input>

<br></br><br></br>

<input type="password"

ref="upwd"

placeholder="User Password"></input>
 React Js

<br></br><br></br>

<button onClick={[Link]}>Login</button>

<br></br><br></br>

<h1>{[Link]}</h1>

</fieldset>

</div>

login = ()=>{

if( [Link] == "admin" &&

[Link] == "admin"){

[Link]({

login : "success"

})

}else{

[Link]({

login : "fail"

})

}
 React Js

};

[Link]

import React from 'react';

import ReactDOM from 'react-dom';
import './[Link]';
import App from './App';
import Events from "./Events";
import * as serviceWorker from './serviceWorker';

[Link](
<Events />,
[Link]('root')
);

// If you want your app to work offline and load faster, you can
change
// unregister() to register() below. Note this comes with some
pitfalls.
// Learn more about service workers: [Link]
[Link]();

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

Http Post Request:

1) create the react project

> create-react-app events-app

2) switch to react project

 React Js

> cd events-app

3) create the Event Component

Directory Structure

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

events-app

src

[Link]

[Link]

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

[Link]

import React,{ Component } from "react";

import axios from "axios";

export default class Events extends [Link]{

constructor(){

super();

[Link] = {

res : {}

};

render(){

return(
 React Js

<div>

<input type="text"

ref="msg"

placeholder="Enter Message"></input>

<button onClick={this.fun_one}>Change</button>

<h1>{[Link]([Link])}</h1>

</div>

};

fun_one = ()=>{

[Link]("[Link]
[Link]/test/uppercase",{"message":[Link]
lue})

.then((posRes)=>{

[Link]({

res : [Link]

})

},(errRes)=>{

[Link](errRes);

});

};
 React Js

[Link]

import React from 'react';

import ReactDOM from 'react-dom';
import './[Link]';
import App from './App';
import Events from "./Events";
import * as serviceWorker from './serviceWorker';

[Link](
<Events />,
[Link]('root')
);

// If you want your app to work offline and load faster, you can
change
// unregister() to register() below. Note this comes with some
pitfalls.
// Learn more about service workers: [Link]
[Link]();

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

Sharing the data from class level component to

functional level component

1) create the react project

> create-react-app demo-app

2) switch to react project

 React Js

> cd demo-app

3) create the Components

Directory Structure

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

demo-app

src

[Link] (class level) (state)

[Link] (functional level) (props)

[Link]

[Link]

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

[Link]

import React,{ Component } from "react";

import Comptwo from "./Comptwo";

export default class Compone extends [Link]{

constructor(){

super();

[Link] = {

data1 : "ReactJS",

data2 : "Material UI",

data3 : "Deno",
 React Js

data4 : "MongoDB"

};

};

render(){

return(

<div>

<Comptwo s_o={[Link].data1}

s_t={[Link].data2}

s_three={[Link].data3}

s_f={[Link].data4}/>

</div>

};

[Link]

import React from "react";

import "./[Link]"

const Comptwo = (props)=>{

return(

<div>
 React Js

<h2 className="sub_one">{props.s_o}</h2>

<h2>{props.s_t}</h2>

<h2>{props.s_three}</h2>

<h2>{props.s_f}</h2>

</div>

};

export default Comptwo;

[Link]

.sub_one{

color: white;

background : linear-gradient(180deg,red,black);

text-align: center;

padding: 10px;

margin: 10px;

border-radius: 20px;

box-shadow: 0px 0px 10px palevioletred;

[Link]

import React from 'react';

import ReactDOM from 'react-dom';

 React Js

import './[Link]';

import App from './App';

import Functional from "./Functional";

import Compone from "./Compone";

import Demo1 from "./Demo1";

import * as serviceWorker from './serviceWorker';

[Link](

<compone />,

[Link]('root')

);

// If you want your app to work offline and load faster, you can
change

// unregister() to register() below. Note this comes with some

pitfalls.

// Learn more about service workers: [Link]

[Link]();

**********************************************
 React Js

Chapter-5(Pure-components)
Just like Pure Functions in JavaScript, a React component is
considered a Pure Component if it renders the same output for the
same state and props value. React provides the Pure Component base
class for these class components. Class components that extend the
[Link] class are treated as pure components.

It is the same as Component except that Pure Components take care

of shouldComponentUpdate by itself, it does the shallow comparison
on the state and props data. If the previous state and props data
is the same as the next props or state, the component is not Re-
rendered.

React Components re-renders in the following scenarios:

1. “setState” is called in Component

2. “props” values are updated

3. [Link]() is called

In the case of Pure Components, the React components do not

rerender blindly without considering the updated values of React
“props” and “state”. If updated values are the same as previous
values, render is not triggered.

Pure Components restricts Re-Rendering

Take the scenario below, in which we’re updating the component’s

state variable at a continuous interval of one second. With every
call to “setState”, we update the counter value to the same value.
 React Js

Here, setState is called and the value of “counter” is set to the

same value. When setState is called, the component is re-rendered.
In this scenario, the updated component view remains the same.
There is effectively no difference in the UI — the new values are
unchanged. Re-rendering, in this case, is an overhead.

In order to cater to this problem, React introduced Pure

Components. They compare the initial and final values for the state
and props variables. If there is no difference between the two,
they won’t trigger the re-rendering logic for the component.

class ImpureComponent extends [Link] {

Constructor ()
{ Super ();
[Link] = {
counter: 0
}

// The value of Counter is updated to same value during

continues interval
setInterval(() => {
[Link]({
counter: 0
});
}, 1000);
}
render() {

// This function wont be re-rendered in case when the new

state is same as previous
 React Js

return <b>Counter Value: {[Link]}</b>

}
}

Here, setState is called and the value of “counter” is set to the

same value. When setState is called, the component is re-rendered.
In this scenario, the updated component view remains the same.
There is effectively no difference in the UI — the new values are
unchanged. Re-rendering, in this case, is an overhead.

In order to cater to this problem, React introduced Pure

Components. They compare the initial and final values for the state
and props variables. If there is no difference between the two,
they won’t trigger the re-rendering logic for the component.

class ImpureComponent extends

[Link] { constructor() {
super(); [Link] = { counter:
0
}

// The value of Counter is updated to same value during

continues interval
setInterval(() => {
[Link]({
counter: 0
});
}, 1000);
}
render() {
 React Js

// This function wont be re-rendered in case when the new

state is same as previous
return <b>Counter Value: {[Link]}</b>
}
}

In the code above the component is inherited from

[Link], each time the state or props are updated it
compares the previous and next value — if the values are the same
the Render function is not triggered. Performance is improved by
not calling “render” recursively.

Conclusion

Pure Components are introduced for performance enhancement. You

can use this optimization to improve the performance of your
components

Example:

1) create the react project

> create-react-app demo-app

2) switch to react project

> cd demo-app

3) create the Components

Directory Structure
 React Js

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

demo-app

src

[Link] (state) (refresh 1 sec)

[Link] (props)

[Link]

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

[Link]

import React,{ Component,PureComponent } from "react";

import Demo2 from "./Demo2";

export default class Demo1 extends [Link]{

constructor(){

super();

[Link] = {

num : 1

};

};

render(){

[Link]( "Parent Render !!!");

return(
 React Js

<div>

<Demo2 key1={[Link]}/>

</div>

);

};

componentDidMount(){

setInterval(()=>{

[Link]({

num : [Link]()

})

},1000);

};

};

[Link]

import React from "react";

const Demo2 = (props)=>{

[Link]("child render");

return(

<div>{props.key1}</div>
 React Js

};

export default Demo2;

[Link]

import React from 'react';

import ReactDOM from 'react-dom';

import './[Link]';

import App from './App';

import Functional from "./Functional";

import Compone from "./Compone";

import Demo1 from "./Demo1";

import * as serviceWorker from './serviceWorker';

[Link](

<Demo1 />,

[Link]('root')

);

// If you want your app to work offline and load faster, you can
change

// unregister() to register() below. Note this comes with some

pitfalls.

[Link]();
 React Js

Chapter-6(Life-Cycle-Hooks)
• componentWillMount is executed before rendering, on both the
server and the client side.

• componentDidMount is executed after the first render only on

the client side. This is where AJAX requests and DOM or state
updates should occur. This method is also used for integration
with other JavaScript frameworks and any functions with delayed
execution such as setTimeout or setInterval. We are using it to
update the state so we can trigger the other lifecycle methods.

• componentWillReceiveProps is invoked as soon as the props are

updated before another render is called. We triggered it
from setNewNumber when we updated the state.

• shouldComponentUpdate should return true or false value. This

will determine if the component will be updated or not. This is
set to true by default. If you are sure that the component
doesn't need to render after state or props are updated, you
can return false value.

• componentWillUpdate is called just before rendering.

• componentDidUpdate is called just after rendering.

• componentWillUnmount is called after the component is unmounted

from the dom. We are unmounting our component in [Link].
 React Js

Example:

1) create the react project

> create-react-app demo-app

2) switch to react project

> cd demo-app

3) create the Components

Directory Structure

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

demo-app

src

[Link]
 React Js

[Link]

[Link]

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

[Link]

import React,{ Component } from "react";

import Child from "./Child";
export default class App extends [Link]{
constructor(){
super();
[Link]("parent constructor");
//constructor will execute at booting time
//constructor will execute only once
//it's recomended to define state
[Link] = {
name : "react"
};
};
componentWillMount(){
//after constructor componentWillMount will execute
//it will execute only once
//it is recomended to change initial state
//it is also recomened to set global parameters like "wi
ndow width", "window height",....
[Link]("parent componentWillMount");
if([Link]<600){
[Link]({
width : [Link]
})
 React Js

}
};
render(){
//it will execute immidiately after componentWillMount
//in general we will place presentation logic (JSX)
//render() is the mandatory life cycle hook
//when ever change detected in state/props automatically
this life cycle hook will execute
[Link]("parent render");
return(
<div>
{[Link]}
<br></br>
{[Link]}
<br></br><br></br>
<Child key1={[Link]}></Child>
<br></br><br></br>
<button onClick={[Link]}>Change</button>
</div>
)
};
changeSub = ()=>{
[Link]({
name : "reactjs"
});
};
/*execution flow
parent constructor
parent componentWillMount
parent render
 React Js

Child constructor
Child componentWillMount
Child render

//if state/props change detected

parent render
child render
*/

componentDidMount(){
//after render function componentDidMount will execute
//first priority goes to child component componentDidMou
nt() life cycle hooks
//in general, we will make rest api calls Ex. get reque
st
//it's recomended to change state
[Link]("parent componentDidMount");
};
/*
exuction flow
parent constructor
parent componentWillMount
parent render

Child constructor
Child componentWillMount
Child render

child componentDidMount
 React Js

parent componentDidMount
*/
componentWillReceiveProps(){
//if component receives the props, then this life cycl
e hook will execute
[Link]("parent componentWillReceiveProps");
};
/*

parent render
child componentWillReceiveProps
child render
*/

shouldComponentUpdate(){
//deciding life cycle hook on state change
//true -- change the state
//false - dont change state
[Link]("parent shouldComponentUpdate");
return true;
};
//before unmounting the component react library will execute
following life cycle hooks
//these life cycle hooks used to perform the clean up operat
ions
//Ex. nullifu the instance members
//Ex. empty the state
//Ex. empty the Props ,..........
componentWillUpdate(){
[Link]("parent componentWillUpdate");
 React Js

}
componentDidUpdate(){
[Link]("parent componentDidUpdate");
}
componentWillUnmount(){
[Link]("parent componentWillUnmount");
}
};

[Link]

import React,{ Component } from "react";

export default class Child extends [Link]{
constructor(){
super();
[Link]("child constructor");
};
componentWillMount(){
[Link]("child componentWillMount");
};
render(){
[Link]("child render");
return(
<div>
{[Link].key1}
</div>
)
};
componentDidMount(){
[Link]("child componentDidMount");
};
 React Js

componentWillReceiveProps(){
[Link]("child componentWillReceiveProps");
};
shouldComponentUpdate(){
[Link]("Child shouldComponentUpdate");
return false;
};
componentWillUpdate(){
[Link]("child componentWillUpdate");
}
componentDidUpdate(){
[Link]("child componentDidUpdate");
}
componentWillUnmount(){
[Link]("child componentWillUnmount");
}
};
[Link]

import React from 'react';

import ReactDOM from 'react-dom';

import './[Link]';

import App from './App';

import Functional from "./Functional";

import Compone from "./Compone";

import Demo1 from "./Demo1";

import * as serviceWorker from './serviceWorker';

 React Js

[Link](

<App />,

[Link]('root')

);

// If you want your app to work offline and load faster, you can
change

// unregister() to register() below. Note this comes with some

pitfalls.

// Learn more about service workers: [Link]

[Link]();

Output:
React Js
 React Js

Chapter-7(Unit Test Cases)

➢ Jest is the tool, used to write the unit test cases to "react"
and "vue" applications.
➢ we will install jest tool by using following command.
➢ yarn add react-test-renderer --save
➢ all the testing files have the ".[Link]" extension.
➢ we will test unit test cases by using "yarn test" or "jest"

Step 1:Create The React Application

>create-react-app test-app

Step 2:Download the modules

➢ yarn add react-test-renderer --save

Step 3:Create the target components

Directory Structure

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

Test-app

Src

[Link]

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

[Link]

import React from "react";

import App from "./App";

 React Js

//render() is the predefined function

//render() function used to get the reference of Component to

testing Environement

import { render } from "@testing-library/react";

//jest starts the execution from test() function

test("check msg in App component",()=>{

const { getByText } = render(<App />);

const status = getByText( /Learn React/i );

expect(status).toBeInTheDocument();

});

test("another sample test case",()=>{

const { getByText } = render(<App />);

const status = getByText(/Edit src [Link] and save to

reload/i);

expect(status).toBeInTheDocument();

});

Step 4:Excute the applicaton

>yarn test
 React Js

Result:
 React Js

Chapter-8(Introduction to Redux)

STATE MANAGEMENT:

• state management makes the state of application tangible

in the form of a data structure
• it makes ‘invisible’ state clearly visible for us and work
with.
• state management libraries provides the tools for
creating data structures, and updating when new actions
occur.
• with a state management system, to find out what the state
of our application is and we check our state data
structure.
• without a state management system, how do we know what
the state of our application is? We look at the DOM. We
can check DOM elements to see if they have certain
classes (‘active’, ‘error’), or to check whether certain
 React Js

elements exist.

WHAT IS REDUX:

• Redux is a predictable state container for JavaScript

applications. It helps to you write applications, run in
different environments and easy to test.
• and simply we called as Redux is a state management tool
• It is lightweight, so we don’t have to worry about it
making your application’s asset size bigger.

• Redux, the state of your application is kept in a store,

and each component can access any state that it needs
from this store.

Redux works mainly three principles:

➢ Application state is stored in a single object. Redux
stores state in a single JavaScript object to make it
easier to map out and pass data throughout the entire
application. Centralizing state in a single object
also make the process of testing and debugging faster.

➢ Application state is immutable. In redux, states cannot

be modified. The only way to change the state is to
provide an action. Actions are immutable JavaScript
objects that describes the state changes. Actions are
executed in an order to prevent race conditions.
➢ Reducers specify how the action transform the state.
Reducers are JavaScript functions that create a new state
with the given current state and action. They
centralizedata mutations and can act on all or part of
 React Js

the state. Reducers can also be combined and reused.

TERMINOLOGY OF REDUX :

➢ working of redux is simple. There is a central store that

holds the entire state of the application.

➢ Each component can access the stored state without having

to send down props from one component to another

➢ Components in redux

Actions

Store

Reducers

Dispatch

Subscribe

State

getstate()
 React Js

ACTIONS IN REDUX:
➢ Simply we call that actions are events.
➢ They are the only way we can send data from application
to Redux store. The data can be from user interactions,
API calls, or even form submissions.
➢ Actions are sent using the [Link]() method.
➢ Actions are plain JavaScript objects, and they must
have a type property to indicate the type of action to
be carried out.
➢ They must also have a payload that contains the
information that should be worked on the action.

STORE IN REDUX:
➢ The store holds the application state. There is only
one store in any Redux application.
➢ redux has one global store
➢ we can access the state stored, update the state, and
 React Js

register or unregister listeners via helper methods.

➢ The central idea of a Redux app is to separate the state
of the app from the app itself.
➢ The state of the app is stored in a store. Hence the
state of the app which is in the store.
➢ The state stored in the store is a simple JS object
with slices. As the state thus hierarchically contains
other structures it also called a state tree
➢ Actions performed on the state always return a new state,
hence state is very easy and predictable
➢ create redux store:

Redux comes with one predefined funtion that creates store,i.e

createstore

Syntax:
import { createStore } from 'redux';

const store = createStore();

REDUCERS IN REDUX:
➢ Reducers are a pure function in Redux, these Pure functions
are predictable.
➢ Reducers are the only way to change states in Redux.
➢ It is the only place where you can write logic and
calculations.
➢ reducers main job is to take “current state” and an ”
action “ and return the ”new state”
 React Js

➢ Reducer function will accept the previous state

of app and action being dispatched, calculate the
next state and returns the new object.
➢ Redux reducers work just like the function is pass to
Array, the main thing is they reduce is actions.

➢ They reduce a set of actions (over time) into a single state.

➢ The difference is that with Array’s reduce it happens all
at once, and with Redux, it happens over the lifetime of
our running app.

➢ The following few things should never be performed inside the

reducer:
- Mutation of functions arguments
- API calls & routing logic
- Calling non-pure function

The following is the syntax

of a reducer:

(state,action) => newState

getstate in redux:
➢ Returns the current state tree of your application. It
is equal to the last value returned by the store's
reducer.

➢ and getstate() returns current state tree of your application.

➢ It helps you retrieve the current state of your Redux store.
➢ The syntax for getState is as follows:
[Link]()
DISPATCH in REACT:
 React Js

• It allows to dispatch an action to change a state in your

application.
• Dispatch() is the only way to trigger a state change.
• The store's reducing function will be called with the
current getstate() result and the given action
synchronously.
• It return value will be considered the next state.
• It will be returned from getstate()from now on, and the
change listeners will immediately be notified.
• Simply dispatch is the one request to the store to perform a
specific actions.
• dispatch() is the function that belongs to the store,
which means the store not only holds the state of the app
it also operates as a dispatcher that dispatches commands.
• The syntax for dispatch is as follows:
[Link]({key :
'deposit'})

DISPATCH WORKING:
• we created store has a built-in function called dispatch
• then Call it with an action and Redux will call our
reducer with that action and then replace the state
with whatever your reducer returned.

SUBSCRIBE IN REACT:
• It helps to register a callback that Redux store will call
when an action has been dispatched.
• As soon as the Redux state has been updated, the
 React Js

view will re-render automatically.

• Adds a change listener. It will be called any time an action
is dispatched, and some part of the state tree may
potentially have changed. You may then call getstate()to
read the current state tree inside the callback.

• The subscriptions are snapshotted just before every

dispatch()call. If you subscribe or unsubscribe while the
isteners are being invoked, this will not have any effect
on the dispatch() that is currently in progress. However,
the next dispatch() call, whether nested or not, will use
a more recent snapshot of the subscription list.

• To unsubscribe the change listener, invoke the function returned

by subscribe.
ARCHITECTURE/FLOW OF REDUX:
➢ Redux follows the unidirectional data flow. It means that
application data will follow in one-way binding data
flow.
➢ As the application grows & becomes complex, it is hard to
reproduce issues and add new features if you have no control
over the state of your application. -
➢ Redux reduces the complexity of the code, by enforcing
the restriction on how and when state update can happen.
 React Js

• An action is dispatched when a user interacts with the

application.

• The root reducer function is called with the current state

and the dispatched action. The root reducer may divide the
task among smaller reducer functions, which ultimately
returns a new state.

• The store notifies the view by executing their callback

functions.

• The view can retrieve updated state and re-render again

REDUX – INSTALLATION:

• Before installing Redux, we have to install Nodejs .

• Below are the instructions that will help you install it.
You can skip these steps if you already have Nodejs
installed in your device.

• Website: [Link]
• You can check successful installation by opening the
command prompt and type “ node –v ”
• This will show you the latest version of Node in your system.
 React Js

• To install redux, follow the following steps:

➢ Run the following command in your command prompt
to install Redux.

npm install redux --save

(or)

yarn add redux –save

➢ To use Redux with react application, we need to

install an additional dependency as follows:
npm install react-redux --save
Example:

1) create the directory

ReduxEx

2) switch to ReduxEx

> cd ReduxEx

3) download the redux

> yarn add redux --save

4) create the redux architecture application

 React Js

Directory Structure

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

ReduxEx

[Link]

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

[Link]

const { createStore }= require("redux");

const initialState = {

bal : 5000

};

const reducer = (state=initialState,actions)=>{

const newState = {...state};

switch([Link]){

case "DEPOSIT":

[Link]+=[Link];

break;

case "WITHDRAW":

[Link]-=[Link];

break;

return newState;
 React Js

};

const store = createStore(reducer);

[Link](()=>{

[Link]([Link]());

});

[Link]({type:"DEPOSIT",value:5000});

[Link]({type:"DEPOSIT",value:5000});

[Link]({type:"DEPOSIT",value:5000});

[Link]({type:"WITHDRAW",value:1000});

[Link]({type:"DEPOSIT",value:5000});

[Link]({type:"WITHDRAW",value:10000});

Execute the above application by using following

command : node [Link]
Chapter-9(Integration of React and Redux)
1) create the react application

> create-react-app redux-ex

2) switch to react application

> cd redux-ex

3) download the libraries

 React Js

=> redux

=> react-redux

• "redux" library used to create the "redux application"

• "react-redux" used to integrate the "redux" to "react
application".

> yarn add redux react-redux --save

4) create the reducer

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

redux-ex

src

reducer

[Link]

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

5) create the "store" and make the availability to

"App" component with the help of "[Link]" file

6) create the App component

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

redux-ex

src

reducer

[Link]

[Link]
 React Js

[Link]

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

[Link]

const initialState = {

products : []

};

const reducer = (state=initialState,action)=>{

switch([Link]){

case "PRODUCTS":

return{

...state,

products:[

{"p_id":111,"p_name":"p_one","p_cost":10000},
{"p_id":222,"p_name":"p_two","p_cost":20000},
{"p_id":333,"p_name":"p_three","p_cost":30000},
{"p_id":444,"p_name":"p_four","p_cost":40000},

{"p_id":555,"p_name":"p_five","p_cost":50000}]

return state;

};

export default reducer;

 React Js

[Link]

import React,{ Component } from "react";

import { connect } from "react-redux";

class App extends [Link]{

render(){

return(

<div>

<button
onClick={[Link]}>Products</button>

<br></br>

<h6>{[Link]([Link])}</h6>

</div>

) };

};

//subscribe

const receive = (state)=>{

return{

products : [Link]

};

//dispatch

const send = (dispatch)=>{

 React Js

return{

getProducts : ()=>{ dispatch({type:"PRODUCTS"}) }

};

export default connect(receive,send)(App);

[Link]

import React from 'react';

import ReactDOM from 'react-dom';

import './[Link]';

import App from './App';

import * as serviceWorker from './serviceWorker';

//import reducer

import reducer from "./reducer/reducer";

//import Provider

//Provider used to make the availability of "store" to App

component

import { Provider } from "react-redux";

//import createStore function

//createStore function used to create the store object

import { createStore } from "redux";

//create the store

const store = createStore(reducer);

 React Js

[Link](

<Provider store={store}>

<App />

</Provider>,

[Link]('root')

);

// If you want your app to work offline and load faster, you can
change

// unregister() to register() below. Note this comes with some

pitfalls.

[Link]();
 React Js

Chapter-10(Multiple Reducers)
1) create the react application

> create-react-app multiple-reducers-app

2) switch to react application

> cd multiple-reducers-app

3) download the libraries

=> redux

=> react-redux

• "redux" library used to create the "redux application"

• "react-redux" used to integrate the "redux" to "react
application".

> yarn add redux react-redux --save

4) create the reducers

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

multiple-reducers-app

src

reducer

[Link]

[Link]
*****************************************

5) create the "store" and make the availability to

"App" component with the help of "[Link]" file
 React Js

6) create the App component

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

multiple-reducers-app

src

reducer

[Link]

[Link]

[Link]

[Link]

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

[Link]

const initialState = {

num1 : 1

};

const reducerA = (state=initialState,action)=>{

switch([Link]){

case "UPDATE_A":

return{

...state,

num1: state.num1 + [Link]

}
 React Js

break;

return state;

};

export default reducerA;

[Link]

const initialState = {

num2 : 1

};

const reducerB = (state=initialState,action)=>{

switch([Link]){

case "UPDATE_B":

return{

...state,

num2:state.num2 + [Link]

break;

return state;

};

export default reducerB;

 React Js

[Link]

import React,{ Component } from "react";

import { connect } from "react-redux";

class App extends [Link]{

render(){

return(

<div>

Num1 : <span
style={{color:"red",marginRight:100}}>{[Link].num1}</span>

Num2 : <span
style={{color:"red"}}>{[Link].num2}</span>

<br></br><br></br><br></br>

<button style={{marginRight:100}} onClick={ ()=>{

[Link].updateNum1([Link].num2) } }>UPDATE_NUM1</button>

<button onClick={ ()=>

{[Link].updateNum2([Link].num1) } }>UPDATE_NUM2</button>

</div>

};

const receive = (state)=>{

return{
 React Js

num1 : [Link].num1,

num2 : [Link].num2

};

const send = (dispatch)=>{

return{

updateNum1 : (data)=>{
dispatch({type:"UPDATE_A",value:data}) },

updateNum2 : (data)=>{
dispatch({type:"UPDATE_B",value:data}) }

};

export default connect(receive,send)(App);

[Link]

import React from 'react';

import ReactDOM from 'react-dom';

import './[Link]';

import App from './App';

import * as serviceWorker from './serviceWorker';

import reducerA from "./reducers/reducerA";

 React Js

import reducerB from "./reducers/reducerB";

import { createStore,combineReducers } from "redux";

import { Provider } from "react-redux";

const rootReducer = combineReducers({

rA : reducerA,

rB : reducerB

});

const store = createStore( rootReducer );

[Link](

<Provider store={store}>

<App />

</Provider>,

[Link]('root')

);

// If you want your app to work offline and load faster, you can
change

// unregister() to register() below. Note this comes with some

pitfalls.

// Learn more about service workers: [Link]

[Link]();
 React Js

Chapter-11(Saga Middleware)

• Saga middleware watches the dispatches from Component.

• Saga middleware watches with the help of generators concept.
• We will download saga by using yarn tool
1) create the react application

> create-react-app redux-saga-example

2) switch to react application

> cd redux-saga-example

3) download the libraries

=> redux

=> react-redux

• "redux" library used to create the "redux application"

• "react-redux" used to integrate the "redux" to "react
application".

> yarn add redux-saga redux react-redux –save

4) Create The saga([Link]) file

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

redux-saga-example

src

saga

[Link]

*********************************************************
 React Js

[Link]

import { delay } from "redux-saga";

import { takeLatest, put, takeEvery } from "redux-saga/effects";

function* ageUpAsync() {
yield delay(4000);
yield put({ type: "AGE_UP_ASYNC", value: 1 });
}

function* ageDownAsync(){
yield delay(2000);
yield put({type:"AGE_DOWN_ASYNC",value:1});
};

export function* watchAgeUp() {

yield takeEvery("AGE_UP", ageUpAsync);
yield takeEvery("AGE_DOWN",ageDownAsync);
}

5) Create The reducer([Link]) file

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

redux-saga-example

src

store

[Link]

*********************************************************
 React Js

[Link]

[Link]
const initialState = {
age: 20
};

const reducer = (state = initialState, action) => {

const newState = { ...state };

switch ([Link]) {
case "AGE_UP_ASYNC":
[Link] += [Link];
break;

case "AGE_DOWN_ASYNC":
[Link] -= [Link];
break;
}
return newState;
};

export default reducer;

6) Create The Components file

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

redux-saga-example

src
 React Js

[Link]

[Link]

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

[Link]

import React from "react";

import ReactDOM from "react-dom";

import "./[Link]";

import App from "./App";

import reducer from "./store/reducer";

import { Provider } from "react-redux";

import { createStore, applyMiddleware } from "redux";

import createSagaMiddleware from "redux-saga";

import { watchAgeUp } from "./sagas/saga";

const sagaMiddleware = createSagaMiddleware();

const store = createStore(reducer,

applyMiddleware(sagaMiddleware));

[Link](watchAgeUp);

[Link](

<Provider store={store}>

<App />

</Provider>,
 React Js

[Link]("root")

);

[Link]

import React, { Component } from "react";

import "./[Link]";
import { connect } from "react-redux";

class App extends Component {

render() {
return (
<div className="App">
<div className="Age-label">
your age: <span>{[Link]}</span>
</div>
<button onClick={[Link]}>Age UP</button>
<button onClick={[Link]}>Age Down</button>
</div>
);
}
}

const mapStateToProps = state => {

return {
age: [Link]
};
};

const mapDispachToProps = dispatch => {

 React Js

return {
onAgeUp: () => dispatch({ type: "AGE_UP", value: 1 }),
onAgeDown: () => dispatch({ type: "AGE_DOWN", value: 1 })
};
};
export default connect(
mapStateToProps,
mapDispachToProps
)(App);

OutPut:
 React Js

Chapter-12(thunk Middleware)
1) create the react application

> create-react-app redux-thunk-example

2) switch to react application

> cd redux-thunk-example

3) download the libraries

• "redux" library used to create the "redux application"

• "react-redux" used to integrate the "redux" to "react
application".

> yarn add redux-thunk redux react-redux –save

Directory Structure

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

redux-thunk-example

src

actions

[Link]

reducer

[Link]

[Link]

[Link]

*********************************************************
 React Js

4) Create The reducer([Link]) file

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

redux-thunk-example

src

reducer

[Link]

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

[Link]

const initialState = {

bal : 5000

};

const reducer = (state=initialState,action)=>{

const newState = {...state};

switch([Link]){

case "WITHDRAW":

[Link]-=[Link];

break;

case "DEPOSIT":

[Link]+=[Link];

break;
 React Js

return newState;

};

export default reducer;

5) Create The thunk([Link]) file

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

redux-thunk-example

src

actions

[Link]

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

[Link]

export const onWithdraw = (val)=>{

return {type:"WITHDRAW",value:val};

};

export const onDepositAsync = (val)=>{

return {type:"DEPOSIT",value:val};

};

export const onDeposit = (val)=>{

 React Js

return (dispatch)=>{

setTimeout(()=>{

dispatch(onDepositAsync(val));

},5000);

};

6)create the “store” and make the availability to “App”

component
**************************************************

redux-thunk-example

src

[Link]

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

[Link]

import React from 'react';

import ReactDOM from 'react-dom';

import './[Link]';

import App from './App';

import * as serviceWorker from './serviceWorker';

 React Js

import reducer from "./reducer/reducer";

import { Provider } from "react-redux";

import { createStore, applyMiddleware } from "redux";

import thunk from "redux-thunk";

const store = createStore(reducer,applyMiddleware(thunk));

[Link](

<Provider store={store}>

<App />

</Provider>,

[Link]('root')

);

// If you want your app to work offline and load faster, you can
change

// unregister() to register() below. Note this comes with some p

itfalls.

// Learn more about service workers: [Link]

[Link]();

7)create the “store” and make the availability to “App”

component
 React Js

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

redux-thunk-example

src

[Link]

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

[Link]

import React, { Component } from "react";

import { connect } from "react-redux";

import * as actions from "./actions/actions";

import "./[Link]";

class App extends [Link]{

render(){

return(

<div className="App">

<h1>Balanace:<span style={{color:"green"}}>{[Link]
[Link]}</span></h1>

<button onClick={[Link]}><b>Withdraw</b
></button>

<button onClick={[Link]}><b>Deposit</b><
/button>

</div>

)
 React Js

const receive = (state)=>{

return{

bal : [Link]

};

const send = (dispatch)=>{

return{

withdraw : ()=>{ dispatch([Link](1000)) },

deposit : ()=>{ dispatch([Link](5000)) }

};

export default connect(receive,send)(App);

OutPut:
React Js
 React Js

Chapter-13(Single Page Applications)

✓ Loading one component to Another Component without Refreshing
the whole webpage called as “Single Page Application”.
✓ Navigating from one component to another component in Single
Page Application called as “Routing”.

✓ “Route” is the predefined class , used to implement the

“Routing” in Single Page Application.
✓ “BrowserRouter” is the predefined class ,used to hold/Space
the Routing Logic

✓ “NavLink” is the predefined class, used to define the “Router

Links”.
 React Js

✓ We will get the support of Single Page Application by using

“react-router-dom” module.
✓ We will download above module by using “yarn” tool.
>yarn add react-router-dom --save

For example :

Step 1. Create the react application

> create-react-app spa-app

Step 2. Switch to react application

>cd spa-app

Step 3. Download “react-router-dom” library

>yarn add react-router-dom --save

Step 4. Create the target components

Directory Struture

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

Spa-app

Src

[Link]

[Link]

[Link]

[Link]

[Link]
 React Js

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

[Link]

[Link]

[Link]
 React Js

[Link]

import React,{ Component } from "react";

//import BrowserRouter

//BrowserRouter helps to write the Single Page Applications

logic.

//import NavLink

//NavLink helps to create the hyperlinks (router links) in

single page applications

import { BrowserRouter as Router, NavLink } from "react-router-

dom";

//import Route

//Route is the predefined class used to implement the Routing

import Route from "react-router-dom/Route";

import About from "./About";

import Home from "./Home";

 React Js

import Contact from "./Contact";

export default class App extends [Link]{

render(){

return(

<Router>

<div>

<NavLink to="/"

exact strict

activeStyle={{color:"green"}}

style={{marginRight:100}}><b>About</b></NavLink>

<NavLink to="/home"

exact strict

activeStyle={{color:"green"}}

style={{marginRight:100}}><b>Home</b></NavLink>

<NavLink to="/contact"

exact strict

activeStyle={{color:"green"}}

style={{marginRight:100}}><b>Contact</b></NavLink>

<br></br><br></br>

<Route path="/" component={About} exact strict></Route>

 React Js

<Route path="/home" component={Home} exact strict></Route>

<Route path="/contact" component={Contact} exact strict></Route>

</div>

</Router>

};

[Link]

import React from 'react';

import ReactDOM from 'react-dom';

import './[Link]';

import App from './App';

import * as serviceWorker from './serviceWorker';

[Link](

<[Link]>

<App />

</[Link]>,

[Link]('root')

);
 React Js

// If you want your app to work offline and load faster, you can
change

// unregister() to register() below. Note this comes with some

pitfalls.

// Learn more about service workers: [Link]

[Link]();
 React Js

Navigation and Routing Parameters in Single Page

Applications

Step 1.

Create the table in oracle database.

 React Js

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

user : system

password : root

connectString : localhost/XE

table : auth

columns : uname , upwd

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

step 2.

create the react application

➢ Create-react-app parameters-app

Step 3.

Switch to react application

 React Js

➢ cd parameters-app

Step 4.

Download node modules

1) express

2) oracledb

3) body-parser

4) cors

- express module used to develop the rest apis

- oracledb module used to connect to oracle database

- body-parser module used to read the client data

- cors module used to enable the “cors policy”

we will download above modules by using “yarn” tool

➢ yarn add express oracledb body-parser cors --save

Step 5.

Implement the node server

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

parameters-app

server

[Link]
 React Js

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

[Link]

//import the modules

//require() is the predefined function, used to import the modul

es

let express = require("express");

let oracledb = require("oracledb");

let cors = require("cors");

let bodyparser = require("body-parser");

//create the rest object

let app = express();

//enable cors policy

[Link](cors());

//set the json as MIME Type

[Link]([Link]());

//read the client data

[Link]([Link]({extended:false}));

//create the post request

 React Js

[Link]("/login",(req,res)=>{

[Link]({user:"system",

password:"root",

connectString:"localhost/XE"},(err,c
onnection)=>{

if(err) throw err;

else{

[Link](`select * from auth where uname='

${[Link]}' and upwd='${[Link]}'`,(err,records)=>{

if(err) throw err;

else{

if([Link]>0){

[Link]({"login":"success"});

}else{

[Link]({"login":"fail"});

});

});

});
 React Js

//assign the port no

[Link](8080);

[Link]("server listening the port no.8080");

Step 6.

Start the server

➢ cd parameters-app/server

➢ node server
 React Js

Step 7.

Test the rest api by using Postman

 [Link] (POST)
 React Js

Step 8.

download axios & react-router-dom module

➢ yarn add axios & react-router-dom --save

Step 9.

Implement the single page application

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

Parameters-app

Src

[Link]

[Link]

[Link]

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

[Link]

import React,{ Component } from "react";

import axios from "axios";

export default class Login extends [Link]{

constructor(){

super();

[Link] = {

msg : "welcome to dashboard module"

 React Js

};

render(){

return(

<div>

<fieldset>

<legend>Login</legend>

<input type="text" ref="uname" placeholder="

User Name"/>

<br></br><br></br>

<input type="password" ref="upwd" placeholde

r="User Password"/>

<br></br><br></br>

<button onClick={[Link]}>Login</button>

</fieldset>

</div>

};

login = ()=>{
 React Js

let var1 = "welcome to dashboard module";

[Link]("[Link]
[Link],

"upwd":[Link]
[Link]})

.then((posRes)=>{

if([Link] === "success"){

[Link](`/dashboard/${this.s
[Link]}`);

}else{

alert("Login Fail");

},(errRes)=>{

[Link](errRes);

});

};

};

[Link]

import React,{ Component } from "react";

export default class Dashboard extends [Link]{

render(){

return(
 React Js

<div>

<h1 style={{color:"red"}}>{[Link]
ms.param1}</h1>

</div>

};

};

[Link]

import React,{ Component } from "react";

import { BrowserRouter as Router } from "react-router-dom";

import Route from "react-router-dom/Route";

import Login from "./Login";

import Dashboard from "./Dashboard";

export default class App extends [Link]{

render(){

return(

<div>

<Router>

<Route path="/" exact strict component={Login}></Route>

<Route path="/dashboard/:param1" exact strict component={Dashboa

rd}></Route>

</Router>
 React Js

</div>

};

Step 10.

Execute the react project

Terminal-1

➢ cd parameters-app/server

➢ node server

Terminal-2

➢ cd parameters-app

➢ yarn start

Output:
React Js
 React Js

Lazy loading:

Step 1. Create the react application

> create-react-app lazy-app

Step 2. Switch to react application

>cd Lazy-app

Step 3. Download “react-router-dom” library

>yarn add react-router-dom --save

Step 4. Create the target components

Directory Struture

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

Lazy-app

Src

Components

[Link]

[Link]

[Link]

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

[Link]

import React from "react";

 React Js

export default () => {

return <div>Hi there I am now loaded!</div>;

};

[Link]

import React, { Component, lazy, Suspense } from "react";

import "./[Link]";

//import MyComp from './components/myComp';

const MyComp = lazy(() => import("./components/MyComp"));

class App extends Component {

render() {

return (

<div className="App">

<header className="App-header">

<div>another component</div>

<Suspense fallback={<div>Loading.....</div>}>

<MyComp />

</Suspense>

</header>

</div>
 React Js

);

export default App;

[Link]

import React from 'react';

import ReactDOM from 'react-dom';

import './[Link]';

import App from './App';

import * as serviceWorker from './serviceWorker';

[Link](

<[Link]>

<App />

</[Link]>,

[Link]('root')

);

// If you want your app to work offline and load faster, you can
change
 React Js

// unregister() to register() below. Note this comes with some

pitfalls.

// Learn more about service workers: [Link]

[Link]();

Output:
 React Js

Chapter-14(Crud Operations)
CRUD Operations on MySQL DataBase
---------------------------------

1) install MySQL DataBase.

Ex.
[Link]

2) create the table in MySQL DataBase.

SQL Queries
----------
Default Password : root

> create schema reactjs;

- automatically "reactjs" DataBase will create.

> use reactjs;

- we can switch to reactjs DataBase.

> create table employee(eno integer,ename varchar(50),esal

integer);
- automatically "employee" table will create.

> insert into employee values(111,'e_one',10000);

- record will be inserted into employee table.

> select * from employee;

 React Js

- we can fetch the data from employee table.

*******************************
host : localhost

user : root

Password: root

database: reactjs

table : employee
********************************

3) create the react application

> create-react-app crud-app

- where "crud-app" is the react application.

4) switch to react application

> cd crud-app

5) download the node modules, in order to implement

server application

=> express
 React Js

=> cors
=> mysql
=> body-parser

- "express" module used to develop the rest apis.

- "cors" module used to enable the ports communication.
- "mysql" module used to connect to mysql database.
- "body-parser" modules used to read the client data.

> yarn add express cors mysql body-parser --save

6) develop rest apis by using nodejs

**************************
crud-app
server
[Link]
*************************

7) switch to server directory

> cd crud-app/server

> node server

8) Test the following rest apis by using Postman

=> [Link] (GET)

 React Js

=> [Link] (POST)

=> [Link] (PUT)

=> [Link] (DELETE)

9) download axios module

- "axios" module used to connect to server asynchronously.

Terminal-2
----------

> cd crud-app

> yarn add axios --save

10) create the Components

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

crud-app
server
[Link]
src
[Link]
 React Js

[Link]
[Link]
[Link]
*************************************

[Link]
**********
//import modules
//require() function used to import the modules
let express = require("express");
let mysql = require("mysql");
let cors = require("cors");
let bodyparser = require("body-parser");

//create the master object

let app = express();
//where "app" object, used to develop the rest apis

//set the JSON as MIME Type

[Link]([Link]());

//read the client data

[Link]([Link]({extended:false}));

//enable ports communication

[Link](cors());

//create connection object

 React Js

let connection = [Link]({

host:"localhost",
user:"root",
password:"root",
database:"reactjs"
});

//create the get request

[Link]("/fetch",(req,res)=>{
[Link](`select * from employee`,
(err,records,fields)=>{
if(err) throw err;
else{
[Link](records);
}
});
});

//create the post request

[Link]("/insert",(req,res)=>{
[Link](`insert into employee values(${[Link]},'${r
[Link]}',${[Link]})`,(err,result)=>{
if(err) throw err;
else{
[Link]({insert:"success"});
}
});
});
 React Js

//create the put request

[Link]("/update",(req,res)=>{
[Link](`update employee set ename='${[Link]}',es
al=${[Link]} where eno=${[Link]}`,(err,result)=>{
if(err) throw err;
else{
[Link]({"update":"success"});
}
});
});

//create the delete request

[Link]("/delete",(req,res)=>{
[Link](`delete from employee where eno=${[Link]}`,
(err,result)=>{
if(err) throw err;
else{
[Link]({"delet":"success"});
}
});
});

//assign the port no

[Link](8080);
[Link]("server listening the port no.8080");
 React Js

[Link]
*********

import React, { Component } from "react";

import axios from "axios";
import Insert from "./Insert";
import Update from "./Update";
import Delete from "./Delete";
export default class Fetch extends [Link]{
constructor(){
super();
[Link]={
records : []
};
};
//componentDidMount() function used to make the rest api calls(GET
Request)
componentDidMount(){
[Link]("[Link]
.then((posRes)=>{
[Link]({
records:[Link]
})
},(errRes)=>{
[Link](errRes);
});
};
render(){
return(
 React Js

<div>
<table border="1"
cellPadding="10px"
cellSpacing="10px"
align="center">
<thead
style={{backgroundColor:"grey"}}>
<tr>
<th>SNO</th>
<th>ENO</th>
<th>ENAME</th>
<th>ESAL</th>
</tr>
</thead>
<tbody>
{[Link]((element,index)=>(
<tr>
<td>{index+1}</td>
<td>{[Link]}</td>
<td>{[Link]}</td>
<td>{[Link]}</td>
</tr>
))}
</tbody>
</table>

<hr style={{height:5,backgroundColor:"grey"}}></hr>
<br></br><br></br>
 React Js

<Insert />

<hr style={{height:5,backgroundColor:"grey"}}></hr>
<br></br><br></br>

<Update />

<hr style={{height:5,backgroundColor:"grey"}}></hr>
<br></br><br></br>

<Delete />

</div>
)
};
};

[Link]
**********

import React,{ Component } from "react";

import axios from "axios";

export default class Insert extends [Link]{

constructor(){

super();

[Link]={
 React Js

status:""

};

};

render(){

return(

<div>

<fieldset>

<legend>Insert</legend>

<input type="number"

placeholder="enter employee number"

ref="eno"/>

<br></br><br></br>

<input type="text"

placeholder="enter employee name"

ref="ename"/>

<br></br><br></br>

<input type="number"

placeholder="enter employee sal"

ref="esal"/>
 React Js

<br></br><br></br>

<button onClick={[Link]}>Insert</button>

<br></br>

<h1>{[Link]}</h1>

</fieldset>

</div>

};

insert = ()=>{

let record = {

"eid":[Link],

"ename":[Link],

"esal":[Link]

};

[Link]("[Link]

record)

.then((posRes)=>{

[Link]({

status:[Link]
 React Js

})

},(errRes)=>{

[Link](errRes);

});

};

};

[Link]
*********

import React,{ Component } from "react";

import axios from "axios";

export default class Update extends [Link]{

constructor(){

super();

[Link]={

status : ""

};

};

render(){

return(

<div>
 React Js

<fieldset>

<legend>Update</legend>

<input type="number"

ref="eid"

placeholder="employee id"/>

<br></br><br></br>

<input type="text"

ref="ename"

placeholder="employee name"/>

<br></br><br></br>

<input type="number"

ref="esal"

placeholder="Employee Sal"/>

<br></br><br></br>

<button onClick={[Link]}>Update</button>

<h1>{[Link]}</h1>

</fieldset>

</div>

};

update = ()=>{
 React Js

let record = {

"eid":[Link],

"ename":[Link],

"esal":[Link]

};

[Link]("[Link]

.then((posRes)=>{

[Link]({

status :[Link]

})

},(errRes)=>{

[Link](errRes);

});

};

};

[Link]
**********

import React,{ Component } from "react";

import axios from "axios";
export default class Delete extends [Link]{
constructor(){
 React Js

super();
[Link]={
status : ""
};
};
render(){
return(
<div>
<fieldset>
<legend>Delete</legend>
<input type="number"
ref="eid"
placeholder="Employee ID"/>
<br></br><br></br>
<button onClick={[Link]}>Delete</button>
<h1>{[Link]}</h1>
</fieldset>
</div>
)
};
remove = ()=>{
let record = {
"eid":[Link]
};
[Link]("[Link]
.then((posRes)=>{
[Link]({
status:[Link]
})
 React Js

},(errRes)=>{
[Link](errRes);
});
};
};
 React Js

Chapter-15(Mini Project)
 React Js

=> in this miniproject(POC) we have following databases.

MySQL

MongoDB

SQLServer

=> MySQL database for both login authentication as well as about

module in miniproject.

=> MongoDB database for "home" module present in MiniProject

=> SQLServer for "portfolio" module present in MiniProject.

=> we will develop rest apis by using node js.

=> in the above miniproject, we are maintaing token based

authentication system.

=> Coming to the ReactJS, we are dividing ReactJS Application into

Multiple Modules

- Index

- Login

- Dashboard

@About

@Home

@Portfolio

=> In ReactJS, mainly we are focusing on Single Page

Applications.
 React Js

=> Loading "One Component" to "Another Component" without

refreshing whole web project called as Single Page Application.

Implementation

--------------

1) download and install MySQL database.

[Link]

2) create the tables in MySQL database.

Default Password : root

> create schema reactjs;

- automatically "reactjs" database will ready.

> use reactjs;

- we can switch to reactjs database.

> create table login_details(uname varchar(20),

upwd varchar(20));

- automatically login_details table will be created.

> insert into login_details values("admin","admin");

- we can insert the record into login_details table.

> create table about(sno integer,name varchar(20));

- we can create the "about" table.

> insert into about values(1,"MERN Stack");

- we can insert the record into about table.

 React Js

> select * from login_details;

select * from about;

- we can fetch the data from tables.

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

host : localhost

user : root

password: root

database: reactjs

tables : login_details

about

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

3) make the MongoDB database ready for miniproject

Implementation.

> mongod

- automatically mongo server will start.

> mongo

- we can connect to mongo server.

> use reactjs;

- automatically reactjs database will be created

and switches also.

> [Link]("home");

- automatically "home" collection will be created(table)

 React Js

> [Link]({sno:1,name:"reactjs"});

- we can insert the record into home collection.

> [Link]();

- we can fetch the data from "home" collection.

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

protocol : mongodb

port : 27017

host : localhost

database : reactjs

collection : home

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

4) make the SQLServer ready for miniproject Implementation.

Name : SQL Server 2014 Management Studio

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

User : sa

Password : 123

server : localhost

database : reactjs

table : portfolio

******************************
 React Js

5) create the react application

> create-react-app miniproject-app

6) switch to react application

> cd miniproject-app

7) download the node modules

=> express

=> mysql

=> [email protected]

=> mssql

=> body-parser

=> cors

=> jwt-simple

• "express" module used to develop the rest api.

• "mysql" module used to connect to mysql database.
• "[email protected]" module used to connect to mongodb database.
• "mssql" module used to interact with the SQLServer
• "body-parser" module used to read the post parameters.
• "cors" module used to enable the ports communication.
• "jwt-simple" module used to generate the tokens.

> yarn add express mysql [email protected] mssql body-parser cors

jwt-simple --save
 React Js

8) develop the rest apis for miniproject by using nodejs

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

miniproject-app =>server

config

mysql_properties.js

mysql_connection.js

mssql_properties.js

[Link]

[Link]

[Link]

login

[Link]

about

[Link]

home

[Link]

portfolio

[Link]

logout

[Link]

[Link]

***********************************************
 React Js

• "mysql_properties.js" file used to maintain the mysql

database details.
• "mysql_connection.js" file used to create the mysql
connection object.
• "mssql_properties.js" file used to maintain the SQLServer
details.
• "[Link]" file used to save the server side token.
• "[Link]" file used to generate the token by using
jwt-simple module.
• "[Link]" file used to compare the client side token with
server side token.
• "[Link]" file used to compare the react application login
credentials with login_details table present in mysql
database.
• "[Link]" file used to fetch the data from about table
present in MySQL database.
• "[Link]" file used to fetch the data from home collection
present in MongoDB database.
• "[Link]" file used to fetch the data from portfolio
table present in SQLServer.
• "[Link]" file used to delete the server side token.
• "[Link]" file is the main server file.

mysql_properties.js

//this file used to maintain the MySQL Database properties.

//we will create and export JSON Object

let obj = {

host : "localhost",
 React Js

user : "root",

password: "root",

database: "reactjs"

};

[Link] = obj;

mysql_connection.js

//import mysql module

let mysql = require("mysql");

//import db details

let obj = require("./mysql_properties");

//create and export JSON Object

let conn = {

getConnection : ()=>{

return [Link](obj);

};

//export conn

[Link] = conn;

mssql_properties.js

//this file used to maintain the SQLServer Properties.

let obj = {
 React Js

server : "localhost",

user : "sa",

password: "123",

database: "reactjs"

};

[Link] = obj;

[Link]

//this file used to maintain the server side token.

let obj = {

token : ""

};

[Link] = obj;

[Link]

//this file used to generate the token by using jwt-simple

module

//import jwt-simple module

let jwt = require("jwt-simple");

//converting readable data to unredable data with custom

password called as token

let my_fun = (data,password)=>{

return [Link](data,password);

};
 React Js

[Link] = my_fun;

[Link]

//this file used to compare the "client side token" with

"server side token"

//client sending the token through "headers".

//server side token present in "[Link]" file.

//comparing tokens before processing requests called as

"middleware"

let auth = (req,res,next)=>{

let allHeaders = [Link];

let c_token = [Link];

[Link](c_token);

let s_token = require("./token").token;

[Link](s_token);

if(c_token === s_token){

next();

}else{

[Link]("UnAuthorized User....!");

};

[Link] = auth;
 React Js

[Link]

//this file used to create the module.

//this module used to create the login rest api

//login rest api used to comapre the reactjs application

"login credentials" with "login_details" table present in
mysql database.

//get the connection object

let conn = require("../config/mysql_connection");

let connection = [Link]();

//import [Link] file, used to store the token

let obj = require("../config/token");

//import [Link] file, used to generate token based

on successful authentication.

let my_fun = require("../config/generateToken");

//create and export the module

[Link] =
require("express").Router().post("/",(req,res)=>{

[Link](`select * from login_details where

uname='${[Link]}' and upwd='${[Link]}'`,

(err,records,fields)=>{

if([Link]>0){

let token = my_fun({

 React Js

uname:[Link],

upwd:[Link]

},"hr@[Link]");

[Link] = token;

[Link]({login:"success",token:token});

}else{

[Link]({login:"fail"});

});

});

[Link]

let conn = require("../config/mysql_connection");

let connection = [Link]();

let auth = require("../config/auth");

[Link] =
require("express").Router().get("/",[auth],(req,res)=>{

[Link](`select * from
about`,(err,records,fields)=>{

[Link](records);

});

});

[Link]
 React Js

//this file used to fetch the data from home collection

present in reactjs database

let mongodb = require("mongodb");

let auth = require("../config/auth");

[Link] =
require("express").Router().get("/",[auth],(req,res)=>{

let nareshIT = [Link];

[Link]("mongodb://localhost:27017/reactjs",(err,db)=
>{

[Link]("home").find().toArray((err,array)=>{

[Link](array);

});

});

});

[Link]

//this file used to fetch the data from portfolio table

present in reactjs database in SQLServer.

let mssql = require("mssql");

let obj = require("../config/mssql_properties");

let auth = require("../config/auth");

[Link] =
require("express").Router().get("/",[auth],(req,res)=>{
 React Js

[Link](obj,(err)=>{

if(err){

[Link]("Error...!");

}else{

let request = new [Link]();

[Link](`select * from
portfolio`,(err,records)=>{

if(err){

[Link]("Error...!");

}else{

[Link](records);

[Link]();

});

});

});

[Link]

//this file used to delete the server side token

let obj = require("../config/token");

let auth = require("../config/auth");

 React Js

[Link] =
require("express").Router().get("/",[auth],(req,res)=>{

[Link] = "";

[Link]({logout:"success"});

});

[Link]

//node starts the execution from [Link] file.

let express = require("express");

let bodyparser = require("body-parser");

let cors = require("cors");

let app = express();

[Link]([Link]());

[Link]([Link]({extended:false}));

[Link](cors());

[Link]("/login",require("./login/login"));

[Link]("/about",require("./about/about"));

[Link]("/home",require("./home/home"));

[Link]("/portfolio",require("./portfolio/portfolio"));

[Link]("/logout",require("./logout/logout"));

[Link](8080);

[Link]("server listening the port no.8080");

 React Js

Step 9:

Start the node server

> cd miniproject-app

> cd server

> node server

automatically node server will start on port no 8080

Step 10.

Test the following rest apis by using Postman

=> [Link] (POST)

=> [Link] (GET)

=> [Link] (GET)

=> [Link] (GET)

=> [Link] (GET)

Step 11.

download the axios module

- "axios" module used to make the rest api calls

> cd miniproject-app

> yarn add axios --save

 React Js

Step 12.

implement the Components with Rest API Calls.

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

Miniproject-app

src

[Link]

[Link]

[Link]

[Link]

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

[Link]

import React,{ Component } from "react";

import "./[Link]";

import axios from "axios";

export default class Login extends [Link]{

render(){

return(

<div className="App">

<fieldset>

<legend>Login</legend>
 React Js

<label
style={{marginRight:40}}>Uname:</label>

<input type="text"

ref="uname"

placeholder="User Name"></input>

<br></br><br></br>

<label
style={{marginRight:40}}>Upwd:</label>

<input type="password"

ref="upwd"

placeholder="Password"></input>

<br></br><br></br>

<button onClick={[Link]}>Login</button>

</fieldset>

</div>

login = ()=>{

[Link]("[Link]

'uname':[Link],

'upwd':[Link]
 React Js

}).then((posRes)=>{

let str = [Link]([Link]);

[Link]("login_details",str);

//navigate to Dashboard

[Link]('/dashboard')

},(errRes)=>{

[Link](errRes);

});

};

};

[Link]

import React,{ Component } from "react";

import axios from "axios";

import "./[Link]";

export default class About extends [Link]{

constructor(){

super();

[Link] = {

res : "Please Wait....!"

};
 React Js

render(){

return(

<div className="App">

<h1 style={{color:"red"}}>{[Link]}</h1>

</div>

};

componentDidMount(){

let str = [Link]("login_details");

let obj = [Link](str);

[Link]([Link]);

[Link]("[Link]
n}})

.then((posRes)=>{

[Link](posRes);

let str = [Link]([Link]);

[Link]({

res:str

})

},(errRes)=>{
 React Js

[Link](errRes);

});

};

[Link]

import React,{ Component } from "react";

import axios from "axios";

import "./[Link]";

export default class Home extends [Link]{

constructor(){

super();

[Link] = {

res : "please wait....!"

};

render(){

return(

<div className="App">

<h1
style={{color:"green"}}>{[Link]}</h1>

</div>

)
 React Js

};

componentDidMount(){

let token =
[Link]([Link]("login_details"))

.token;

[Link]("[Link]
then((posRes)=>{

[Link]({

res:[Link]([Link])

});

},(errRes)=>{

[Link](errRes);

});

};

};

[Link]

import React,{ Component } from "react";

import axios from "axios";

import "./[Link]";

export default class Portfolio extends [Link]{

constructor(){
 React Js

super();

[Link] = {

res : "please wait....!"

};

render(){

return(

<div className="App">

<h1 style={{color:"blue"}}>{[Link]}</h1>

</div>

};

componentDidMount(){

let token =
[Link]([Link]("login_details"))

.token;

[Link]("[Link]

{headers:{token:token}}).then((posRes)=>{

[Link]({

res:[Link]([Link])

});
 React Js

},(errRes)=>{

[Link](errRes);

});

};

};

Step 13.

download "react-router-dom" module

- "react-router-dom" module used to implement the Single Page

Applications.

> cd miniproject-app

> yarn add react-router-dom --save

Step 14.

create the Dashboard Module

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

Miniproject-app

Src

[Link]

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

[Link]

import React,{ Component } from "react";

import axios from "axios";

 React Js

//BrowserRouter used to hold the target pages without refreshing

//NavLink used to define the HyperLinks

import { BrowserRouter as Router,NavLink } from "react-router-

dom";

//import Route

import Route from "react-router-dom/Route";

//import Target Components

import About from "./About";

import Home from "./Home";

import Portfolio from "./Portfolio";

export default class Dashboard extends [Link]{

render(){

return(

<Router>

<div>

<NavLink to="/about"

activeStyle={{color:"green"}}

exact strict

style={{marginRight:100}}>About</NavLink>

<NavLink to="/home"

activeStyle={{color:"green"}}
 React Js

exact strict

style={{marginRight:100}}>Home</NavLink>

<NavLink to="/portfolio"

activeStyle={{color:"green"}}

exact strict

style={{marginRight:100}}>Portfolio</NavLink>

<button
onClick={[Link]}>Logout</button>

<br></br><br></br>

<Route path="/about" exact strict

component={About}></Route>

<Route path="/home" exact strict

component={Home}></Route>

<Route path="/portfolio" exact strict

component={Portfolio}></Route>

</div>

</Router>

) };

logout = ()=>{

let str = [Link]("login_details");

 React Js

let obj = [Link](str);

let token = [Link];

[Link]("[Link]
}})

.then((posRes)=>{

if([Link] === "success"){

[Link]("login_details");

//navigate to login page

[Link]('/')

},(errRes)=>{

[Link](errRes);

});

};};

Step 15.

create the Main Component

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

Miniproject-app

Src

[Link]
 React Js

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

[Link]

import React,{ Component } from "react";

import { BrowserRouter as Router } from "react-router-dom";

import Route from "react-router-dom/Route";

import Login from "./Login";

import Dashboard from "./Dashboard";

export default class Main extends [Link]{

render(){

return(

<Router>

<div>

<Route path="/" exact strict

component={Login}></Route>

<Route path="/dashboard" exact strict

component={Dashboard}></Route>

</div>

</Router>

};

Step 16.
 React Js

Register the Main Component.

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

Miniproject-app

Src

[Link]

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

[Link]

import React from 'react';

import ReactDOM from 'react-dom';

import './[Link]';

import Main from "./Main";

import * as serviceWorker from './serviceWorker';

[Link](<Main />, [Link]('root'));

// If you want your app to work offline and load faster, you can
change

// unregister() to register() below. Note this comes with some

pitfalls.

// Learn more about service workers: [Link]

[Link]();
 React Js

Step 17.

execute the application with the help of node

server.

//Terminal-1

> cd miniproject-app

> cd server

> node server

//Terminal-2

> mongod

//Terminal-3

> yarn start

 React Js

Chapter-16(Crud Operations-Thunk)
CRUD Operations on MySQL DataBase

---------------------------------
 React Js

1) create the directory

Ex.

MySQL

2) download node modules

1) express

2) mysql

3) body-parser

4) cors
 React Js

- "express" module used to develop the rest apis.

- "mysql" module used to interact with the mysql DataBase.

- "body-parser" module used to read the data from client.

- "cors" module used to enable the cors policy

> cd MySQL

> yarn add express mysql body-parser cors --save

3) create the table in MySQL Database.

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

host : localhost

user : root

password : root

database : fullstack

table : products

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

4)develop rest apis

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

MySQL

config
 React Js

db_properties.js

db_connection.js

fetch

[Link]

insert

[Link]

update

[Link]

delete

[Link]

[Link]

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

• "db_properties.js" file used to maintain the mysql database

details.
• "db_connection.js" file used to create and return the mysql
database connection object.

- "[Link]" file used to create the GET Request.

- "[Link]" file used to create the POST Request.

- "[Link]" file used to create the PUT Request.

- "[Link]" file used to create the DELETE Request.

- "[Link]" file is the main node server file.

 React Js

db_properties.js

let obj = require("./db_properties");

let mysql = require("mysql");

let conn = {

getConnection : ()=>{

return [Link](obj);

};

[Link] = conn;

db_connection.js

let obj = {

host : "localhost",

user : "root",

password : "root",

database : "fullstack_9pm"

};

[Link] = obj;

[Link]

let conn = require("../config/db_connection");

let connection = [Link]();

let fetch = require("express").Router().get("/",(req,res)=>{

 React Js

[Link](`select * from
products`,(err,records,fields)=>{

if(err) throw err;

else{

[Link](records);

});

});

[Link] = fetch;

[Link]

let conn = require("../config/db_connection");

let connection = [Link]();

let insert = require("express").Router().post("/",(req,res)=>{

[Link](`insert into products

values(${[Link].p_id},

'${[Link].p_name}',

${[Link].p_cost})`,(err,result)=>{

if(err) throw err;

else{

[Link]({"insert":"success",record:{"p_id":`${[Link].p_id}`,
 React Js

"p_name":`${[Link].p_name}`,

"p_cost":`${[Link].p_cost}`}

});

});

});

[Link] = insert;

[Link]

let conn = require("../config/db_connection");

let connection = [Link]();

let update = require("express").Router().put("/",(req,res)=>{

[Link](`update products set

p_name='${[Link].p_name}',p_cost=${[Link].p_cost} where
p_id=${[Link].p_id}`,(err,result)=>{

if(err) throw err;

else{

[Link]({update:"success",record:{"p_id":[Link].p_id,

"p_name":[Link].p_name,
 React Js

"p_cost":[Link].p_cost}});

});

});

[Link] = update;

[Link]

let conn = require("../config/db_connection");

let connection = [Link]();

let remove = require("express").Router().delete("/",(req,res)=>{

[Link](`delete from products where

p_id=${[Link].p_id}`,(err,result)=>{

if(err) throw err;

else{

[Link]({delete:"success","p_id":[Link].p_id});

});

});

[Link] = remove;

[Link]

let express = require("express");

 React Js

let app = express();

let bodyparser = require("body-parser");

let cors = require("cors");

[Link](cors());

[Link]([Link]());

[Link]([Link]({extended:false}));

[Link]("/fetch",require("./fetch/fetch"));

[Link]("/insert",require("./insert/insert"));

[Link]("/update",require("./update/update"));

[Link]("/delete",require("./delete/delete"));

[Link](8080);

[Link]("server listening the port no.8080");

5) start the node server

> cd MySQL

> node server

6) test the rest apis by using Postman

=> [Link] (GET)

=> [Link] (POST)

=> [Link] (PUT)

=> [Link] (DELETE)

 React Js

7) create the react application

> create-react-app crud-app

8) switch to crud-app

> cd crud-app

Terminology

Actions

-------

- this layer used to moniter the Actions

Ex.

Requesting Total Products (GET)

Add the New Product (POST)

Reducer

-------

• maintain the global business logic

• To implement above architecture we need following node modules

=> redux-thunk

=> redux

=> react-redux

=> bootstrap

=> react-bootstrap

=> axios
 React Js

• "redux-thunk" library used to maintain and moniter the separate

actions.
• "redux" used to create the reducers
• To integrate reducer to component we will use react-redux
• "bootstrap" & "react-bootstrap" used to implement the bootstrap
in react component
• "axios" module used to make the asynchronous calls

> yarn add redux-thunk redux react-redux bootstrap react-

bootstrap axios –save

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

public

[Link]

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

[Link]

<script
src="[Link]
crossorigin></script>

<script

src="[Link]
[Link]"

crossorigin></script>
 React Js

<script

src="[Link]
[Link]"

crossorigin></script>

<link rel="stylesheet"

href="[Link]
[Link]"

integrity="sha384-
Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh
"

crossorigin="anonymous"

/>

<script
src="[Link]

9) create the Actions

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

src

actions

[Link]
 React Js

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

[Link]

import axios from "axios";

/***************************************************/

export const getProducts = ()=>{

return (dispatch)=>{

return [Link]("[Link]

.then((posRes)=>{

dispatch( fun_one([Link]) );

},(errRes)=>{

[Link](errRes);

});

};

export const fun_one = (records)=>{

return {type:"FETCH",value:records};

};

/****************************************************/

/*****************************************************/

export const deleteProduct = (record)=>{

 React Js

return (dispatch)=>{

return
[Link]("[Link]

.then((posRes)=>{

dispatch(fun_two([Link]));

},(errRes)=>{

[Link](errRes);

});

};

};

export const fun_two = (result)=>{

return {type:"DELETE",value:result};

};

/**************************************************/

/************************************************ */

export const addProduct = (record)=>{

return (dispatch)=>{

return [Link]("[Link]

.then((posRes)=>{

dispatch(fun_three([Link]));

},(errRes)=>{
 React Js

[Link](errRes);

});

};

};

export const fun_three = (result)=>{

return { type:"INSERT", value:result };

/******************************************** */

/*********************************************** */

export const updateProduct = (record)=>{

return (dispatch)=>{

return [Link]("[Link]

.then((posRes)=>{

dispatch(fun_four([Link]));

},(errRes)=>{

[Link](errRes);

});

};

};

export const fun_four = (result)=>{

return { type:"UPDATE", value:result };

 React Js

/********************************************** */

10) create the reducer

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

src

reducer

[Link]

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

[Link]

const initialState = {

data : []

};

const reducer = (state=initialState,action)=>{

switch([Link]){

case "FETCH":

[Link] = [];

return{

...state,

data : [Link]([Link])

}
 React Js

break;

case "INSERT":

case "UPDATE":

case "DELETE":

return{

...state,

status : [Link]

break;

return state;

};

export default reducer;

11) configure the thunk middleware

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

src

[Link]

****************************************
 React Js

[Link]

import React from 'react';

import ReactDOM from 'react-dom';

import './[Link]';

import App from './App';

import * as serviceWorker from './serviceWorker';

import { createStore,applyMiddleware } from "redux";

import { Provider } from "react-redux";

import reducer from "./reducer/reducer";

import thunk from "redux-thunk";

const store = createStore(reducer,applyMiddleware(thunk));

[Link](

<Provider store={store}>

<App />

</Provider>,

[Link]('root')

);

// If you want your app to work offline and load faster, you can
change
 React Js

// unregister() to register() below. Note this comes with some

pitfalls.

// Learn more about service workers: [Link]

[Link]();

12) create the Component

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

src

[Link]

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

[Link]

import React,{ Component } from "react";

import { connect } from "react-redux";

import * as actions from "./actions/actions";

import Container from "react-bootstrap/Container";

import Table from "react-bootstrap/Table";

import Button from "react-bootstrap/Button";

import Modal from "react-bootstrap/Modal";

import Form from "react-bootstrap/Form";

class App extends [Link]{

constructor(){

super();

[Link] = {
 React Js

status : false,

insertPopup : false,

updatePopup : false

};

};

componentDidMount(){

[Link]();

};

showPopup = (msg)=>{

if(msg === "insert"){

[Link]({

updatePopup:false,

insertPopup : true,

status : true

})

}else{

[Link]({

insertPopup : false,

updatePopup : true,

status : true

})

}
 React Js

};

closePopup = ()=>{

[Link]({

status : false

})

};

deleteRecord = (id)=>{

[Link](id);

};

save = ()=>{

if([Link]){

let obj = { "p_id" : [Link].p_id.value,

"p_name" : [Link].p_name.value,

"p_cost" : [Link].p_cost.value};

[Link](obj);

else if([Link]){

let obj = { "p_id" : [Link].p_id.value,

"p_name" : [Link].p_name.value,
 React Js

"p_cost" : [Link].p_cost.value};

[Link](obj);

[Link]();

[Link]();

};

render(){

return(

<Container fluid className="mt-5">

<Button className="float-right"

onClick={()=>{ [Link]("insert")
}}>Add <i className="fas fa-plus"></i>

</Button>

{/* ----- modal code start------- */}

<Modal show={[Link]}

onHide={[Link]}

size="sm"

centered>
 React Js

<[Link] closeButton>

<[Link]>Add/Update</[Link]>

</[Link]>

<[Link]>

<Form>

<[Link]>

<[Link]>P_ID</[Link]>

<[Link] type="number"

placeholder="Enter P_ID"

ref="p_id"></[Link]>

</[Link]>

<[Link]>

<[Link]>P_NAME</[Link]>

<[Link] type="text"

placeholder="Enter P_NAME"

ref="p_name"></[Link]>

</[Link]>

<[Link]>
 React Js

<[Link]>P_COST</[Link]>

<[Link] type="number"

placeholder="Enter P_COST"

ref="p_cost"></[Link]>

</[Link]>

</Form>

</[Link]>

<[Link]>

<Button varient="success" onClick={()=>{

[Link]("insert",[Link]) }}>Add/Update</Button>

<Button varient="danger"
onClick={[Link]}>Close</Button>

</[Link]>

</Modal>

{/* ----- modal code end------- */}

<Table bordered

variant="dark"

size="sm"
 React Js

hover

striped

className="text-center">

<thead>

<tr>

<th>SNO</th>

<th>ID</th>

<th>NAME</th>

<th>COST</th>

<th>EDIT</th>

<th>DELETE</th>

</tr>

</thead>

<tbody>

{[Link]((element,index)=>(

<tr key={index}>

<td>{index+1}</td>

<td>{element.p_id}</td>

<td>{element.p_name}</td>

<td>{element.p_cost}</td>
 React Js

<td><i className="fas fa-edit"

onClick={()=>{ [Link]("update") }}></i></td>

<td><i className="fas fa-trash-alt"

onClick={()=> { [Link](element.p_id) } }></i></td>

</tr>

))}

</tbody>

</Table>

</Container>

};

const receive = (state)=>{

if([Link]("status")){

if([Link] === "success"){

let id = [Link]((element,index)=>{

return element.p_id === [Link].p_id;

});
 React Js

[Link](id,1);

if([Link] === "success"){

[Link]([Link]);

if([Link] === "success"){

[Link]((element,index)=>{

if(element.p_id == [Link].p_id){

element.p_name = [Link].p_name;

element.p_cost = [Link].p_cost;

});

return{

data : [Link],

status : [Link]

}
 React Js

};

const send = (dispatch)=>{

return{

getProducts : ()=>{ dispatch([Link]()) },

deleteRecord : (id)=>{
dispatch([Link]({"p_id":id})) },

addProduct : (record)=>{
dispatch([Link](record)) },

updateProduct : (record)=>{
dispatch([Link](record)) }

};

export default connect(receive,send)(App);

 React Js

Output:
 React Js

Chapter-17(MiniProject-Saga)
Step 1) install MongoDB

➢ MongoDB is the NoSQL database.

➢ MongoDB database is the "JSON" database.
➢ MongoDB database supports only "json".
➢ as a MongoDB developer, we can perform CRUD Operations on
JSON.
➢ MongoDB follows the "client-server" architecture.
➢ MongoDB follows the "mongodb" protocol.
➢ MongoDB by default running on port no.27017

i) download and install MongoDB.

website :
[Link]
win32-x86_64-[Link]/download

file : mongodb-win32-x86_64-[Link]

ii) create the directory structure

c:/data/db

above directory structure, used to maintain the data backup.

iii) set the path environmental variable

path = C:\Program Files\MongoDB\Server\4.2\bin

 React Js

Step 2) create the database

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

MongoDB Queries

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

> mongod

- mongod is used to start the server

> mongo

- mongo is used to connect to server

> use miniproject@4pm;

- automatically miniproject@4pm database will be created and

switches also.

> [Link]("login_details");

> [Link]("angular");

> [Link]("react");

> [Link]("deno");

- automatically tables will be created.

> db.login_details.insert({"uname":"admin","upwd":"admin"});

> [Link]({"sno":1,"message":"angular discussions

soon....!"});

> [Link]({"sno":1,"message":"react discussions

soon...!"});
 React Js

> [Link]({"sno":1,"message":"deno discussions

soon...!});

- automatically we can insert the data into collections

> db.login_details.find().pretty();

> [Link]().pretty();

> [Link]().pretty();

> [Link]().pretty();

- automatically we can fetch the data from collections.

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

host : localhost

protocol : mongodb

port : 27017

database : miniproject@4pm

collections : login_details

angular

react

deno

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

Step 3) download node modules

=> [email protected]

=> express

=> cors
 React Js

=> body-parser

=> jwt-simple

➢ [email protected] module used to interact with the "mongodb"

database.
➢ express module used to develop the rest apis
• GET
• POST
• PUT
• DELETE
• HEAD
• ---
• ---
• ---
➢ cors module used to enable the ports communication
➢ body-parser module used to read the client data.
➢ jwt-simple module used to generate the tokens.

> yarn add [email protected] express cors body-parser jwt-

simple --save

Step 4) develop the rest apis by using NodeJS

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

miniproject@4pm

config

[Link]

[Link]

[Link]
 React Js

login

[Link]

angular

[Link]

react

[Link]

deno

[Link]

logout

[Link]

[Link]

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

➢ [Link] file used to generate the token.

➢ "[Link]" file used to save the server side token.
➢ "[Link]" file used to compare the client side token with
server side token.
➢ "[Link]" file used to create the login rest api(post).
➢ "[Link]" file used to create the angular rest api(GET).
➢ "[Link]" file used to create the react rest api(GET).
➢ "[Link]" file used to create the deno rest api(GET).
➢ "[Link]" file used to create the logout rest api (GET)
➢ "[Link]" file used to collabrate the above modules.

[Link]
 React Js

//this file used to generate the token by using jwt-simple

module

//require() function used to import the modules in nodejs

let jwt = require("jwt-simple");

let getnerateToken = (data,password)=>{

return [Link](data,password);

};

[Link] = getnerateToken;

[Link]

//create the json object

let obj = {

"token":""

};

[Link] = obj;

[Link]

//this file used to compare the client side token with the
server side token (middleware)

//import server side token

let obj = require("./token");

//create the function

let auth = (req,res,next)=>{

let allHeaders = [Link];

 React Js

let c_token = [Link];

if(c_token == [Link]){

next();

}else{

[Link]({msg:"unauthorized user !!!"});

};

[Link] = auth;

[Link]

//this file used to develop the login rest api (POST)

//import mongodb module

let mongodb = require("mongodb");

//create the client

//mongodb follows the "client server" architecture

let nareshIT = [Link];

//where "nareshIT" is the client

//import [Link] file

//[Link] file used to save the server side token

let obj = require("../config/token");

 React Js

//generate the token

let generateToken = require("../config/generateToken");

//create and export the "module"

let login = require("express").Router().post("/",(req,res)=>{

[Link]("mongodb://localhost:27017/authproject",(err,db
)=>{

if(err) throw err;

else{

[Link]("login_details")

.find({"uname":[Link],"upwd":[Link]})

.toArray((err,array)=>{

if(err) throw err;

else{

if([Link]>0){

let token =
generateToken({"uname":[Link],

"upwd":[Link]},"hr@[Link]");

[Link] = token;
 React Js

[Link]({login:"success",token:token})

}else{

[Link]({login:"fail"});

});

});

});

[Link] = login;

[Link]

let mongodb = require("mongodb");

let nareshIT = [Link];

let angular =
require("express").Router().get("/",[require("../config/auth")],
(req,res)=>{

[Link]("mongodb://localhost:27017/authproject",(err,db
)=>{

if(err) throw err;

else{

[Link]("angular").find().toArray((err,array)=>{
 React Js

if(err) throw err;

else{

[Link](array);

});

});

});

[Link] = angular;

[Link]

let mongodb = require("mongodb");

let nareshIT = [Link];

let react =
require("express").Router().get("/",[require("../config/auth")],
(req,res)=>{

[Link]("mongodb://localhost:27017/authproject",(err,db
)=>{

if(err) throw err;

else{

[Link]("react").find().toArray((err,array)=>{

if(err) throw err;

else{
 React Js

[Link](array);

});

});

});

[Link] = react;

[Link]

let mongodb = require("mongodb");

let nareshIT = [Link];

let deno =
require("express").Router().get("/",[require("../config/auth")],
(req,res)=>{

[Link]("mongodb://localhost:27017/authproject",(err,db
)=>{

if(err) throw err;

else{

[Link]("deno").find().toArray((err,array)=>{

if(err) throw err;

else{

[Link](array);

}
 React Js

});

});

});

[Link] = deno;

[Link]

let obj = require("../config/token");

let logout =
require("express").Router().get("/",[require("../config/auth")],
(req,res)=>{

[Link] = "";

[Link]({"logout":"success"});

});

[Link] = logout;

[Link]

let express = require("express");

let app = express();

let cors = require("cors");

let bodyparser = require("body-parser");

[Link](cors());

[Link]([Link]());

[Link]([Link]({extended:false}));
 React Js

[Link]("/login",require("./login/login"));

[Link]("/angular",require("./angular/angular"));

[Link]("/react",require("./react/react"));

[Link]("/deno",require("./deno/deno"));

[Link]("/logout",require("./logout/logout"));

[Link](8085);

[Link]("server listening the port no.8085");

Step 5) start the server

> node server

Step 6) test the following rest apis by using Postman.

=> [Link] (POST)

=> [Link] (GET)

=> [Link] (GET)

=> [Link] (GET)

=> [Link] (GET)

Step 7) create the react application

> create-react-app auth-proj

Step 8) switch to the react project

> cd auth-proj

Step 9) download the react modules

 React Js

=> axios

=> redux

=> react-redux

=> redux-saga

=> react-router-dom

=> @material-ui/core

=> @material-ui/icons

CDN : <link rel="stylesheet"

href="[Link]
,700&display=swap" />

CDN : <link rel="stylesheet"

href="[Link]
/>

➢ axios module used to make the rest api calls

➢ redux module used to create the redux architecture
➢ react-redux module used to integrate the redux architecture
to react application.
➢ redux-saga module used to separate the actions.
➢ react-router-dom module used to create the single page
applications
➢ @material-ui/core && @material-ui/icons module used to
implement the rich ui on react application.
 React Js

> yarn add axios redux react-redux redux-saga react-router-

dom @material-ui/core @material-ui/icons –save
[Link]

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8" />

<link rel="icon" href="%PUBLIC_URL%/[Link]" />

<meta name="viewport" content="width=device-width, initial-

scale=1" />

<meta name="theme-color" content="#000000" />

<meta

name="description"

content="Web site created using create-react-app"

/>

<link rel="apple-touch-icon" href="%PUBLIC_URL%/[Link]"

/>

<!--

[Link] provides metadata used when your web app is

installed on a

user's mobile device or desktop. See

[Link]

-->
 React Js

<link rel="manifest" href="%PUBLIC_URL%/[Link]" />

<!--

Notice the use of %PUBLIC_URL% in the tags above.

It will be replaced with the URL of the `public` folder

during the build.

Only files inside the `public` folder can be referenced

from the HTML.

Unlike "/[Link]" or "[Link]",

"%PUBLIC_URL%/[Link]" will

work correctly both with client-side routing and a non-

root public URL.

Learn how to configure a non-root public URL by running

`npm run build`.

-->

<link rel="stylesheet"
href="[Link]
,700&display=swap" />

<link rel="stylesheet"
href="[Link]
/>

<title>React App</title>

</head>

<body>
 React Js

<noscript>You need to enable JavaScript to run this

app.</noscript>

<div id="root"></div>

<!--

This HTML file is a template.

If you open it directly in the browser, you will see an

empty page.

You can add webfonts, meta tags, or analytics to this

file.

The build step will place the bundled scripts into the
<body> tag.

To begin the development, run `npm start` or `yarn start`.

To create a production bundle, use `npm run build` or

`yarn build`.

-->

</body>

</html>

Step 10) crete the action

 React Js

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

auth-proj

src

action

[Link]

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

[Link]

import { takeLatest, put,call, take } from "redux-saga/effects";

import axios from "axios";

import { push } from 'react-router-redux';

import createHistory from 'history/createBrowserHistory';

const history = createHistory()

function login_call(data){

return [Link]("[Link]

};

function* login(action) {

const res = yield call(login_call,[Link]);

if([Link] == "success"){
 React Js

[Link]("login_details",[Link](res.d
ata));

//yield call(forwardTo,"/dashboard");

//[Link]("/dashboard");

yield put({ type: "LOGIN", value: [Link] });

[Link] = `/dashboard`

}else{

//navigate to Error

[Link]("error");

};

function angular_call(){

let str = [Link]("login_details");

let obj = [Link](str);

return [Link]("[Link] headers:{

token : [Link]} });

};
 React Js

function *angular(action){

const res = yield call(angular_call);

yield put({type:"ANGULAR",value:[Link]});

function react_call(){

let str = [Link]("login_details");

let obj = [Link](str);

return
[Link]("[Link] :
[Link]}});

};

function *react(action){

let res = yield call(react_call);

yield put({type:"REACT",value:[Link]});

};

function deno_call(){
 React Js

let str = [Link]("login_details");

let obj = [Link](str);

return
[Link]("[Link] :
[Link]}});

};

function *deno(action){

let res = yield call(deno_call);

yield put({type : "DENO",value : [Link]});

};

function logout_call(){

let str = [Link]("login_details");

let obj = [Link](str);

return
[Link]("[Link] :
[Link]}});

};
 React Js

function *logout(action){

let res = yield call(logout_call);

if([Link] == "success"){

[Link]("login_details");

yield put({type:"LOGOUT",value:res});

[Link] = `/`

}else{

[Link]("error");

};

export function* main_fun() {

yield takeLatest("LOGIN_ACTION", login);

yield takeLatest("ANGULAR_ACTION", angular);

yield takeLatest("REACT_ACTION" , react);

yield takeLatest("DENO_ACTION", deno);

yield takeLatest("LOGOUT_ACTION",logout );

};

function forwardTo(location) {

[Link](location);
 React Js

Step 11) create the reducer

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

auth-proj

reducer

[Link]

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

[Link]

const reducer = (state={},action)=>{

switch([Link]){

case "LOGIN":

return{

...state,

login : [Link]

break;

case "ANGULAR":

case "REACT":

case "DENO":

return{

...state,
 React Js

msg : [Link]

break;

case "LOGOUT":

return{

...state

break;

};

return state;

};

export default reducer;

Step 12) create the "store" and deploy the "reducer"

and make the availability "Main" component.

[Link]

import React from "react";

import ReactDOM from "react-dom";

import "./[Link]";

import App from "./App";

import reducer from "./reducer/reducer";

 React Js

import { Provider } from "react-redux";

import { createStore, applyMiddleware } from "redux";

import createSagaMiddleware from "redux-saga";

import { main_fun } from "./action/action";

const sagaMiddleware = createSagaMiddleware();

const store = createStore(reducer,

applyMiddleware(sagaMiddleware));

[Link](main_fun);

[Link](

<Provider store={store}>

<App />

</Provider>,

[Link]("root")

);

Step 13)Create the Components

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

auth-proj

src

[Link]

[Link]

[Link]

[Link]
 React Js

[Link]

App.s

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

[Link]

import React,{ Component } from "react";

import { connect } from "react-redux";

class Login extends [Link]{

render(){

return(

<div>

<fieldset>

<legend>Login</legend>

<input type="text"

placeholder="user name"

ref="uname"/>

<br></br><br></br>

<input type="password"

placeholder="user password"

ref="upwd"/>

<br></br><br></br>
 React Js

<button
onClick={()=>{[Link]({"uname":[Link],

"upwd":[Link]})}}>Login</button>

</fieldset>

</div>

};

};

//subscribe

const receive = (state)=>{

[Link](state);

};

//dispatch

const send = (dispatch)=>{

return{

login : (obj)=>{
dispatch({type:"LOGIN_ACTION",value:obj}) }

};
 React Js

export default connect(receive,send)(Login);

[Link]

import React,{ Component } from "react";

import Angular from "./Angular";

import ReactJS from "./ReactJS";

import Deno from "./Deno";

import { BrowserRouter as Router, NavLink } from "react-router-

dom";

import Route from "react-router-dom/Route";

import { connect } from "react-redux";

class Dashboard extends [Link]{

render(){

return(

<Router>

<NavLink to="/angular"

activeStyle={{color:"red"}}

exact strict

style={{marginRight:100}}>Angular</NavLink>

<NavLink to="/reactjs"
 React Js

activeStyle={{color:"red"}}

exact strict

style={{marginRight:100}}>React</NavLink>

<NavLink to="/deno"

activeStyle={{color:"red"}}

exact strict

style={{marginRight:100}}>Deno</NavLink>

<button
onClick={[Link]}>Logout</button>

<br></br><br></br>

<Route path="/angular" exact strict

component={Angular} />

<Route path="/reactjs" exact strict

component={ReactJS} />

<Route path="/deno" exact strict

component={Deno} />

</Router>

};
 React Js

const receive = (state)=>{

return{

};

const send = (dispatch)=>{

return{

logout : ()=>{

[Link]("hello");

dispatch({type:"LOGOUT_ACTION",value:{}}) }

};

export default connect(receive,send)(Dashboard);

[Link]

import React,{ Component } from "react";

import { connect } from "react-redux";

class Angular extends [Link]{

 React Js

componentDidMount(){

[Link]();

};

render(){

return(

<div>

{[Link]([Link])}

</div>

};

const receive = (state)=>{

[Link](state);

return{

angular : state

};

const send = (dispatch)=>{

return{

getAngularData : ()=>{
dispatch({type:"ANGULAR_ACTION",value:{}}) }

}
 React Js

export default connect(receive,send)(Angular);

[Link]

import React,{ Component } from "react";

import {connect} from "react-redux";

class ReactJS extends [Link]{

componentDidMount(){

[Link]();

};

render(){

return(

<div>

{[Link]([Link])}

</div>

};

const receive = (state)=>{

return{

msg : state

}
 React Js

};

const send = (dispatch)=>{

return{

getReactModuleData : ()=>{
dispatch({type:"REACT_ACTION",value:{} }) }

};

export default connect(receive,send)(ReactJS);

[Link]

import React,{ Component } from "react";

import { connect } from "react-redux";

class Deno extends [Link]{

componentDidMount(){

[Link]();

};

render(){

return(

<div>

{[Link]([Link])}

</div>

}
 React Js

};

const receive = (state)=>{

return{

msg : state

};

const send = (dispatch)=>{

return{

getDenoData : ()=>{
dispatch({type:"DENO_ACTION",value:{}}) }

};

export default connect(receive,send)(Deno);

[Link]

import React,{ Component } from "react";

import Login from "./Login";

import Dashboard from "./Dashboard";

import { BrowserRouter as Router } from "react-router-dom";

import Route from "react-router-dom/Route";

class App extends [Link]{

render(){

return(
 React Js

<Router>

<Route path="/" component={Login} exact strict />

<Route path="/dashboard" component={Dashboard} exact

strict/>

</Router>

}};

export default App;

Step 14)

execute the application with the help of node

server.

//Terminal-1

> cd miniproject-app

> cd server

> node server

//Terminal-2

> mongod

//Terminal-3

>cd auth-proj

> yarn start

 React Js

Chapter-18(Validations Example)
In this example we will store the data into database (SQLServer)

Step 1) install SQLServer

SQL Server 2014 Management Studio

Step 2) Make the database ready to store the data

React Js
React Js
 React Js

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

user : sa

password : 123

server : localhost

database : reactjs

table : registration

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

Step 3) create the react project

> create-react-app registration-app

Step 4) switch to react application

> cd registration-app

Step 5) download the node modules

=> express

=> cors

=> [email protected]

=> body-parser

=> axios

• "express" is the node module, used to develop the rest apis

• "cors" module also node module, used to provide the
communication between ports.
• "[email protected]" module used to connect to SQLServer.
• "body-parser" used to read the client data (post parameters)
 React Js

• "axios" module used to make the asynchronous calls

• we will download above modules by using "yarn" tool

> yarn add express cors [email protected] body-parser axios --save

Step 6) develop the rest api by using nodejs

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

registration-app

server

[Link]

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

[Link]

//import the modules

//require() function is used to import the modules

let express = require("express");

let mssql = require("mssql");

let cors = require("cors");

let bodyparser = require("body-parser");

//rest apis => GET,POST,PUT,DELETE,HEAD,OPTIONS,TRACE (urls)

 React Js

//master obj (rest obj)

//where "app" object is rest obj

//where "app" object used to develop the rest apis

let app = express();

//ports communication

[Link](cors());

//set the json as communication language (MIME Type)

[Link]([Link]());

//read the client data (form data)(extended parameters)

[Link]([Link]({extended:false}));

//create the rest api

[Link]("/registration",(req,res)=>{

//connect to SQLServer

[Link]({

user:"sa",

password:"123",

server:"localhost",
 React Js

database:"reactjs"

},(err)=>{

if(err) throw err;

else{

//create the query object

//query object used to execute the SQL Queries

//where "request" is the query object

let request = new [Link]();

//execute SQL Query

[Link](`insert into registration values('${re

[Link]}','${[Link]}','${[Link]}','${[Link]
[Link]}','${[Link]}','${[Link]}','${[Link]
[Link]}')`,(err)=>{

if(err) throw err;

else{

[Link]({registration:"success"});

})

});

});

//assign the port no

 React Js

[Link](8080);

[Link]("server listening the port no.8080");

Step 7) start the node server

> cd registration-app

> cd server

> node server

Step 8) test the following rest api by using Postman

=> [Link] (POST)

React Js
 React Js

Step 9) download the bootstrap

Terminal-2

----------

> cd registration-app

> yarn add boostrap –save

Step 10) create the App Component

[Link]

import React,{ Component } from "react";

import "../node_modules/bootstrap/dist/css/[Link]";

import axios from "axios";

export default class App extends [Link]{

constructor(){

super();

[Link] = {

"country":"",

"countryValid":false,
 React Js

"Female":false,

"Male":false,

"genderValid":false,

"English":false,

"Hindi":false,

"Telugu":false,

"fname":"",

"lname":"",

"email":"",

"dob":"",

"dobValid":false,

"emailValid":false,

"fnameValid":false,

"lnameValid":false,

"formValid":false,

"languagesValid":false,

"formErrors":{"fname":"",

"lname":"",

"email":"",

"dob":"",

"languages":"",

"gender":"",
 React Js

"country":""}

};

};

register = (event)=>{

let languages = [];

let gender="";

for(let key in [Link]){

if(key === "English" || key === "Telugu" || key ===

"Hindi"){

if([Link][key]===true){

[Link](key);

};

}else if(key === "Male" || key === "Female"){

if([Link][key] === true ){

gender = key

};

let record = {

"fname":[Link],

"lname":[Link],
 React Js

"email":[Link],

"dob":[Link],

"gender":gender,

"languages":languages,

"country":[Link]

};

[Link]("[Link]

.then((posRes)=>{

[Link](posRes);

},(errRes)=>{

[Link](errRes);

});

};

handleChange = (event)=>{

let name = [Link];

let value = [Link];

switch(name){

case "English":
 React Js

[Link](prevState=>({

English : ![Link]

}),()=>{[Link](name,value)});

break;

case "Telugu":

[Link](prevState=>({

Telugu : ![Link]

}),()=>{[Link](name,value)});

break;

case "Hindi":

[Link](prevState=>({

Hindi : ![Link]

}),()=>{[Link](name,value)});

break;

case "Gender":

if(value === "Male"){

[Link](prevState=>({

Male : ![Link]

}),()=>{[Link](name,value)});

}else{

[Link](prevState=>({

Female : ![Link]
 React Js

}),()=>{[Link](name,value)});

break;

default:

[Link]({

[name]:value

},()=>{[Link](name,value)});

break;

};

validateForm(name,value){

let l_countryValid = [Link];

let l_genderValid = [Link];

let l_fnameValid = [Link];

let l_lnameValid = [Link];

let l_emailValid = [Link];

let l_dobValid = [Link];

let l_languagesValid = [Link];

let l_formErrors = [Link];

switch(name){

case "country":
 React Js

l_countryValid = [Link]<0;

l_formErrors.country = l_countryValid ? "" : "se

lect at least one country";

break;

case "Gender":

l_genderValid = [Link] || [Link]

[Link];

l_formErrors.gender = l_genderValid ? "" : "

select gender";

break;

case "fname":

l_fnameValid = [Link]>6;

l_formErrors.fname = l_fnameValid ? "" : "first

name must be 6 characters";

break;

case "lname":

l_lnameValid = [Link]>3;

l_formErrors.lname = l_lnameValid ? "" : "last n

ame must be 3 characters";

break;

case "email":

l_emailValid = [Link](/^([\w.%+-]+)@([\w-
]+\.)+([\w]{2,})$/i);;
 React Js

l_formErrors.email = l_emailValid ? "" : " email

not matched the required pattern" ;

break;

case "dob":

l_dobValid= [Link]>8;

l_formErrors.dob = l_dobValid ? "" : "please s

elect dob";

break;

case "English":

case "Telugu":

case "Hindi":

l_languagesValid = [Link] || this.s

[Link] || [Link];

l_formErrors.languages = l_languagesValid?"":"s
elect at least one language"

break;

};

[Link]({

fnameValid:l_fnameValid,

lnameValid:l_lnameValid,

emailValid:l_emailValid,

dobValid:l_dobValid,
 React Js

languagesValid:l_languagesValid,

genderValid : l_genderValid,

formErrors:l_formErrors

},[Link] );

};

finalFun(){

[Link]({

formValid : [Link],

formValid : [Link],

formValid : [Link],

formValid : [Link],

formValid : [Link],

formValid : [Link]

})

};

render(){

return(

<div className="container mt-5">

<div className="jumbotron" align-center >

 React Js

<h3 className="text-center">Registration Form</h3>

<div className="row mt-4">

<div className="col-md-4">

<label>First Name</label>

</div>

<div className="col-md-8">

<input type="text"

name="fname"

value={[Link]}

placeholder="Enter First Name"

required

onChange={[Link]}></in
put>

<h5 style={{color:"red"}}>{[Link]
[Link]}</h5>

</div>

</div>

<div className="row">
 React Js

<div className="col-md-4">

<label>Last Name</label>

</div>

<div className="col-md-8">

<input type="text"

name="lname"

value={[Link]}

placeholder="Enter Last Name"

required

onChange={[Link]}></in
put>

<h5 style={{color:"red"}}>{[Link]
[Link]}</h5>

</div>

</div>

<div className="row">

<div className="col-md-4">

<label>Email</label>

</div>
 React Js

<div className="col-md-8">

<input type="email"

name="email"

value={[Link]}

placeholder="Enter Email"

required

onChange={[Link]}></in
put>

<h5 style={{color:"red"}}>{[Link]
[Link]}</h5>

</div>

</div>

<div className="row">

<div className="col-md-4">

<label>Date Of Birth</label>

</div>

<div className="col-md-8">

<input type="date"

name="dob"

value={[Link]}
 React Js

placeholder="Enter Date of Birth"

required

onChange={[Link]}></in
put>

<h5 style={{color:"red"}}>{[Link]
[Link]}</h5>

</div>

</div>

<div className="row">

<div className="col-md-4">

<label>Languages</label>

</div>

<div className="col-md-8">

<input type="checkbox"

checked={[Link]}

name="English"

value="English"

onChange={[Link]}/> <b
>English</b>

<input type="checkbox"

className="ml-1"
 React Js

name="Telugu"

value="Telugu"

checked={[Link]}

onChange={[Link]}/> <b
>Telugu</b>

<input type="checkbox"

className="ml-1"

name="Hindi"

value="Hindi"

checked={[Link]}

onChange={[Link]}/> <b
>Hindi</b>

</div>

<h5 style={{color:"red"}}>{[Link]
[Link]}</h5>

</div>

<br></br>

<div className="row">

<div className="col-md-4">

<label>Gender</label>

</div>

<div className="col-md-8">
 React Js

<input type="radio"

name="Gender"

value="Male"

checked={[Link]}

onChange={[Link]}/> <b
>Male</b>

<input type="radio"

name="Gender"

value="Female"

checked={[Link]}

onChange={[Link]}

className="ml-2"/> <b>Female</b>

</div>

</div>

<br></br><br></br>

<div className="row">

<div className="col-md-4">

Country

</div>

<div className="col-md-8">

<select name="country"
 React Js

value={[Link]}

onChange={[Link]}>

<option value="india">India</option>

<option value="usa">USA</option>

<option value="uk">London</option>

</select>

</div>

</div>

<br></br>

<div className="row">

<div className="col-md-4"></div>

<div className="col-md-8">

<button className="btn btn-success btn-sm"

disabled={![Link]}

onClick={[Link]}>Register</button>

</div></div>

</div></div>

};

};

OutPut:
React Js
 React Js

(CRUD Operations-Server Files)

(MYSQL-MSSQL-MONGODB)

1) install MySQL DataBase.

Ex.

[Link]

2) create the database in MySQL.

Queries:

Default Password : root

> show databases;

- it will show available databases.

> create schema crud;

- crud database will be created.

> use crud;

- we can switch to crud database.

> create table products(p_id integer,p_name

varchar(20),p_cost integer);
 React Js

- automatically products table will be created.

> insert into products values(111,'p_one',10000);

- automatically we can insert the record into database.

> select * from products;

- we can fetch the records from database.

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

host : localhost

user : root

password : root

database : crud

table : products

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

3) create the directory

Ex.

MySQL_CRUD

4) switch to MySQL_CRUD
 React Js

> cd MySQL_CRUD

5) download the node modules

=> mysql

=> cors

=> body-parser

=> express

- express module used to develop the rest apis.

GET

POST

PUT

DELETE

HEAD

- cors module used to enable the ports communication.

- body-parser module used to read the client data.

- mysql module used to interact with the mysql database.

> yarn add mysql cors body-parser express --save

6) develop the rest apis by using NodeJS

=> GET (Fetch the records from database)

 React Js

=> POST (Insert the record into database)

=> PUT (Update the record in database)

=> DELETE (Delete the record from database)

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

MySQL_CRUD

config

db_properties.js

db_connection.js

fetch

[Link]

insert

[Link]

update

[Link]

delete

[Link]

[Link]

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

• "db_properties.js" file used to maintain the database details.

• "db_connection.js" file used to create and return the connection
object.
 React Js

• "[Link]" file used to create the GET Request. (fetch the data
from products table).
• "[Link]" file used to create the POST Request (insert the
record into products table).
• "[Link]" file used to create the PUT Request (update the
record into products table).
• "[Link]" file used to create the DELETE Request (delete the
record from products table).

db_properties.js

let obj = {

host : "localhost",

user : "root",

password : "root",

database : "crud"

};

[Link] = obj;

db_connection.js

let obj = require("./db_properties");

let mysql = require("mysql");

let conn = {

getConnection : ()=>{

return [Link](obj);

}
 React Js

};

[Link] = conn;

[Link]

let conn = require("../config/db_connection");

let connection = [Link]();

let fetch = require("express").Router().get("/",(req,res)=>{

[Link](`select * from
products`,(err,records,fields)=>{

if(err) throw err;

else{

[Link](records);

});

});

[Link] = fetch;

[Link]

let conn = require("../config/db_connection");

let connection = [Link]();

let insert = require("express").Router().post("/",(req,res)=>{

[Link](`insert into products

values(${[Link].p_id},'${[Link].p_name}',${[Link].p_cost})
`,
 React Js

(err,result)=>{

if(err) throw err;

else{

[Link]({insert:"success"});

});

});

[Link] = insert;

[Link]

let conn = require("../config/db_connection");

let connection = [Link]();

let update = require("express").Router().put("/",(req,res)=>{

[Link](`update products set

p_name='${[Link].p_name}',p_cost=${[Link].p_cost} where
p_id=${[Link].p_id}`,

(err,result)=>{

if(err) throw err;

else{

[Link]({update : "success"});

});
 React Js

});

[Link] = update;

[Link]

let conn = require("../config/db_connection");

let connection = [Link]();

let remove = require("express").Router().delete("/",(req,res)=>{

[Link](`delete from products where

p_id=${[Link].p_id}`,(err,result)=>{

if(err) throw err;

else{

[Link]({delete:"success"});

});

});

[Link] = remove;

[Link]

let express = require("express");

let app = express();

let cors = require("cors");

let bodyparser = require("body-parser");

[Link](cors());

[Link]([Link]());
 React Js

[Link]([Link]({extended:false}));

[Link]("/fetch",require("./fetch/fetch"));

[Link]("/insert",require("./insert/insert"));

[Link]("/update",require("./update/update"));

[Link]("/delete",require("./delete/delete"));

[Link](8080);

[Link]("server listening the port no.8080");

7) start the node server

> cd MySQL_CRUD

> node server

8) test the rest apis by using Postman.

=> [Link] (GET)

=> [Link] (POST)

=> [Link] (PUT)

=> [Link] (DELETE)

*****************************
 React Js

MongoDB CRUD Operations

-----------------------

1) create the directory

MongoDB_CRUD

2) switch to MongoDB_CRUD

> cd MongoDB_CRUD

3) create the database

> mongod

- start the server

> mongo

- we will connect to server

> use crud;

- automatically crud database will be created.

> [Link]("products");

- products collection will be created

> [Link]({"p_id":111,

"p_name":"p_one",

"p_cost":10000});

- we can insert object into products collection.

> [Link]();
 React Js

- we can fetch the data from products collection.

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

host : localhost

port : 27017

protocol : mongodb

database : crud

collection : products

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

4) download the node modules

=> express

=> [email protected]

=> cors

=> body-parser

• "express" module used to develop the rest apis.

▪ GET
▪ POST
▪ PUT
▪ DELETE
• "[email protected]" module used to interact with the mongodb
database.
• "cors" module used to enable the ports communication.
 React Js

• "body-parser" module used to read the client data.

> yarn add express [email protected] cors body-parser --save

5) develop the rest apis by using NodeJS

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

MongoDB_CRUD

fetch

[Link]

insert

[Link]

update

[Link]

delete

[Link]

[Link]

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

• [Link] file used to create the GET Request (fetch the data
from products collection)
• [Link] file used to create the POST Request (insert the
record into products collection)
• [Link] file used to create the PUT Request (update the
record present in products collection)
 React Js

• [Link] file used to create the DELETE Request (delete the

record from products collection)
• [Link] file used to collabrate the modules.

[Link]

let mongodb = require("mongodb");

let nareshIT = [Link];

let fetch = require("express").Router().get("/",(req,res)=>{

[Link]("mongodb://localhost:27017/crud",(err,db)=>{

if(err) throw err;

else{

[Link]("products").find().toArray((err,array)=>{

if(err) throw err;

else{

[Link](array);

})

});

});

[Link] = fetch;
 React Js

[Link]

let mongodb = require("mongodb");

let nareshIT = [Link];

let insert = require("express").Router().post("/",(req,res)=>{

[Link]("mongodb://localhost:27017/crud",(err,db)=>{

if(err) throw err;

else{

[Link]("products").insertOne({"p_id":[Link].p_id,

"p_name":[Link].p_name,

"p_cost":[Link].p_cost},(err,result)=>{

if(err) throw err;

else{

[Link]({insert : "success"});

});

});

});

[Link] = insert;
 React Js

[Link]

let mongodb = require("mongodb");

let nareshIT = [Link];

let update = require("express").Router().put("/",(req,res)=>{

[Link]("mongodb://localhost:27017/crud",(err,db)=>{

if(err) throw err;

else{

[Link]("products").updateOne({"p_id":[Link].p_id},

{$set:{"p_name":[Link].p_name,"p_cost":[Link].p_cost}}

(err,result)=>{

if(err) throw err;

else{

[Link]({update : "success"});

});

});

});
 React Js

[Link] = update;

[Link]

let mongodb = require("mongodb");

let nareshIT = [Link];

let remove = require("express").Router().delete("/",(req,res)=>{

[Link]("mongodb://localhost:27017/crud",(err,db)=>{

if(err) throw err;

else{

[Link]("products").deleteOne({"p_id":[Link].p_id},(err,
result)=>{

if(err) throw err;

else{

[Link]({delete : "success"});

});

});});

[Link] = remove;

[Link]

let express = require("express");

 React Js

let app = express();

let cors = require("cors");

let bodyparser = require("body-parser");

[Link](cors());

[Link]([Link]());

[Link]([Link]({extended:false}));

[Link]("/fetch",require("./fetch/fetch"));

[Link]("/insert",require("./insert/insert"));

[Link]("/update",require("./update/update"));

[Link]("/delete",require("./delete/delete"));

[Link](8080);

[Link]("server listening the port no.8080");

6) start the server

> node server

7) test the rest apis by using Postman

=> [Link] (GET)

=> [Link] (POST)

=> [Link] (PUT)

=> [Link] (DELETE)

**********************************
 React Js

SQLServer CRUD Operations

-------------------------

1) install SQLServer

Ex.

SQL Server 2014 Management Studio

2) create the database

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

user : sa

password : 123

database : crud

table : products

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

3) create the directory (MSSQL_CRUD)

4) switch to MSSQL_CRUD

> cd MSSQL_CRUD

5) download node modules

=> express

=> cors

=> body-parser

=> [email protected]
 React Js

> yarn add express cors body-parser [email protected] --save

6) create the rest apis

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

MSSQL_CRUD

config

db_properties.js

fetch

[Link]

insert

[Link]

update

[Link]

delete

[Link]

[Link]

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

db_properties.js

let obj = {

server : "localhost",
 React Js

user : "sa",

password : "123",

database : "crud"

};

[Link] = obj;

[Link]

let obj = require("../config/db_properties");

let mssql = require("mssql");

let fetch = require("express").Router().get("/",(req,res)=>{

[Link](obj,(err)=>{

if(err) throw err;

else{

let request = new [Link]();

[Link](`select * from
products`,(err,records)=>{

if(err) throw err;

else{

[Link]([Link]);

[Link]();

});

}
 React Js

});

});

[Link] = fetch;

[Link]

let obj = require("../config/db_properties");

let mssql = require("mssql");

let insert = require("express").Router().post("/",(req,res)=>{

[Link](obj,(err)=>{

if(err) throw err;

else{

let request = new [Link]();

[Link](`insert into products

values(${[Link].p_id},

'${[Link].p_name}',

${[Link].p_cost})`,(err,result)=>{

if(err) throw err;

else{

[Link]({insert : "success"});

[Link]();
 React Js

});

});

});

[Link] = insert;

[Link]

let obj = require("../config/db_properties");

let mssql = require("mssql");

let update = require("express").Router().put("/",(req,res)=>{

[Link](obj,(err)=>{

if(err) throw err;

else{

let request = new [Link]();

[Link](`update products set

p_name='${[Link].p_name}',p_cost=${[Link].p_cost} where
p_id=${[Link].p_id}`,

(err,result)=>{

if(err) throw err;

else{

[Link]({update : "success"});

[Link]();
 React Js

});

});

});

[Link] = update;

[Link]

let obj = require("../config/db_properties");

let mssql = require("mssql");

let remove = require("express").Router().delete("/",(req,res)=>{

[Link](obj,(err)=>{

if(err) throw err;

else{

let request = new [Link]();

[Link](`delete from products where

p_id=${[Link].p_id}`,(err,result)=>{

if(err) throw err;

else{

[Link]({delete:"success"});

[Link]();

});

}
 React Js

});

});

[Link] = remove;

[Link]

let express = require("express");

let app = express();

let cors = require("cors");

let bodyparser = require("body-parser");

[Link](cors());

[Link]([Link]());

[Link]([Link]({extended:false}));

[Link]("/fetch",require("./fetch/fetch"));

[Link]("/insert",require("./insert/insert"));

[Link]("/update",require("./update/update"));

[Link]("/delete",require("./delete/delete"));

[Link](8080);

[Link]("server listening the port no.8080");

7) start the server

> cd MSSQL_CRUD

> node server

 React Js

8) test the following urls by using Postman

=> [Link] (GET)

=> [Link] (POST)

=> [Link] (PUT)

=> [Link] (DELETE)