React was first created by Jordan Walke, a software engineer working for Facebook. React first deployed on Facebook’s newsfeed in 2011 and on Instagram.com in 2012.
- React allows developers to create large web applications that can change data,
without reloading the page. The main purpose of React is to be fast, scalable,
such as Angular JS in MVC.
SINGLE-WAY DATA FLOW:
In React, a set of immutable values are passed to the components renderer as properties in its HTML tags. The component cannot directly modify any properties but can pass a call back function with the help of which we can do modifications. This complete process is known as “properties flow down; actions flow up”.
Virtual DOM is a node tree listing of components, which is a lightweight in-memory representation of real DOM.
Virtual DOM is very easy to understand if you take an example of a lift which has a mirror inside it. Suppose, 4 people, enter into the lift. Now, the mirror will reflect its appearance with 4 people. Again people entering into the lift will reflect the object of the mirror. And the same effect happens when people exit from the lift, the mirror object gets changes (increase, decrease, or even empty). So, in reality, the mirror has no real object, but it only reflects its presence with an outer object.
By using the concept of these hooks we don’t need to manipulate the functional component to class component, Because hooks will not work in classes. Hooks not allowed to use lifecycle methods like componentDidMount, componentDidUpdate, and componentWillUnmount why because we have built-in hooks like useEffect.
RULES OF HOOKS:
BASIC BUILT IN HOOKS:
- It gives stateful value and we can update the state by importing useState.
- If you change a global variable then it is a side effect in useEffect.
- In class component, if we share data from parent component to child component we use props, But in functional component it accepts useContext.
CONVERSION OF A FUNCTION TO THE CLASS
- Initially, we should Create an ES6 class, with the same name, that extends React.Component.
- Add a single empty method called render().
- Delete the remaining empty function declaration.
- Move the body of the function into the render() and replace props with this.props and state with this.state in the render() body.
Quick development major advantage is code reusability, app performance, and development speed.
In react, developers can utilize the existing code at any time. For suppose if we change any existing component it is not affected by any other component because components are not the same.
BETTER USER EXPERIENCE:
Developers can easily update by the use of virtual DOM when the user performs any changes without affecting any other part of the application.
CODE STABILITY WITH ONE DIRECTIONAL DATA BINDING:
If a developer changes any parent component of the reactJS application then the child component will not be affected. React ensures that the code remains stable.
In any reactJS application, the state is under the constructor and it is in object format. We can easily access the state in any function of the component without using callbacks. It makes very easy to test the reactJS application.