Chami Chitalia explains React, a Facebook-maintained JavaScript library for building user interfaces. React uses a virtual DOM, an in-memory copy that tracks changes and updates only the parts of the real DOM that changed, avoiding full page refreshes and delivering faster performance than traditional DOM manipulation.
Chapters
Hello guys, this is Chami Chitalia. Today I am going to discuss the introduction of React and yeah, a little bit about the virtual DOM. So today we are going to discuss what is React, how it differs from JavaScript, and yeah, the difference between virtual DOM and real DOM, and how it is going to be different in rendering of the object. So stay tuned with me. What is React? React is a JavaScript library maintained by Facebook, and it is component-based. Yeah, like everything in the React is a component. If you are going to create a particular frame in the HTML, then it is a component. Directly, indirectly, you don't know it is component, but in the language of React, it is a component. It is a declarative efficient for building user interface. React is basically used to create a single page mobile application. So what is single page mobile application means? If the data in the server are changed, so that will change in your device automatically without pressing the refresh button. So that is called single page mobile application. And yeah, React uses the concept of virtual DOM. That's why single page mobile application is a feature of React. React is not a framework. Yeah, everybody else of us know that, and it is just a library developed by Facebook to solve some problems that we are going to face in earlier of the real DOM. So React uses the virtual DOM. And yeah, what is a virtual DOM? Virtual DOM is a lightweight copy of real DOM. Virtual DOM object has the same property as a real DOM object, but it lacks the real thing's power to directly change what is on the screen. So let's understand it with a figure. So it is a virtual DOM and a real DOM. Basically, virtual DOM is a liveback of your real DOM. And yeah, if you are going to make a change in this particular node in the virtual DOM highlighted by the green and you change it, so that particular object is compared with the real DOM. And if the changes is found, so So rear-dom is going to re-render that a particular object instead of re-rendering the whole object. So that is the benefit of virtual-dom. And because of this concept, React is faster than any other rear-dom technology or frameworks. So that is the benefits of the React. And yeah, this is the concept of the virtual-dom. So that's all.