React

1. React JS Workings

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 of elements
• Increase readability
• Reduce complexity
• Reuse the code

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

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

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

11. 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

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

13. state
• States are maintained or present only in Class components

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

15. 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

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

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

18. 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

19. • App
• PersonList
• Person

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 – to achieve 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. • [
{
email:””,
password:””,
phoneno:””,
name:””
},{
}
]

31. React Hooks
• React Hooks – normal javascript functions

33. • 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
}

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 make functional component pure component

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

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

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

39. 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)

40. useEffect()
• It is a 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. Dummy Server
• https://jsonplaceholder.typicode.com/

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

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

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