React JS

1. How React JS Works?

React is divided into two major APIs. First, there’s the React DOM. This is the API that’s used to perform the actual rendering on a web page. Second, there’s the React component API. These are the parts of the page that are actually rendered by React DOM.

Actual Dom →(Create Virtual dom) ->changes->(Create New Virtual Dom)

When we make any change in our component than react js create a virtual dom for it and compare it with old virtual dom and check where the changes happen. and update actual dom only at certain location. So no full page reload.

React does so by “mounting” (adding nodes to the DOM), “unmounting” (removing them from the DOM), and “updating” (making changes to nodes already in the DOM).

2. What are components?

Components are the building blocks of any React app and a typical React app will have many of these. Simply put, a component is a JavaScript class or function that optionally accepts inputs i.e. properties(props) and returns a React element that describes how a section of the UI (User Interface) should appear.

Two Types of components:

Functional Comonent:

const Greeting = () => <h1>Hello World today!</h1>;

Class Component:

class Greeting extends React.Component {
  render(){
    return <h1>Hello World Today!</h1>;
  }
}

3. NPM Commands:(www.npmjs.com)

Command,Work
npm config list,Show Config Settings
npm config list -l,Show all Config Settings as List
npm config list  - json,Show all Config Settings as Json
npm config set key 'value',Set value to key
npm config get key,Show value of key
npm config edit,Open config file in editor
npm config edit - global,Open global config file in editor
npm config delete key,Delete key value
npm install , Install all packages from package.json
npm install packagename, Install package
npm install pname@latest,Install latest package
npm install pname@version,Instal package with particular version
npm install pname  - save-dev/ - save-prod/ - no-save ,Install package in paticular field
npm uninstall pname  - save/ - save-dev/ - save-prod,Uninstall package
npm update pname  - save/ - save-dev/ - save-prod,Update package
npm ls,Show all packages in tree format

4. Props:

5. State:

State is similar to props but it is private and only availabe in component.

we can only use states in class componenets.

States are modifiable but props are not.

Two types you can create states:

1. Without constructor

import React, { Component } from 'react'

class Student extends Component{
    state={
        name:this.props.name,
        age:15
       }
    render(){
        return(
          <p>Hello,{this.state.name} age{this.state.age}</p>
        )
    }
}
export default Student;

2. With constructor:

import React, { Component } from 'react'

class Student extends Component{
    constructor(props){
        super(props);
        this.state={
            name:this.props.name,
            age:15
            }
    }
    render(){
        return(
    <p>Hello,{this.state.name} age{this.state.age}</p>
        
        )
    }
}
export default Student;

6. Event Handling:

In Class Components:

Always use arrow function.(no need to bind this keyword)

import React, { Component } from 'react'

class Student extends Component{
    handleButton = () => {
        console.log("Clicked",this)
    }
    render(){
        return(
        <div>
            <button onClick={this.handleButton}>CLick me</button>
        </div>
        
        )
    }
}
export default Student;

if you directly make normal function, You are able to call it but this keyword is undefined in it so for access you have to create constructor and also bind this keyword .

import React, { Component } from 'react'

class Student extends Component{
    constructor(props){
        super(props);
        this.handleButton = this.handleButton.bind(this);
    }
    handleButton () {
        console.log("Clicked",this)
    }
    render(){
        return(
        <div>
            <button onClick={this.handleButton}>CLick me</button>
        </div>
        
        )
    }
}
export default Student;

with state:

import React, { Component } from 'react'

class Student extends Component{
    constructor(props){
        super(props);
        this.state={
            name:"lokesh",
            age:this.props.age
        }
    }
    
    handleButton =()=> {
        console.log("Clicked",this)
    }
    render(){
        return(
        <div>
        <h1>Hello,{this.state.name},{this.props.age}</h1>
            <button onClick={this.handleButton}>CLick me</button>
        </div>
        
        )
    }
}
export default Student;

In Functional Components:

const Student = (props) =>{
    function handleClick(){
        console.log("Clicked")
    }
    return(
        <div>
        <h1>Name:{props.name}</h1>
        <button onClick={handleClick}>Click Me</button>
        </div>
         )
}

export default Student;

Prevent Default Behaviour:

You can not return false to prevent default behaviour in react you have to explicitly call it.

const Student = (props) =>{
    const handleClick = (e) =>{
        e.preventDefault();
        console.log("Clicked")
    }
    return(
        <div>
        <h1>Name:{props.name}</h1>
        <a href="http://www.abc.com" onClick={handleClick}>Click Me</a>
        </div>
         )
}

export default Student;

Update State using setState:

7. Hooks:

useState Hook:

import React ,{Fragment,useState} from "react";

const Student = () =>{
    
    const [name,setName]=useState("Lokesh");
    const [roll,setRoll]=useState(0);

    const handleClick= () =>{
        setName("Sharma");
        setRoll(roll +1);
    } 
    return(
        <Fragment>
            <h1>{name}</h1>
            <h1>{roll}</h1>
            <button type="button" onClick={handleClick}>Click me</button>
        </Fragment>
         )
}

export default Student;

useEffect Hook:

import React ,{Fragment,useState,useEffect} from "react";

const Student = () =>{
    
    const [count,setCount]=useState(0);
    const [count1,setCount1]=useState(30);

    const handleIncrement= () =>{
        setCount(count +1);
    }

    const handleDecrement= () =>{
        setCount1(count1 - 1);
    }

    useEffect(()=>{
        console.log("useEffect Called"); 
    },[count])

    return(
        <Fragment>
            <h1>{count}</h1>
            <button type="button" onClick={handleIncrement}>Increment</button>

            <h1>{count1}</h1>
            <button type="button" onClick={handleDecrement}>Decremrnt</button>
        </Fragment>
         )
}

export default Student;

useEffect run on every update .but if we want to run it for only certain updates than we write that in a array.here [count]

Easy and Better way o write:

//error in code correct it.

import React ,{Fragment,useState,useEffect} from "react";

const Student = () =>{
    
    const [state,setState]=useState({
        count:0,
        count1:30
    });

    useEffect(()=>{
        console.log("useEffect Called"); 
    })

    return(
        <Fragment>
            <h1>{state.count}</h1>
            <button type="button" onClick={()=>{setState.count(state.count +1)}}>Increment</button>

            <h1>{state.count1}</h1>
            <button type="button" onClick={()=>{setState.count1(state.count1 -1)}}>Decremrnt</button>
        </Fragment>
         )
}

export default Student;

Custom Hook: