React install npm

You’ll need to have Node >= 8.10 and npm >= 5.6 on your machine. To create a project, run:

1. npx create-react-app my-app  

2. cd my-app  

3. npm start

Installing React Bootstrap

npm install bootstrap

Tool

https://marketplace.visualstudio.com/items?itemName=xabikos.ReactSnippets

https://marketplace.visualstudio.com/items?itemName=burkeholland.simple-react-snippets

https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets

6.

40 . Phase of Component

https://medium.com/swlh/react-component-lifecycle-c0084e2ca85c

1 . Mounting : creating an element and inserting it in a DOM tree

2.  Updating : Updating is the process of changing state or props of component and update
changes to nodes already in the DOM.

3.  Unmounting : Unmounting is the process of removing components from the DOM.

4.  Error Handling : These are used when there is error during rendering, in lifecycle
method or in the constructor of any child component..https://flaviocopes.com/react-lifecycle-events/

Mounting : -

1 . Constructor  :- 

syntex : Constructor(){

supper()

}  

import React , {Component} from 'react';
import './App.scss';
class App extends Component {
  constructor(props){
    console.log("constructor call")
   super(props);
   this.state = {
     name : "sanjeev",
     age : props.age
   };
  }
  render() { 
   
    return (  
      
      <div>
        <h1>Hello</h1>
        <p>{this.state.name}</p>
        <p>{this.state.age}</p>
      </div>
    );
  }
}
App.defaultProps = {
  age: 30,
 
};
export default App;

2. Render 

import React , {Component} from 'react';
import './App.scss';
class App extends Component {
  constructor(props){
    console.log("constructor call")
   super(props);
   this.state = {
     name : "sanjeev",
     age : props.age
   };
  }
  render() { 
    console.log("Render call")
    return (  
      
      <div>
        <h1>Hello</h1>
        <p>{this.state.name}</p>
        <p>{this.state.age}</p>
      </div>
    );
  }
}
App.defaultProps = {
  age: 30,
 
};
export default App;

3.  getDerivedStateFromProps()  : 

Render methed se jast pahle call ho ta hai our iska use hame na ke braber use kiya jata hai

iska use  taba kiya jata hai jb state ke value props pe depends ho. 

syntax - static getDerivedStateFromProps(props,state)

import React , {Component} from 'react';
import './App.scss';
class App extends Component {
  constructor(props){
    console.log("constructor call")
   super(props);
   this.state = {
     name : "sanjeev",
     age : props.age
   };
  }
  static getDerivedStateFromProps(props,state){
    console.log("getDerivedStateFromProps call");
    return null;
  }
  render() { 
    console.log("Render call")
    return (  
      
      <div>
        <h1>Hello</h1>
        <p>{this.state.name}</p>
        <p>{this.state.age}</p>
      </div>
    );
  }
}
App.defaultProps = {
  age: 30,
 
};
export default App;

import React , {Component} from 'react';
import './App.scss';
class App extends Component {
  constructor(props){
    console.log("constructor call")
   super(props);
   this.state = {
     name : "sanjeev",
     age : props.age
   };
  }
  static getDerivedStateFromProps(props,state){
    console.log("getDerivedStateFromProps call");
    return {
      name : "Sonu",
      age : props.age
    };;
  }
  render() { 
    console.log("Render call")
    return (  
      
      <div>
        <h1>Hello</h1>
        <p>{this.state.name}</p>
        <p>{this.state.age}</p>
      </div>
    );
  }
}
App.defaultProps = {
  age: 30,
 
};
export default App;

import React , {Component} from 'react';
import './App.scss';
class App extends Component {
  constructor(props){
    console.log("constructor call")
   super(props);
   this.state = {
     name : "sanjeev",
     age : 25
   };
  }
  static getDerivedStateFromProps(props,state){
    console.log(props);
    console.log(state);
    console.log("getDerivedStateFromProps call");
    return {
      name : "Sonu",
      age : props.age
    };;
  }
  render() { 
    console.log("Render call")
    return (  
      
      <div>
        <h1>Hello</h1>
        <p>{this.state.name}</p>
        <p>{this.state.age}</p>
      </div>
    );
  }
}
App.defaultProps = {
  age: 30,
 
};
export default App;

4. componentDidMount()

component  rendered ho jata hai  tb componentDidMount methed call hota hai 

import React , {Component} from 'react';
import './App.scss';
class App extends Component {
  constructor(props){
    console.log("constructor call")
   super(props);
   this.state = {
     name : "sanjeev",
     age : 25
   };
  }
  // static getDerivedStateFromProps(props,state){
  //   console.log(props);
  //   console.log(state);
  //   console.log("getDerivedStateFromProps call");
  //   return {
  //     name : "Sonu",
  //     age : props.age
  //   };;
  // }
  componentDidMount(){
    //console.log("componentDidMount call");
    setTimeout(() => {
     this.setState({
          name : "Sonu singh",
          age : 29
        });
    },1000)
  }
  render() { 
    console.log("Render call")
    return (  
      
      <div>
        <h1>Hello</h1>
        <p>{this.state.name}</p>
        <p>{this.state.age}</p>
      </div>
    );
  }
}
App.defaultProps = {
  age: 30,
 
};
export default App;

Updating
When updating you have 5 lifecycle methods before the component is mounted in the DOM: the getDerivedStateFromProps, shouldComponentUpdate, render, getSnapshotBeforeUpdate and componentDidUpdate.
getDerivedStateFromProps()
See the above description for this method.
shouldComponentUpdate() : - component ko reander krna hai ya nhi krna hai 
This method returns a boolean, true or false.
but ham state ke value ko change krata hai but component ko reander nhi krta hai. defaults value  true hoata hai.
shouldComponentUpdate(){
    //return false;
    //return ture;
  }

getSnapshotBeforeUpdate(prevProps,precState) :- 

In this method you have access to the props and state of the previous render, and of the current render.
Its use cases are very niche, and it’s probably the one that you will use less.

componentDidUpdate() :- updateing fage ke bad call hota hai.

Unmounting
In this phase we only have one method, componentWillUnmount.
componentWillUnmount :- component remove hone se pahle call hota hai. ise mathed me state ko use nhi kiya jata hai.

41. https://www.javatpoint.com/react-component-api

hooks in react js

Basic Hooks
useState
useEffect
useContext
Additional Hooks
useReducer
useCallback
useMemo
useRef
useImperativeHandle
useLayoutEffect
useDebugValue

42 . HOC 

45. Form with custom inputs in React JS

2 folder create 1. components 2. forms

components folder open file create Button.jsx,CheckBox.jsx,Input.jsx,Select.jsx,TextArea.jsx

Button.jsx

import React from 'react';
const Button = props => {
    return (
        <button
            className=""
            onClick={props.action}
        >
            {props.title}
        </button>
        
    );
};
export default Button;

CheckBox.jsx

import React from 'react';
const CheckBox = props => {
    return (
        <div className="form-group">
            <label className="form-lable">{props.title}</label>
            <div className="checkbox">
                {props.options.map(option => {
                    return (
                        <label key={option} className="checkbox-inline">
                            <input
                                id={props.name}
                                name={props.name}
                                type="checkbox"
                                value={option}
                                onChange={props.handlechange}
                                checked={props.selectedOptions.indexOf(option) > -1}
                            />
                            {option}
                        </label>
                    )
                })
                }
            </div>
        </div>
    );
};
export default CheckBox;

Input.jsx

import React from 'react';
const Input = props => {
    return (
        <div className="form-group">
            <label className="form-lable">{props.title}</label>
            <input
                className="form-control"
                id={props.name}
                name={props.name}
                type={props.inputtype}
                value={props.value}
                onChange={props.handlechange}
                placeholder={props.placeholder}
            />
        </div>
    );
};
export default Input;

Select.jsx

import React from 'react';
const Select = props => {
    return (
        <div className="form-group">
            <label className="form-lable">{props.title}</label>
            <select
                className="form-control"
                id={props.name}
                name={props.name}
                value={props.value}
                onChange={props.handlechange}
            >
              <option value="" disabled>{props.placeholder}</option>  
              {props.options.map(option=> {
                 return(
                  <option key={option} value={option}>{option}</option>   
                 )
              })
              }
            </select>
        </div>
    );
};
export default Select;

TextArea.jsx

import React from 'react';
const TextArea = props => {
    return (
        <div className="form-group">
            <label className="form-lable">{props.title}</label>
            <textarea
                className="form-control"
                id={props.name}
                name={props.name}
                rows={props.rows}
                cols={props.cols}
                value={props.value}
                onChange={props.handlechange}
                placeholder={props.placeholder}
            />
            
        </div>
    );
};
export default TextArea;

forms folder open file create Registration.jsx 

import React, { Component } from 'react';
import Input from '../components/Input';
import Button from '../components/Button';
import TextArea from '../components/TextArea';
import Select from '../components/Select';
import CheckBox from '../components/CheckBox';
class Registration extends Component {
    constructor(props) {
        super(props);
        this.state = {
            newUser: {
                name: '',
                age: '',
                gender: '',
                skills: [],
                about: '',
            },
            
            genderOptions: ['Male', 'Female', 'Others'],
            skillsOptions: ['Programming', "Development", "Design", "Testing"]
        }
    }
    handleInput = (e) => {
        let value = e.target.value;
        let name = e.target.name;
        this.setState(prevState => ({
            newUser: {
                ...prevState.newUser,
                [name]: value,
            },
        }), () => console.log(this.state.newUser))
    };
    handleCheckBox = (e) => {
        const newSelection = e.target.value;
        let newSelectionArray;
       
        if (this.state.newUser.skills.indexOf(newSelection) > -1) {
            newSelectionArray = this.state.newUser.skills.filter(s => s !== newSelection);
        } else {
            newSelectionArray = [...this.state.newUser.skills, newSelection]
        }

        this.setState(prevState => ({
            newUser: {
                ...prevState.newUser,
                skills: newSelectionArray
            }
        }));
    };
    handleFormSubmit = (e) => {
        e.preventDefault();
        console.log(this.state.newUser);
    };
    render() {
        return (
            <div>
                <form className="container-fluid" onSubmit={this.handleFormSubmit}>
                    <Input
                        title="Enter you Nmae"
                        name="name"
                        inputtype="text"
                        value={this.state.newUser.name}
                        placeholder='Enter Your Name'
                        handlechange={this.handleInput}
                    />
                    <Input
                        title="Enter you Age"
                        name="age"
                        inputtype="number"
                        value={this.state.newUser.age}
                        placeholder='Enter Your Age'
                        handlechange={this.handleInput}
                    />
                    <Select
                        name="gender"
                        title="Gender"
                        value={this.state.newUser.gender}
                        options={this.state.genderOptions}
                        placeholder='Select gender'
                        handlechange={this.handleInput}

                    />
                    <CheckBox
                        title="Skills"
                        name="skills"
                        options={this.state.skillsOptions}
                        selectedOptions={this.state.newUser.skills}
                        handlechange={this.handleCheckBox}

                    />
                    <TextArea
                        title="TextArea"
                        name="about"
                        rows={10}
                        cols={5}
                        value={this.state.newUser.about}
                        handlechange={this.handleInput}
                    />
                    <Button 
                     type="primary"
                     title="Submit"
                    />
                </form>
            </div>
        );
    }
}

export default Registration;

or all event change : -

class Registration extends Component {
    constructor(props) {
        super(props);
        this.state = {
            newUser: {
                name: '',
                age: '',
                gender: '',
                skills: [],
                about: ''
            },
            genderOptions: ['Male', 'Female', 'Others'],
            skillOptions: ['Programming', "Development", "Design", "Testing"]
        };
    }
    handleInput = (e) => {
        let value = e.target.value;
        let name = e.target.name;
        this.setState(prevState => ({
            newUser: {
                ...prevState.newUser,
                [name]: value
            }
        }));
    };
    handleAge = (e) => {
        let value = e.target.value;
        this.setState(prevState => ({
            newUser: {
                ...prevState.newUser,
                age: value
            }
        }), () => console.log(this.state.newUser.age));
    };
    handleTextArea = (e) => {
        let value = e.target.value;
        this.setState(prevState => ({
            newUser: {
                ...prevState.newUser,
                about: value
            }
        }));
    };

    // handleCheckBox = (e) => {
    //     const value = e.target.value;
    //     this.setState(prevState => ({
    //         newUser: {
    //             ...prevState.newUser,
    //             skills: value
    //         }
    //     }));
    // };

    handleCheckBox = (e) => {
        const newSelection = e.target.value;
        let newSelectionArray;
        debugger;
        if (this.state.newUser.skills.indexOf(newSelection) > -1) {
            newSelectionArray = this.state.newUser.skills.filter(s => s !== newSelection);
        } else {
            newSelectionArray = [...this.state.newUser.skills, newSelection]
        }

        this.setState(prevState => ({
            newUser: {
                ...prevState.newUser,
                skills: newSelectionArray
            }
        }));
    };
    handleFormSubmit = (e) => {
        e.preventDefault();
        console.log(this.state.newUser);
    };

   
    render() {
        return (
            <form className="container-fluid" onSubmit={this.handleFormSubmit} >
                <Input
                    title='Full Name'
                    name='name'
                    inputtype='text'
                    value={this.state.newUser.name}
                    placeholder='Enter Your Name'
                    handlechange={this.handleInput}
                />
                <Input
                    title='Age'
                    name='age'
                    inputtype='number'
                    value={this.state.newUser.age}
                    placeholder='Enter Your Age'
                    handlechange={this.handleAge}
                />
                <Select
                    name='gender'
                    title='Gender'
                    value={this.state.newUser.gender}
                    options={this.state.genderOptions}
                    placeholder='Select Gender'
                    handlechange={this.handleInput}
                />
                <CheckBox
                    title='Skills'
                    name='skills'
                    options={this.state.skillOptions}
                    selectedOptions={this.state.newUser.skills}
                    handlechange={this.handleCheckBox}
                />

                <TextArea
                    title='About You'
                    rows={10}
                    cols={5}
                    name='About you'
                    value={this.state.newUser.about}
                    placeholder='Write About You'
                    handlechange={this.handleTextArea}
                />

                <Button
                    type='primary'
                    title='Submit'
                />

                <Button
                    type='secondrary'
                    title='Cancle'
                    action={this.handleClearForm}
                />
            </form>
        )
    }
}

export default Registration;

46. Form Validations in React JS

npm i validator