What is this anyway? And what is its essence? Maximum what you can build using React is a component. Those who worked with AngularJS, for instance, know that this framework has several components – filters, controllers, commands, services, modules. All these items are application components and we work with them. Using these components, we create logical entities in particular applications. With React, we have only components.
In general, React can do only two things – update the DOM and handle events. You will surely ask yourself, why do I need it at all? That’s something that anybody can do. Even browsers can do that. The point is that React can do it in a very optimized and quick way, so in some cases, it is really essential.
So why did we have described the difference between elements and components? When you develop something on React, you actually develop a set of components. Each component has its own markup. This markup will become the real DOM after compiling, and this DOM will be displayed somewhere in your browser. But the point is that React maintains its own in-memory DOM which totally matches the real DOM and it maps (or brings into accordance) its internal in-memory DOM with the real DOM from the browser. In this way, any event that will occur in the virtual DOM will immediately occur in the real DOM and vice versa. This is the concept of a virtual DOM. React renders the whole structure of our application in its in-memory DOM using HTML elements. In other words, all you have written in your code when you created components will be first converted into Document.createElement(), then the required hierarchy will be created and then these elements will be written into regular memory. An ID is assigned to each such element so that further work with them is more optimized. And then React converts this structure into the real DOM nodes, inserts them into the DOM of our browser and (what is most important) it does it quite fast.
And now the main point about why React is so fast. It compares the content of its in-memory DOM with the real DOM and finds that small div, based on which we have to perform manipulations with the DOM. We all know that manipulations with the DOM are performed quite slowly. Any manipulation with the DOM means recalculations, rewriting, remapping of many things within the browser, within JS engine. Any changes to the DOM mean recalculating, statistics, corrections, etc. That is why React has chosen a simpler way where we update the DOM with minimum efforts required. And this is why it stores the real Dom with its content in its memory.
Unlike AngularJS, React strictly determines things that can be changed and things that are static (things that represent some kind of settings). Properties (or props) cannot be changed as this is your default data. In our case, we have just a component that reflects the data it received. The question is how to transfer the data to the component? When we describe commands (for example with isolate $scope), the data is transferred as part of attributes of an element to which this command refers.
So what is the scope of React? How can you understand that React will perfectly suit your project? First of all, if you write something heavy – React is your choice. It seriously moves towards iOS, and you can write mobile apps with React quite quickly and successfully. Second, if you need to quickly create some prototype, React will help you here. Those developers who are just going to learn AngularJS will have it easier if they start with using React. With React you can also train your skills in architecture development on some smaller projects.