React JS Workings Exercises Extra Classes

Library required • 1. React JS library • 2. ReactDOM library

document.createElement(“h1”) React.createElement(“h1”,null,”Content”) const element = <h1 key=value ></h1> Value can be only two things 1. String 2. Anything other than string it should be enclosed with {}

[ { id : 1, name : “John”, age : 12 }, { id : 1, name : “John”, age : 12 }, ]

Components • Collection of elements • Increase readability • Reduce complexity • Reuse the code

Components • There are two ways to create Components • Functional Components • Class Components

Assignment • Create Two Pages • Functional Components – Inline styles • Class Components – External styles

Events • onclick • onkeyup • onkeydown • onmouseover • onmouseout • onchange • onload

Rules for Functional Components • Should be Pure Functions. • It should atleast take one parameter • It should return React Elements • It should not modify the parameters data

CRUD • C – Create - state • R – Read – props • U – Update - state • D – Delete – state

state • States are maintained or present only in Class components

Pass data from Parent to Child • Use props to pass data from parent to child

Pass data from child to parent • Step 1 – Create a method in parent component • Step 2 – Pass that method as a props to child component • Step 3 – Get that method from child component and call that method on action from the child component • Step 4 – If you want to pass the data pass it as a parameter

Libraries to work with react • React JS library • React DOM library • Babel library • Live Server – webpack-dev-server • Project Structure • Webpack - bundler

Npm – node package manager • https://nodejs.org/en/download/ • Check the version • node –v • npm –v

Command to create react project • npx create-react-app app-name • npx create-react-app first-react • cd first-react • code . • Ctrl ` - open the terminal • npm start

• App • PersonList • Person

LifeCycle • Start  Phase1  Phase2  Phase3  End • Once  lot of phases Once • Birth  Child  Adult  Married  Old  Death

Class Component LifeCycle • Mounting Phase • Constructor() – initialize state, no business logic , bind the methods, no side effects • getDerivedStateFromProps() – return null or return new state, no side effects. • render() – Presentation logic, no side effects. • componentDidMount() – make side effects

Class Component LifeCycle • Updating Phase • getDerivedStateFromProps() – no side effects • shouldComponentUpdate() – return true or false • render() – Presentation logic • getSnapshotBeforeUpdate() – return null or somedata • shouldComponentUpdate() – make side effects

Class Component LifeCycle • UnMounting – Whenever component is unmounted from the real dom • componentWillUnmount() - clean up process , clear localStorage

Router – to achieve SPA • npm install react-router-dom --save

Javascript • AJAX call • Fetch api • Axios – HTTP Client which based on Promises.

CRUD • Create - POST • Read - GET • Update - PUT • Delete - DELETE

• [ { email:””, password:””, phoneno:””, name:”” },{ } ]

React Hooks • React Hooks – normal javascript functions

• Primitive values will be compared. • Reference address wil be compared. • Object or array. const person ={ name : “soni”, age : 12 } const person ={ name : “soni”, age : 12 }

Component vs PureComponent • Component – always render method will be called when the state or props change or setState method is executed (shouldComponent() – compare old props and new props and old state and new state) • PureComponent – if the props or state is getting changed then only render method will be called otherwise render method will not be called. • (Does Shallow Comparison – Use only for primitives) • (Does not do deep comparison – Don’t use it for reference)

React.memo • To make functional component pure component

React Hooks • Javascript functions. • React hooks should be called only in functional components. • It should be defined in top level.

State in class component 1. Initialize the state 2. Current state data (this.state) 3. Modify the state ( this.setState({ }) )

State in functional component • const array = useState(initialState) • array[0] = current state data • array[1] = function to modify the state

Best Practice to update state in Functional Component • Take a copy of the state • Update or modify or delete or add to the copy • Set the state using the copy Example – const [numbers,setNumbers] = useState([1,2,3,4,5]) const n = […numbers] const result = n.filter(num=>{return num>2}) setNumbers(result)

useEffect() • It is a alternative all three methods • componentDidMount • componentDidUpdate • componentWillUnmount

useEffect(callback function) • useEffect(()=>{ // component is mounted // state or props getting changed return () =>{ // component is unmounted } })

useEffect first syntax • useEffect(()=>{ // logic for mounting }, [] ) ===== componentDidMount

useEffect second syntax • useEffect(()=>{ // logic executes whenever there is change in count variable value }, [ count ])

useEffect third syntax • useEffect(()=>{ return () =>{ // logic to be executed on component unmount } }, [])

Dummy Server • https://jsonplaceholder.typicode.com/

States while making a request to server(REST call or AJAX call) • Loading • Error • Response data - Success

useCallback • useCallback(()=>{ },[age]) useCallback(()=>{ },[salary])

useReducer(reducer,initialState) new state = reducer(state,action) const [ newState, dispatch ] = useReducer(reducer,initialState)

useState vs useReducer Primitive (number,Boolean,string ) – useState Object , Array – useReducer Global – useReducer Local – useState Business logic – useReducer No business logic - useState

React JS Workings Exercises Extra Classes

More Related Content

Similar to React JS Workings Exercises Extra Classes

Recently uploaded

React JS Workings Exercises Extra Classes