What is React js?

React is a javaScript library that is developed and maintain by facebook.

it is used for develop UI user interface.
react is component based javascript library.

we Can not says that react is Frame because react dosn't have components like
framework.
1.react dosn't have routing.

Q.1 Why we are not using or work on angular and veu framework .
or
Why react more popular than angular and veu frmework.

Ans-Because using of external library we can make react powefull like angular and
vew framework.react have alternatives.

//if you use angular you don't have any choise.if you gatting deficulty in any
function you don't have any alternative options.

//like angular and vue are bundeled we don't need every feature.if you download
like angular have many features but you only need 3 features so that makes your
website heavy and this increases the cost and size of project.

so that why we use ract for the our project . because react provide the facility if
to need that component than only you have to install.this make your project lite
size wise or cost wise.
-----------------------------------------------------------------------------
Q.2 why learn react not angular and vue?
because ract is more popular than anglar and vue (how to find using trands.google
website most searched) and you can learn angular also and vue .
in react opportunities are more.
-----------------------------------------------------------------------------
Q.3 using react what we build?
using react we make single page Application.and using react native we make mobile
application also.
-----------------------------------------------------------------------------
Q.4 what is single page Application
Normal website:-when we click any hyper link(like contact page) website sends
request to the server and server creates contact page and send to the browser and
browser engine(v8 engine) rander(means recreate hole page ) the page and show to
user.The problem is we need only contact component but server send and recreates
hole page.This is time taking process.

Single page:-when you click hyper link react already know what changes done by the
user in same page so react send request only for that componet to the server and
server send only that component only then browser does not rander hole page only
rander that component.

so conclusion
when server construct the hole page it will take to much time.like the hole page
size is 10kb so server sends 10kb file to browser.but in single page application
server sends that component that is need and size of that component is only 1kb and
in server side react is active to can not reload the page.

that way single page applicatin fast and on demand.

-----------------------------------------------------------------------------
Requirements
code editor-VS code(Prettier extension is used to formate your code in readable
formate sortcut ctrl+shift+p)
technologies-html,css,javascript(ES6),React.js
-----------------------------------------------------------------------------
ES6-
1.let and const and var
var(javaScript feature):-is used to make variable and you change its value
diractly.

let(ES6)-used to make variable in ES6 . if we declare value in let keyword we

change its value in program like
let a=19
a=10

const(ES6)-it also used to make variable in ES6.once we declare the value connot
change.
-----------------------------------------------------------------------------
2.Arrow Function
normal function:- we use function key word to define function like
function sayName(name){
console.log(name);
}
sayName("ajeet");

Arrow Function:-function keyword not required and make function name as variable
and after put = sign and argument () => make one line function.

var sayName= (name) =>{

console.log(name);
}
sayName("ajeet");

we can also use arrow function like this

let sayName=name=>name;
console.log(sayName("ayush"));

note:-if function have only one argument than only you remove () if 0 or more than
one arg than () compelsurry.
----------------------------------------------------------------------------
3.Import || Export(Module)
in ES6 we can make module.
Module:-means we can divide our code in different different files and parts then
all parts connect together and work.you can writen code in one file and if you need
code in other you import that module.

when you use module in your js you can add type module ot that page.
<script type="module" src="app.js"> without gives error.

export object file name customer

const person={
name:"ayush"
}
export default person;

export function file name sell

let hello=()=>{
console.log("hello")
}
export variable file name sell
export var a=10;
how to import in file app.js or other file
import {hello} form './sell.js'
import {data as da} from './sell.js'
*import {hello,data as da} from './sell.js'
#import * as bundle from './sell.js'
hello();
#bundle.hello()
console.log(data);
#console.log(bundle.data);

{}-name which you import like here use hello(function name of sell file).
./-same file.
{data as da}-means use data name as ds
*you don't need to write again and again import for same file you can saprate
with ,.
#it creates object bundle and all export are in bunble object.

now default export how use

import person form './customer.js'
console.log(person); //you can also change name.
note:-every file contain only one default export .
----------------------------------------------------------------------------
Object oriented features
class and object
class-class is a blueprint of object.in class we define what is in object and
object change the value. all object carry different differet values.

class Customer{
constructor(n){ //property
this.name=n;
}
age =25; //es7 property
buy(){ //method //make arrow also(es7)
console.log(this.name); //access name in this method
}
}

let customer1=new customer("ayush"); //make object like this

console.log(custome1);
customer1.buy(); output object and ayush
----------------------------------------------------------------------------
inheritance:-
aquire all the properties of parents class called inheritance.

class Guestcustomer extends Customer{

hello(){
console.log("hello");
}
}

let customer1=new Guestcustomer("ayush");

//same output.
---------------------------------------------------------------------------
ES7 two propertis relese
1.we are define properties outside the constructor and don't need this to acces the
property
2.you can use arrow function also.
------------------------------------------------------------------------
Spread and rest operators(...)
use same sign use defines it is spread or rest.

spread-it is used to split array or object.

like we have one array or list and we want to list1 all item split or spread in
newlist than it will used.copy item from one list ot another.

let list=["ayush","sharma","abhi"]
let newlist=[...list,"adarsh"];
let newlist=["adarsh",...list]
console.log(newlist);

smae thing using object

let person={
name:"ayush"
}
let newperson={
...person,
city: "indore"
}
console.log(newperson);
spread operator:-spread operator is used to past one array or object into another
object and array.

Rest operator:-when ... are used in function argument like.

function hello(...all){
console.log(all)
}
hello(1,2,3,4................n number of arg)

output
{1,2,3,4}

if i don't know how many argument pass than we use rest operator .here all is array
you can use like array.
----------------------------------------------------------------------------
Destructuring:- it is used to store array element in individual variable.
also used to store object property in individual varibale.

Array Destructuring:-
let arr=["ayush","sharma","abhi"];

//if you have to access element than use

//arr[1]
//arr[3]
//but i want to store every element in valiable use destructuring

let [stu1,stu2,stu3]=arr;
cosole.log(stu1)
output:ayush

//if you don't want to asign stu2 sharma and access in stu2 in abhi then
let[stu1, ,stu2]=arr;

object Destructuring:-
const person={
name:"vishwajeet",
age:28,
}
//console.log(person.age): //print person age
but i want to store in variable then

let {name,age}=person
console.log(name);
name me vlaue aa gya.
----------------------------------------------------------------------------
Reference(array,object) and primitive types(string,number)
primitive type:-
let a=10
let b=a;
//so here a value copy in b variable.here valiable point different memory and b
also.
let b=20;
//here no effect on a, a is 10

Reference type:-
let person={
name:"vishwa"
}
let person=person1;

//here person1 point person not copy person property into person 1.

//if we change person2 it will effect person1 also.

person1.name="ayush"//this change the person name also.

Q.so how to copy person to person use spread operator(...) privious see.
let person1{
...person
}
person1.name="sharma"; only change occure in person1
----------------------------------------------------------------------------
Two most Important Array function MAP and FILTER
1.Map:-create new array and you can change the value of array also like.

let arr1=[1,3,4,5]
let arr2=arr1.map(function(x){//annonmous function
return x*2
});
console.log(arr2);

output
[1,9,16,25]

all the vlaue of arr1 pass one by one like loop in function(x) it retun arr2 this
is also a array.

also use arrow function like this

let arr2= arr1.map(x=>x*2);

console.log(arr2)//same result

2.Filter:-filter the vlaues according condition

like i want print only even number then

let arr2=arr1.filter(x=>x%2==0)//pass condition like if .if condition is true then

past into array.

using anonomus function

let arr2=arr1.filter(function(x){
if(x%2==0)
return x;
})
----------------------------------------------------------------------------
----------------------------------------------------------------------------
REACT
---------------------------------------------------------------------------

What is components in React js?

React is all about components like any thing in we are makin using html is called
component like button,menue.Generly we are make full web page in html css but using
React we make different components and Creating a complete web page by combining
this components. not make every thing component only repeatable things like
button,manue only change the content.small components(button) use under any big
components.

"so in react we build component with html css and js.And then by combining these
components we built a page."

"so, components are reusable building block in user interface(html and css with js
make components)"

benifits of making components

1.Reusability
2.help in maintaining code
----------------------------------------------------------------
Make Ract js App

Step 1-install node.js.

node.js-Earlier js is run on the browser but using node js we can run js in our
computer using browser v8 engine.
"Node.js is a js runtime built on chrome v8 js engine."it is also used for backend
development.

npm-node package manager.bassicaly it is website where facebook stores all the

package that is used to make react app.when create react app on cmd it will
download from npm server.
----------------------------------------------------------------
Step2-create react app
cmd-->npx create react app Myapp
cmd-->npm start

npm start ---start server(automatic update detect and update.).

"so a mini server created in user end run react app.localhost//3000"
----------------------------------------------------------------
Basic File structure
.gitignore-when we host our website on git hub in this file have code that is not
pushed to github.

Package.json-information about you react app like dependency.

package-lock.json-node spcific.
node_module folder-install any package from npm stores in this folder.

public folder
favIcon-icon of website.

mainifest.json-prograsive web app.

index.html-this is single page where we change or add components.(this page make

react as single pager app)

src-source code file

logo.svg-default image he .
index.js-file he jisme hm apne components ko rander krate he.
ReactDOM.render-method to rander.
document.getElementById('root')-this file is connected to our index.html page of
public folder.

jsx=html+js

**only react provide a facility to import css and image.

App.js-is component
index.js-where we rander our component.and send our component to public folder in
index.html.send component using method document.getElementById('root');--jis div ka
id root he usme dalna he.
public-index.html-have to show file to web browser
<div id="root"><div>-

src-isme ek file(index.js) hona jruri he.

Browser<--index.html<--index.js<--App.js(parent component)<--all component folder.

component folder--->file(subcomponent)

subcomponent-->export to app.js
app.js--->import subcomponent form
we pass only com
function app(){
return(
<div>
<subcomponent/>
</div>
)
}
export default app;

return (<div>) because return only one thing.

----------------------------------------------------------------
project name expence tracker
-----------------------------
props in react
propes-it is object .you pass data to a component.

app.js--->
function app(){
let expensetitle="school fees";
return(
<div>

<expenseitem title={expenseTitle}/>

</div>
)

how to use title in component

expenseitme.js
function expenseitem(props){
return(
<h2>{props.title}</h2>
)
}

toISOString()-make object to string.

----------------------------------------------------------------
State in React
event-user perform

const clickHandler=()=>{
alert("clicked");
}

even hendler-
<button onClick={clickHandler}></button>

yha pe hmane ek event ko handle kiya he like jb user click krega button pe to use
ek alert show hog .

step1-jaha pe event handle krna he event ka name like onClick ab ek function bana
he ki jb user click krga to wo function auto call ho jayega.jo apn ne upper bnaya
he clickHandler name ka.

now ye to hua event handler

state is hoock
like form me ham data fill krte he to me chata hu ki data fill krne ke bad data
clear bhi ho jaye ye kam hm state ki help se krnge.

first import usestate package form react.

import React, {useState} from React

useState("");
return-array
we use array distructuring
const [title, setTitle] =useState(props.title)

pass to handler function

setTitle('new Title..');
----------------------------------------------------------------
onChange-is used to