REACT JS:

1. react js is client side javascript library.

2. modern user interfaces for the web.

JAVASCRIPT FUNCTIONALITIES:

Arrow function:
In Es6 version
Ex:
const value = (n1,n2)=>{
return n1+n2;
}
console.log(value(10,20));

Method 2:
const value = (n1,n2)=> n1+n2;
console.log(value(10,20));

In react js Es 6 we need constructor and super constructor for inheriting a class

and to declare data
and it is large in size of code.
Ex:
class human{
constructor(){
this.name = "yaso";
this.age = 20;
}
printname(){
console.log(this.name);
}
printage(){
console.log(this.age);
}
}
class person extends human{
constructor(){
super();
this.name = "yaso krishna";
this.age = 21;
}
printname(){
console.log(this.name);
}
printage(){
console.log(this.age);
}
}
const persons = new person();
persons.printname()
persons.printage()
output:
"yaso krishna"
21

IN Es7:
Whereas, in Es 7 we dont nedd any constructor and super constructor with the help
of arrow function we can directly have data in the console and it reduces the code
with easy way to understand it.
Ex:
class human{
name = "yaso";
age = 20;
printname = () => console.log(this.name);
printage = () => console.log(this.age);
}
class person extends human{
name = "yaso krishna";
age = 21;
printname = () => console.log(this.name);
printage = () => console.log(this.age);
}
const persons = new person();
persons.printname()
persons.printage()
output:
"yaso krishna"
21

JS Spread operator:
It is used to expand the data from one set to another with spread operator.
In Array:
without using spread operator:
Ex:
set1 = [1,2,3,4,5];
set2 = [6,7,8,9,10];
console.log(set1);
console.log(set2);
output:
[1, 2, 3, 4, 5]
[6, 7, 8, 9, 10]
with spread operator:
Ex:
set1 = [1,2,3,4,5];
set2 = [...set1,6,7,8,9,10];
console.log(set1);
console.log(set2);
output:
[1, 2, 3, 4, 5]
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

In Object:
Here we are using a object with spread operator to expand the data in object, that
copys data from one object to other.
Ex:
set1 = {
name : "yaso",
age : 20
}
set2 = {
...set1,
email : "[email protected]"
}
console.log(set2);

output:
[object Object] {
 age: 20,
email: "[email protected]",
name: "yaso"
}

Javascript Destructuring Assignment:

It is basically defined as assigning a group of values to individual variables (ie)
unpacking the values from a set.
In Array:

Ex:
values = [10,20,30];
[a,b,c] = values;
console.log(a,b,c);

output:
10
20
30

It assigns values in the form of first come first serve(FCFS)

If we want to remove any value we simply remove it and retreive the wanted values
and it is based on the positions of the values in array.
Ex:
values = [10,20,30];
[a,,c] = values;
console.log(a,c);

output:
10
30

In Object:

Ex:
values = {
email : "[email protected]",
age : 20
}
console.log(email)

output:
Reference Error: "email is not defined."
the email is present in the object so we cant directly print the value it gives the
reference error.
To overcome those errors
Ex:
values = {
email : "[email protected]",
age : 20
}
console.log(values.email)

output:
"[email protected]"
Here the values is the reference we need to give to get the output of selected
value in a object and the email is in the values (ie) inside of values object in
above example.
Object Destructuring:
We use a const object to destructure the object and it is based on the names of the
value in a object to assign the values. without any reference we obtain the values
easily.
Ex:
values = {
email : "[email protected]",
age : 20
}
const{email,age} = values;
console.log(email)
console.log(age)

output:
"[email protected]"
20

JavaScript Reset Operator:

it is defined as it accepts infinite number of arguments in to a array is called
the reset operator.
Ex:
const array = (...arr) => console.log(arr);

array(10,20,30,40,50,60)

output:
[10, 20, 30, 40, 50, 60]

If we want the specific array values to be seperated from the variable we choose we
add another variable to store the unwanted data or values.
Ex:
const array = (a,b,...arr) => console.log(a,b);

array(10,20,30,40,50,60)

output:
[10, 20, 30, 40, 50, 60]
[20, 30, 40, 50, 60]
[30, 40, 50, 60]
10
20

JavaScript Arrays:

To enter data into array we use the method "array.push()" and it adds elements at
the "start".

To delete data from the array we use the emthod "array.pop()" and it removes
elements in the array from the "end" (ie) the array last index element will be
removed.

To remove array elements from the starting index of an arrya we use the method
array.shift() so that it will removes the first entered element in the array.

To remove a element in the array of specific data we use the method

"array.splice()" it will remove the element at pecified index of the array.

Ex:
1. Push:

let array = [10,20,30,40];

console.log(array);
array.push(50);
console.log(array);

output:
[10, 20, 30, 40]
[10, 20, 30, 40, 50]

2. Pop:

i.To delete last element of array

let array = [10,20,30,40];

array.pop();
console.log(array);

output:
[10, 20, 30]

ii. To delete first element of array

let array = [10,20,30,40];

array.shift();
console.log(array);

output:
[20, 30, 40]

iii. To delete element of a array at specified index value

let array = [10,20,30,40];

let index = 2;
array.splice(index,1);
console.log(array);

output:
[10, 20, 40]

iv. To delete a element without its index position but by using the value in to
array.indexOf() method

let array = [10,20,30,40];

let index = array.indexOf(20);
array.splice(index,1);
console.log(array);

output:
[10, 30, 40]

React app creation:

install node js:

In cmd enter node --version to check for node installed or not.

React js three important commands:

1. npm install create-react-app
2. npx create-react-app project_name
3. npm start

If there is any error while creating react app :

1. npm uninstall -g create-react-app

2. npx clear-npx-cache in vs code terminal.

-> After complete installation of react app enter npm start to load the web page.
-> In App.js we can make changes that will be reflected in the webportal.

Function and class component in react Js:

class boiler:

Syntax:

import React, { Component } from 'react'

export default class App extends Component {

render() {
return (
<div>

</div>
)
}
}

Example:

import React, { Component } from 'react'

export default class App extends Component {

state = {
name : "yaso krishna",
}
render() {
return (
<div>
<h2>welcome to {this.state.name}</h2>
</div>
)
}
}

-> function component:

syntax:

import React from 'react'

const App = () => {

return (
<div>

</div>
)
}

export default App

Example:

import React, {useState} from 'react'

const App = () => {

const [name, Name] = useState("yaso");
const [age, Age] = useState(21);
const [mobileno, number] = useState("9182828173")
return (
<div>
<h2>{name} {age} {mobileno}</h2>
</div>
)
}

export default App

___________________________________________________________________________________
_________________

-> States: it is used to declare multiple values in a class component

Example:

import React, { Component } from 'react'

export default class App extends Component {

state = {
name: "Yaso"
}
render() {
return (
<div>
<center>
<h2>Welcome to my App created by {this.state.name}</h2>
</center>
</div>
)
}
}

-> props: to puse values from one component to other we use props.

Example: