React (ReactJS, React.js) is an open-source JavaScript library for building user interfaces. This convenient tool is designed, developed and supported by Facebook and is available for downloading at their Github. Facebook regularly updates existing manuals for this library and creates new ones. As of today, many developers write plugins for React, but it was Facebook that started this initiative initially. Here is how the logo of React looks like (by this logo you can recognize this library in the vast expanses of the Internet):
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.
Elements are JavaScript objects that represent HTML elements. They do not exist in a browser, but they describe such elements as H1, div, section and other tags. In our case, we all know that JS contains native API to create elements within your code. Using Document.createElement() we can create lots of things, work with them within JavaScript, display them and manipulate them if needed. React is based on manipulation with these elements inside itself. And thanks to this manipulation React provides significant performance optimization.
Let’s determine what components are. Components are React elements created by any developer. Usually, they are parts of any user interface with their own structure and features, for example, navbar, live button or image uploader. We all know that we can write custom tags, sometimes we even have to do it and it’s helpful and brings pleasure (and, generally speaking, it is beautiful). Let’s assume we have <body>, we use Angular and we want to move each component of a user interface into a separate command at the top level and in this way to make each component a widget. Header, footer, and so on… These are not regular tags anymore, these are components and we describe their functionality within themselves. These components contain a number of elements and are based on those elements. ReactJS actually allows writing HTML within Javascript code.
If you want to write HTML within Javascript code without concatenation, without strings, you have JSX. This is the solution to create React elements and components by Facebook. This is an add-on for JavaScript. In the end, any add-on is compiled into a regular JS, like CoffeeScript, TypeScript, etc. In other words, we simply write on JSX (it’s just JavaScript with an ability to write tags), and when we run it, it is interpreted, compiled and calls specific homonym functions of React.
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.
Latest Articles
