Download to read offline
![[ { id : 1, name : βJohnβ, age : 12 }, { id : 1, name : βJohnβ, age : 12 }, ]](https://image.slidesharecdn.com/reactjsworkings-250429002243-96772dba/75/React-JS-Workings-Exercises-Extra-Classes-6-2048.jpg)
![β’ [ { email:ββ, password:ββ, phoneno:ββ, name:ββ },{ } ]](https://image.slidesharecdn.com/reactjsworkings-250429002243-96772dba/75/React-JS-Workings-Exercises-Extra-Classes-28-2048.jpg)
![State in functional component β’ const array = useState(initialState) β’ array[0] = current state data β’ array[1] = function to modify the state](https://image.slidesharecdn.com/reactjsworkings-250429002243-96772dba/75/React-JS-Workings-Exercises-Extra-Classes-38-2048.jpg)
![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)](https://image.slidesharecdn.com/reactjsworkings-250429002243-96772dba/75/React-JS-Workings-Exercises-Extra-Classes-39-2048.jpg)
![useEffect first syntax β’ useEffect(()=>{ // logic for mounting }, [] ) ===== componentDidMount](https://image.slidesharecdn.com/reactjsworkings-250429002243-96772dba/75/React-JS-Workings-Exercises-Extra-Classes-42-2048.jpg)
![useEffect second syntax β’ useEffect(()=>{ // logic executes whenever there is change in count variable value }, [ count ])](https://image.slidesharecdn.com/reactjsworkings-250429002243-96772dba/75/React-JS-Workings-Exercises-Extra-Classes-43-2048.jpg)
![useEffect third syntax β’ useEffect(()=>{ return () =>{ // logic to be executed on component unmount } }, [])](https://image.slidesharecdn.com/reactjsworkings-250429002243-96772dba/75/React-JS-Workings-Exercises-Extra-Classes-44-2048.jpg)
![useCallback β’ useCallback(()=>{ },[age]) useCallback(()=>{ },[salary])](https://image.slidesharecdn.com/reactjsworkings-250429002243-96772dba/75/React-JS-Workings-Exercises-Extra-Classes-47-2048.jpg)
![useReducer(reducer,initialState) new state = reducer(state,action) const [ newState, dispatch ] = useReducer(reducer,initialState)](https://image.slidesharecdn.com/reactjsworkings-250429002243-96772dba/75/React-JS-Workings-Exercises-Extra-Classes-48-2048.jpg)
React JS Workings Exercises Extra Classes
- 1.
- 4. Library required β’ 1.React JS library β’ 2. ReactDOM library
- 5. 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 {}
- 6. [ { id :1, name : βJohnβ, age : 12 }, { id : 1, name : βJohnβ, age : 12 }, ]
- 7. Components β’ Collection ofelements β’ Increase readability β’ Reduce complexity β’ Reuse the code
- 8. Components β’ There aretwo ways to create Components β’ Functional Components β’ Class Components
- 9. Assignment β’ Create TwoPages β’ Functional Components β Inline styles β’ Class Components β External styles
- 10. Events β’ onclick β’ onkeyup β’onkeydown β’ onmouseover β’ onmouseout β’ onchange β’ onload
- 11. Rules for FunctionalComponents β’ Should be Pure Functions. β’ It should atleast take one parameter β’ It should return React Elements β’ It should not modify the parameters data
- 12. CRUD β’ C βCreate - state β’ R β Read β props β’ U β Update - state β’ D β Delete β state
- 13. state β’ States aremaintained or present only in Class components
- 14. Pass data fromParent to Child β’ Use props to pass data from parent to child
- 15. Pass data fromchild 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
- 16. Libraries to workwith react β’ React JS library β’ React DOM library β’ Babel library β’ Live Server β webpack-dev-server β’ Project Structure β’ Webpack - bundler
- 17. Npm β nodepackage manager β’ https://nodejs.org/en/download/ β’ Check the version β’ node βv β’ npm βv
- 18. Command to createreact project β’ npx create-react-app app-name β’ npx create-react-app first-react β’ cd first-react β’ code . β’ Ctrl ` - open the terminal β’ npm start
- 19.
- 20. LifeCycle β’ Start ο Phase1 ο Phase2 ο Phase3 ο End β’ Once ο lot of phases Once β’ Birth ο Child ο Adult ο Married ο Old ο Death
- 21. 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
- 22. 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
- 23. Class Component LifeCycle β’UnMounting β Whenever component is unmounted from the real dom β’ componentWillUnmount() - clean up process , clear localStorage
- 24. Router β toachieve SPA β’ npm install react-router-dom --save
- 26. Javascript β’ AJAX call β’Fetch api β’ Axios β HTTP Client which based on Promises.
- 27. CRUD β’ Create -POST β’ Read - GET β’ Update - PUT β’ Delete - DELETE
- 28.
- 31. React Hooks β’ ReactHooks β normal javascript functions
- 33. β’ Primitive valueswill be compared. β’ Reference address wil be compared. β’ Object or array. const person ={ name : βsoniβ, age : 12 } const person ={ name : βsoniβ, age : 12 }
- 34. 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)
- 35. React.memo β’ To makefunctional component pure component
- 36. React Hooks β’ Javascriptfunctions. β’ React hooks should be called only in functional components. β’ It should be defined in top level.
- 37. State in classcomponent 1. Initialize the state 2. Current state data (this.state) 3. Modify the state ( this.setState({ }) )
- 38. State in functionalcomponent β’ const array = useState(initialState) β’ array[0] = current state data β’ array[1] = function to modify the state
- 39. Best Practice toupdate 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)
- 40. useEffect() β’ It isa alternative all three methods β’ componentDidMount β’ componentDidUpdate β’ componentWillUnmount
- 41. useEffect(callback function) β’ useEffect(()=>{ //component is mounted // state or props getting changed return () =>{ // component is unmounted } })
- 42. useEffect first syntax β’useEffect(()=>{ // logic for mounting }, [] ) ===== componentDidMount
- 43. useEffect second syntax β’useEffect(()=>{ // logic executes whenever there is change in count variable value }, [ count ])
- 44. useEffect third syntax β’useEffect(()=>{ return () =>{ // logic to be executed on component unmount } }, [])
- 45.
- 46. States while makinga request to server(REST call or AJAX call) β’ Loading β’ Error β’ Response data - Success
- 47.
- 48. useReducer(reducer,initialState) new state =reducer(state,action) const [ newState, dispatch ] = useReducer(reducer,initialState)
- 49. useState vs useReducer Primitive(number,Boolean,string ) β useState Object , Array β useReducer Global β useReducer Local β useState Business logic β useReducer No business logic - useState