(1) React
React is a JavaScript library and it’s not a framework. Unlike framework, we can use more libraries with React to create our websites or apps. React is only focused to build the user interface using components. We can use native web APIs, HTML, CSS, and JavaScript to build our react UIs. React is very popular for its performance using virtual DOM.
(2)Difference between framework and library
There are many differences between framework and library. The framework serves a group of purposes but the library is designed for only special purposes. The framework is too strict about the use of the coding techniques. Everything is predefined for using a framework no other libraries can be used on a framework. But in library mechanisms, it is possible to use another library with the existing one.
(3) JSX
A special syntax extension for JavaScript is written for React. It is not exactly JavaScript nor HTML but it looks like HTML code. As the file is not exactly JavaScript so browser can’t read the JSX code in the normal way. For this reason, it needs to convert the JSX code into regular JavaScript code. To handle this issue we have to set a JSX compiler in our computer that converts the JSX code into normal JavaScript Code.
(4)Rendering
Rendering means to appear the JSX expressions on the screen. When a setState() call is executed then react changes the state and call render() method. Render() method then updates components representation in virtual DOM and decides what to render in the browser.
(5)Conditional rendering
We know that rendering means to express the user interface on the screen. In conditional rendering, this done on-screen on the basis of conditional logic. Conditional rendering allows some part of the user interface to show on screen if the given conditions are meet, if conditions are false then do not shoe it. There are some ways to do this. For example, Ternary operator, possible variations.
(6)Virtual DOM
DOM means “Document Object Model”. DOM is the programming interface for browsers for HTML and XML documents that used to create a tree structure. In React technology virtual DOM is a unique concept that is used to render UIs. In React technology using virtual DOM rendering takes place only where the changes occur. For the identification of these changes react use virtual DOM. I release the browser from reloading the whole website and update only the changes.
(7) React’s tree reconciliation
React use a unique concept of virtual DOM to reconcile the actual DOM. When it is needed to render a react app in a browser, it first generates a virtual representation and saves it to memory for future use. Then it makes the tree shown in the browser by performing the DOM operation. When any update occurs in the react tree element that previously rendered then it makes another virtual tree and compares it with the previous virtual tree that is stored in memory. Then react changes the only sub-tree that is updated but does not re-render the whole tree. This phenomenon is called react’s tree reconciliation.
(8) Components:
Components are the mechanism in react application that helps a programmer to split the user interface into independent reusable pieces that are also isolated. Components conceptually work as JavaScript functions. They also can accept arbitrary inputs using ‘props’ and make operations using it to show on the user interface. One component can be used several times as required.
(9) Props
In React application, props are used to pass data from one component to another. We can collect the value using the keyword props. We can also destructor the props and use them that are not the value of that component.
(10) Optimizing Performance of react app
As the DOM operation is costly in performance so react uses a different clever technique for minimizing the number of DOM operation that is required to update the user interface. Some techniques: Using Immutable Data Structure, Using stateless components, and React.PureComponent, Using production mode flag in web pack, Using multiple chunk files, Avoiding additional HTML element wrapper, Using index as key for map, etc.
