28
Most Essential Concepts You Should Know about React
JSX stands for JavaScriptXML. It is a javaScript Extension syntax allows us to write HTML and javaScript together in React. It comes with all the feature and full power of javaScript. JSX is faster than regular javaScript.
Class Component:-
A Class component requires you to extends from React.Components and create a Render function that returns a React Element. A class component is called as statefull class component. Whenever the state of the components changes the render method will call.Functional Component:-
A Functional component accepts props as an argument and returns a React Element. There is no render method used in funtional component. A function component is called as stateless functional component. It render the user interface based on props.
Props Stands for properties. Props are nothing but a variable or object. Basically props are used to pass some data from one component to another component in react. The data flow between components is from paraent to child only.
State is a kind of object which allow components to manage their own data in react. It control the behaviour of the component. The component re-render when the state of the object chnages.
React LifeCycle has three main phase: Mounting, Updating, and Unmounting.
Mounting:-
Mounting means putting elements into the DOM.
React has four methods that gets called in the given order, when we mount a component:-
constructor()
getDerivedStateFromProps()
render()
componentDidMount()Updating:-
A component is updated whenever there is a change in the component's state or props.
React has five methods that gets called in the given order when a component is updated:-
getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()Unmounting:-
when a component is removed from the DOM, or unmounting as React likes to call it.
React has only one ethod that gets called when a component is unmounted:-
componentWillUnmount()
Hooks are a new feature to React. It allows you to use state and other features without a class. It works with functional components. Hooks are nothing but a functions which hook into React state and lifecycle features from functional components.
28