Sept 16, 2017(Nyamilepedia) —–Â What is the magic of ReactJS? Why it became so popular over such a short time period and is still holding its positions? Probably, answer partially lies with the fact that ReactJS was developed by a guy from Facebook. But it definitely can’t be a whole answer!
So to find out why React is taking over the front-end development, we need to look deeper. And that’s what we are going to do in this article.
React rushed in and in a fairly short time has occupied position of a leading tool for front-end development. Yet it isn’t a comprehensive framework but just a library, it brings such a great functionality to the table, that it literally became irresistible for lots of developing companies and coders as well. No wonder it goes this way, as React is a child of such a giant like Facebook.
But what are the reasons for such a success? What makes React so compelling? Is it worth to hire React developers? Let’s put everything under the scope and find out.
Why it became so popular so quick?
Simplicity
First and the most attractive reason hides in its simplicity. Given that React is just a library for JavaScript, all you have to do is to learn just a fairly small API. Five hours of your time, some few features to master and you are ready to go. Sure, if you’re good at JavaScript all along.
Afterwards, your JavaScript level directly correlates to what you will be capable of with ReactJS.
With such a low entry margin a decent JavaScript developer can become a productive React developer in just a few hours
React’s virtual browser
React, kind of, gives you the possibility to work in a virtual browser. Instead of having a huge headache from dealing with the DOM API.
Its browser is much more friendly than the actual one. And it functions as a mediator between developer and the real browser. So it provides a developer with a way more convenient coding environment.
React is declarative
All what developer has to do is to describe the UI with ReactJS and then tell it what does he want, in other words – model the state of UI. Simple as that. React will take care of the rest.
Therefore, it will translate that declarative descriptions to actual UI in the browser. The point is that ReactJS bases this functionality on HTML. However, with React, we get to be declarative for HTML interfaces that represent dynamic data, not just static data.
One more great feature is that React updating UI on his own, during nearest transaction, based on given descriptions.
Why it keeps being so popular?
The use of components
Components are the key when describing UI in ReactJS. Those are just like simple functions in any programming language. Developer calls functions with input and receive output. Functions can be reused as needed to compose larger functions out of a smaller ones.
The same goes to components in ReactJS. However, in this case their input is called properties and state. While component output plays a role of a description to UI. A single component is reusable in multiple UIs, and components may contain other components.
Also, a full React component may have a private state. That’s for holding a data that may change over time.
The way it updates
As a developer changes a component, represented by it UI changes as well. Consequently, this change in the description of the UI should be reflected in the device we’re working with.
As with browser, developer has to regenerate the HTML views in the DOM. While with ReactJS one does not need to care about how to reflect such changes, or think about when to take changes to the browser, React will do it on his own. It will respond to the state changes and the DOM will be updated automatically as soon as possible.
 The virtual representation of views
ReactJS helps us to write HTML using the power of JavaScript. Thanks to it we can use the power of JavaScript to generate HTML that depends on some data. Â
If only data has been received from the server, there is a necessity in something more than just HTML to work with it. In that case it is wise to use JavaScript itself to generate the HTML. And that’s where ReactJS shines.
Using JavaScript to render HTML makes it easy for React to keep a virtual representation of HTML in memory. That is broadly known as Virtual DOM. It is used by ReactJS to render an HTML tree virtually first. Afterwards, every time a state changes and a new HTML tree generates, all that needs to be taken to the browser’s DOM. And instead of writing the whole new tree React will only write the difference between the new tree and the previous tree. As ReactJS already has both trees in memory. That’s what is called the Tree Reconciliation.
Author – Alex Volski:
I’m a content writer at Thinkmobiles for 5 years. And I have a confession to make. I’m keen on web development. That’s why I’ve decided to become web developer myself very soon. But, for now on, I’m just walking around and constantly bother our web developers =). So if you’d like to chat about web React, Angular, JS or whatever – please contact me. Hope to hear from you soon.
