The story of ReactJS

ReactJS was created at Facebook by Jordan Walke, who has worked on it since 2011. It was first released in June 2013, and is becoming increasingly popular. It was open-sourced in May 2013, at JSConf in United States. Many developers have started to use it in production such as Khan Academy, New York Times, Airbnb, and of course Facebook and Instagram. To describe it in shortest way – it’s a JavaScript library for building user interfaces.

The main idea was to simplify applications development process, and the key question developers were asking themselves was, how should we structure JavaScript applications? At that time, there was many JavaScript frameworks in use, but none of them gave the right answer to this question. One of first thoughts was to build UI by breaking it to number of possibly small, reusable components. Components and their behaviors should be encapsulated so each component has his own work to do and when something changes React knows where and what part need to be updated. This approach leads to better user experience and improves application performance because small data changes don’t affect the entire application anymore.

To understand how React works, we need to look how it handles initial render of the view and how it manages updates. All work with view is made by React’s render function, which returns an exact description of your component at any point in time. When something changes, render method is called again and React in virtual DOM compares results and generates a minimal set of changes that is applied to the DOM. Pete Hunt from Facebook describes that process as reconciliation. To do that setState method needs to be called to trigger UI repaint (because React doesn’t do this by default).

There is another interesting addition – a new optional syntax extension called JSX. At first there were some critics about mixing logic and markup in one place but in the end it’s quite helpful.

Another thing is that React uses one-way data binding, and implements the same model of computing as JavaScript. Few features adds to it’s speed, especially virtual DOM and that every component has it’s own lifecycle.


Leave a Reply

Your email address will not be published. Required fields are marked *