Part 3 React flow | React components | Single page application | Reconciliation in react скачать в хорошем качестве

Part 3 React flow | React components | Single page application | Reconciliation in react

React flow:- React is a JavaScript library for building user interfaces/web pages. React is used to build single-page applications. React is a Component-Based library. We can implement components once and reuse the in the entire project. React works based on the virtual DOM. React maintains the state in the virtual DOM and compares it with the previous Virtual DOM state. It will apply the differences to the real DOM. React allows us to create reusable UI components. DOM: Document Object Model. What is SPA? ----------- SPA means Single page application (SPA) SPA is a single page where a lot of information stays the same and only data will be updated in a particular place. For example, when we load our site, the sidebar and header remain the same, and only the body changes based on navigation. If it is normal HTML, then the whole page will be reloaded. It will improve performance and user experience. How does React Work? ------------------- React creates a VIRTUAL DOM in memory. Instead of manipulating the browser's DOM directly, React creates a virtual DOM in memory, where it does all the necessary manipulating, before making the changes in the browser DOM. React only changes what needs to be changed! What is reconciliation in react? A virtual DOM is a lightweight JavaScript object which originally is just a copy of the real DOM. It is a node tree that lists the elements, their attributes, and content as Objects and their properties. React works based on the virtual DOM. React maintains the state in the virtual DOM and compares it with the previous Virtual DOM state. It will apply the differences to the real DOM. This process is called reconciliation. The mechanism to diff one tree with another to determine which parts need to be changed and then update the original DOM with it is called Reconciliation. ReactJS uses a new reconciliation engine called Fiber since version 16.0 Versions:- --------- The current version of React.JS is V18.0.0 (April 2022). The initial Release to the Public (V0.3.0) was in July 2013. React.JS was first used in 2011 for Facebook's Newsfeed feature. React renders HTML to the web page by using a function called ReactDOM.render() The ReactDOM.render() function takes two arguments, HTML code and an HTML element. The purpose of the function is to display the specified HTML code inside the specified HTML element. ReactDOM.render(p, document.getElementById('root')); React flow:- ---------- React will load the index.html first. As part of the index.html file, we have the below tag Index.js will be executed after that. As part of the index.js, ReactDOM renders the components. React and ReactDOM classes are imported from the react libraries. render method used to render the output.