Basic of React.Js

                Is React library or framework

React is a javascript library because you may need to use other libraries to form a solution. Frameworks make many smart designs for you which helps you to focus on the logic. Frameworks are not flexible they want you to do things according to their way. Even if you want to use a single piece you need to include the whole thing.

                     More about React

React is a javascript library that is used to build the user interface. Since browsers understand javascript we can use react to describe web UIs.React is said to be declarative which means we tell react what we want. React will take care of the “how” and translate our declarative descriptions (which we write in the React language) to actual UIs in the browser. If we don't use React or similar libraries then we have to manually build UIs with native Web APIs and JavaScript and which is quite difficult.

                JSX and HTML are the same?

JSX means javaScript XML. Browsers don't understand JSX. When React library is installed browsers understand the React.createElement Api calls. We can use React without JSX. But this is similar as building websites only using javascript. Though it is possible but we prefer to use HTML. That's why JSX is important.JSX is basically a compromise. Instead of writing React components using the React.createElement syntax, we use a syntax very similar to HTML and then use a compiler to translate it into React.createElement calls.

                   Data flow in React

In react data flow in one direction from parent to children. If you want to send data from parent component to child component you have to use props. The advantages of one way data flow or unidirectional data flow are:
1.it’s less error prone, as you have more control over your data
2.it’s easier to debug, as you know what is coming from where
3.it’s more efficient, as the library already knows what the boundaries are of each part of the system

                    How does React work?

ReactJs uses Virtual DOM which makes it faster as compared to other frameworks like Angular and VueJS. React makes the DOM tree-like structure of all the components internally called the VDOM.

React has a virtual DOM which is a copy of the actual DOM and is kept in the browser Memory in the form of a javascript object.
React also has the state and props, which holds the data of the application and is used to pass that across the components in the hierarchy.

Whenever the change in the data means state or props of the component changes then it creates another virtual DOM. Now, the comparison between the previous and the updated VDOM takes place. This checking takes place using 'Diffing Algorithm' and it's quite faster than checking with the actual DOM.

Thus, whatever the changes are detected in the comparison of the two virtual DOMs in the memory gets updated in the actual DOM directly. This process is known as 'Reconciliation.

Rendering of the DOM is a very tedious and slow process. Because it involves the CSS parsing for the layout changes and HTML parsing for UI calculations. Hence, Virtual DOM is faster in comparison because it does not involve the complete render of the page.