You should know a little bit about the React

React is a javascript library. Most people believe this is a framework but its a most useful library for developers.It isn’t a complete solution, and you’ll almost always need to combine it with other libraries to form a complete solution.

React’s Tree Reconciliation

React is a quick way to work with the DOM tree in a browser. It functions as your handler, communicating with the DOM on your behalf. It has a simple API to learn, and your JavaScript skills can help you become a better React developer.

ReactDOM.render

The entry point for a React program into the browser’s DOM is ReactDom.render. It’s a DOM element that’s defined by a VIRTUAL element. This is the result of the React.createElement API process.

React.createElement

The React.createElement method is used to describe DOM elements with objects in React. React elements are the name for these objects. The ReactDOM.render method is used to make a React entity appear in the DOM. The ReactDOMrender method does a lot of things to represent the state of a React entity in the browser’s DOM tree.

Updating React elements

The smarter diffing function in React only updates the core DOM tree, which is the only one that needs to be modified. No matter which way the UI views need to be transformed, React will only send the “limited” changes to the browser. This takes away a significant layer of difficulty from the way we think about upgrading user interfaces.

Using functions to create components

It is easier to create components with functions in React than it is to create components with classes.For example

function Button (props) {
  // Returns a DOM/React element here. For example:
  return <button type="submit">{props.label}</button>;
}// To render a Button element in the browser
ReactDOM.render(<Button label="Save" />, mountNode);

Because a new API for making a function component stateful was released with the React hooks update.

Virtual DOM

We’re trying to figure out how virtual-DOM works. Virtual-DOM is a browser extension for the HTML DOM. It makes it a lot easier to show the DOM on the screen. When creating a React app, we must build a component and load it into app.js. React creates the Component Tree structure locally. There’s a basic button that subtracts a number from the input. A function is named when a target is hit, and a part is formed from it. It’s easier to use the browser to reduce these two steps and get better performance.

JSX

JSX is a react element. I’ll show an example below to help you understand.

<MyButton color="blue" shadowSize={2}>
  Click Me
</MyButton>
React.createElement(
  MyButton,
  {color: 'blue', shadowSize: 2},
  'Click Me'
)

The capitalized types indicate that the JSX tag should be used with a React component.It helps in the development of html forms in browsers using the (React.createElement) feature.With the help of Props, you can easily transfer all data from one component to another.

componentDidMount()

componentDidMount() is called right after a component has been installed . This is where you can put any configuration that includes DOM nodes. This is an excellent place to start the network request. This pattern should be used with care since it often adds to performance issues.

ComponentDidUpdate()

ComponentDidUpdate() shall be invoked immediately following update.
Use it when the component has been revised as an opportunity to run the DOM.It is a good place to make network requests when comparing the latest props with previous props.

Error boundaries

Errors boundaries is react components in your child component tree that capture JavaScript errors. They log the errors and display a fallback user interface in place of the crashing component tree. Using only error limits to recover from unusual exceptions.