MERN - React js

React: React js one of the most popular front-end lib

-Developing UI Components

-Maintain and managed by Facebook

Pre-request:

HTML

CSS

Java Script

MERN - MVC Architecture

M- Model(Database, Mongo DB)

V- View - React js

C- Controller

Software:
Visual studio Code

node

Mongo DB

Difference b/w Angular & React

-Angular have more concept than react

-Angular is complex than our react

-Both are equal opportunity

In visual studio code :

-project path

-node -v

-npm -v
react & react DOM:
-npm install react react-dom --save

web pack:
-npm install webpack webpack-dev-server webpack-cli --save

create a react project:

- npx create-react-app anuproject

-cd anuproject

Run:
-npm start

Local: http://localhost:3000

On Your Network: http://192.168.1.100:3000

React Components:
React component is the building block of react application.

Function Component:
easy way to return our components

Example :

function App() {

return (

<div className="App">

<img src="https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072821__480.jpg"></img>

</div>

);

Class component:
class component is more complex than function component

-render method
-return method

Example :

class App extends React.Component{

render(){

return(

<div>

<h1>Hello Everyone</h1>

</div>

React State :
-updatable data structure

-contain the information about components

-value can be change

Example :

class App extends React.Component{

constructor(){

super();

this.state={name:"iygygyg"};

render(){

return(

<div><h1>ftyft uygygyugyg</h1>{this.state.name}</div>

React Props :
Calculator project :

Function App(){
Const[value,setValue]=useState(‘ ’);
Return( <div className=”container”>
<form action=””>
<input type=”text” value={value} />
<div>
<input type=”button” value=”1” onClick={e=>setValue(value +e.target.value)} />
<input type=”button” value=”2” onClick={e=>setValue(value +e.target.value)} />
 <input type=”button” value=”3” onClick={e=>setValue(value +e.target.value)} />
<input type=”button” value=”+” onClick={e=>setValue(“”)} />

<input type=”button” value=”=” className=”equal”

onClick={e=>setValue(eval(value))} />
</div>
</form>
</div>)
}

NODE JS

Create server

Example :

let z=require("http");

z.createServer(function(req,res){

res.writeHead(200,{"content-type":"text/html"});

res.end("<h1>gtugyu ygygyu</h1>");

}).listen(8085);

NODE JS Object :

let pavithra={

mark:80,

addr:"karur"

console.log(pavithra.mark);

console.log(pavithra.addr);

USER DEFINE BUILDIN OBJECT :

function demo(){

console.log("hello everyone");
}

let z={

output:demo,

name:"pavithra"

z.output();

console.log(z.name);

console.log(Math.PI);

console.log(Math.SQRT2);

NODE JS JSON :

ARRAY
 collection of similar data and also used to store multiple values.

// create an array

let live=["pavithra","vicky","sangavi"];

console.log(live[0]);

// upadte value in array

live[1]="anup";

console.log(live[1]);

// push method to add data at last

live.push("anup");

console.log(live);

// pop method to remove the data in array

live.pop();

console.log(live);
// to find length of an array
console.log(live.length);

NODE JS FUNCTION :
 A function is a group of statements that together perform a task

Example :
function demo(z){

console.log(`helo, ${z}`);

demo("pavithra");

HIGHER ORDER FUNCTION :

A higher order function is a function that takes one or more functions as arguments, or returns a
function as its result.

Example :
function add(a,b,callback){

return callback(a,b);

function multiply(a,b){

return a+b;

console.log(add(12,2,multiply));

NODE JS OPERATOR

NODE JS LOOP

NODE JS CLASS
constructor function

function Demos(name,age){
this.name=name;
this.age=age;
}
const z1=new Demos("pavithra",30);
console.log(z1.name);
console.log(z1.age);

EXCEPTION HANDLING :
Exception Handling in Java or Java Exceptions with checked, unchecked and errors with
example and usage of try, catch, throw, throws and finally keywords.

Example :
function Democ(){
throw new Error("error msg");
}
try{
Democ();
}catch(e){
console.error(e.message);
} finally {
console.log("demo");
}

NODE JS GLOBALS

NODEJS Asynchronous Function *

function Demoss(){
// set timeout function
setTimeout(function(){
console.log("pavithra");
},9000);
console.log("hello everyone");
}
Demoss();

NODE JS WEB
 HTTP Response code
200 – ok
400 – bad request
401 – unautorized
404 – not found
500 – server error
501 – server unavailable

BUFFER :
Buffer is used to Convert all out data into binary datas or numbers.
Example :

String used:
var zm=new Buffer("pavithra");
console.log(zm);

Number used :
var zm=new Buffer.alloc(10);
console.log(zm);

NODE JS PROCESS :
What are the things we need to excute the program in the terminal.

// process

function addd(a){
let b=0;
for(let x of a){
b+=x;
}
return b;
}
// command line arguments
const l=addd([3,5,6,2]);
console.log(l);

NODE JS SETTIMEOUT AND SET INTERVAL :

Diff between set timeout and set interval :
SET TIMEOUT :
setTimeout(function(){
console.log("pavithra");
},9000);
SET INTERVAL :
let a1=12;
let mydata=setInterval(function(){
console.log("pavithra");
a1++;
console.log(a1);
if(a1==20){
clearInterval(mydata);
 }
},2000);

Body Parser : ( library )

Src :
- npm install body-parser
Express intsall :
- npm install express
EJS install :
- npm install ejs
If I click submit button the body parser to get the input from the user
and request to server.
Template engine :
Help us to create a dynamic page ( EJS => embedded javascript )

Create ejs file : ( home.ejs )

Example :
Anup.js :
const bodyparser=require('body-parser');
const express=require('express');
const path=require('path'); // add libraries

const app=express(); // connect express

let port=process.env.port || 8081
// set port
// set engine
// engine where the ejs file then its the default index file in express
app.set("views",path.join(__dirname));
app.set("views engine","ejs");

// add bp
app.use(bodyparser.urlencoded({extended:true}));
app.use(bodyparser.json());

// add routing

app.get("/",function(req,res){
res.render("home");
});

app.post("/data",function(req,res){
console.log("your name",req.body.name);
});
 app.listen(port);
home.ejs :
<html>
<head></head>
<body>
<form method="post" action="data">
<input type="text" name="name" id="" placeholder="enter
your name" required ><br>
<button type="submit">submit</button>
</form>
</body>
</html>

MODULE :
Collection of functionality present in it.
File Module :
let z=require("fs"); // work on file system

// read file
z.readFile("demo.txt",function(error,data){
if(error) throw error;
console.log(data.toString());
});

// write operation
z.writeFile("demo.txt","helo pavithra",function(err,data){
if(err) throw err;
console.log("file done");
})

PATH MODULE :
let z=require("path");
// to find which folder you are
var a=z.basename("C:\\node\\anup.js");

// to find which extension you are

var b=z.extname("C:\\node\\anup.js");
console.log(a);
console.log(b);

Bcrypt Module :
bcrypt is a type of cryptographic algorithm used to securely store passwords. It scrambles a
user's password into a unique code. This way, even if a thief takes the database, they won't
be able to recover the original passwords readily.

Install bcrypt :
- npm install bcryptjs

let c=require("bcryptjs");
var pname="pavithra";
var bv;
// genSalt is rounting the value
// hash is provide random values

c.genSalt(10,function(err,result){
 c.hash(pname,result,function(err,hash){
if(err) throw err;
bv=hash;
console.log(hash);
});
});

NODE JS OS MODULE :
let z=require("os");

console.log(z.platform());
console.log(z.totalmem());
console.log(z.freemem());
console.log(z.homedir());
console.log(z.hostname());

NODE JS UTIL :
var z=require("util");

var name="sukumar";
var age=28;
var rank=5;

var a=z.format('name is %s',name);

var b=z.format('age is %d',age);
console.log(a);
console.log(b);

PACKAGE.JSON :
 - its contains info about our project what is the module use and what is the version

MODE PACKAGE MANAGER ( NPM )

NPM JSON

NODE JS ACTION EVENT : *

Set timeout function also the action event :
console.log("uytftf uygygyg");
console.log("igygyg uygygy ugyugygy");
setTimeout(function(){
console.log("jhgyg uygygyg uygygyg")
},5000);

EVENT LOOP : *
console.log("uytftf uygygyg");
console.log("igygyg uygygy ugyugygy");
setTimeout(function(){
console.log("jhgyg uygygyg uygygyg")
},5000);

NODE JS STREAM :
let z=require("fs");
var data="";
// read
var read=z.createReadStream("demo.txt");
// find size of the data
read.on("data",function(chunk){
data +=chunk;
});
read.on("end",function(){
console.log(data);
});
WRITE STREAM :
let z=require("fs");
var data="hello gftft";

// write
var read=z.createWriteStream("demo.txt");
read.write(data,"utf-8");
read.on("data",function(){
console.log("end");
});
CUSTOM STREAM : ( read data in one file and write it into another file )
let z=require("fs");
var read=z.createReadStream("demo.txt");
var read1=z.createWriteStream("sukumar.txt");
read.pipe(read1);
console.log("done");

NODE JS HTTP :
let z=require("http");

z.createServer(function(req,res){
res.writeHead(200,{"content-type":"text/html"});
res.end("<h1>gtugyu ygygyu</h1>");
}).listen(8085);
HTTP :
- its not only for server creation and its also used to create API – crud operation
HTTP Headers :
- Its contain response code
HTTP Files :
- Its contain content-type