History of React

React is one of the most popular libraries for building composable user interfaces. It helps with creating large web applications that can change data, without reloading the page. React store the state of your application internally, and only re-rendering your content into the browser (the DOM manipulation) when the state changes. The main purpose is to be fast, scalable, and simple. React can be used with a combination of other JavaScript libraries or frameworks, such as Angular JS in MVC. It approaches building user interfaces by breaking them into components. The appearance of React helped front-end developers with creating user-friendly interfaces. It can be said that history starts in 2010 with the creation of XHP, which was an inspiration for Jordan Walke (a software engineer) to create React.

Early prototype and stages of creation

XHP was a project that helped in front-end PHP development at Facebook. It is a PHP extension that augments the syntax of the language, the idea was to make front-end code easier to understand and to help avoid cross-site scripting attacks. XHP does this by making PHP understand XML document fragments. Facebook has also developed a similar augmentation for JavaScript, namely JSX.

The first step was the creation of FaxJS. The need for a library like React was born as Facebook Ads were getting bigger popularity. It became hard to manage, so Facebook needed to come up with a good solution for it. The number of features increased, the number of engineers working on the product also and the code base grew bigger. That slowed them down as a company. Over time it became difficult to handle, as they faced a lot of cascading updates.

Any software engineer at Facebook couldn’t deal with that problem easily. Their code demanded an urgent upgrade to become more efficient. That resulted in Jordan Walke building a prototype that made the process more efficient, and this marked the birth of React.js. The rules behind the idea were simple:

• Seamless Client-Server Rendering – Write once, render anywhere (client or server);
• reactive – views are automatically updated on state changes (no bindings necessary);
• performant fast rendering using string concatenation, small code size;
• structural high-level components, functionally defined, declarative views.

React

As the works on the prototype were progressing quickly, it soon became what we know today as React. Its first use case was Facebook newsfeed in 2011. As the story goes on in 2012 Instagram was acquired by Facebook. Their Instagram team wanted to adopt this new technology in their project too. At the same time Mark Zuckerberg wanted to increase the number of consumed feed stories and by that get more profits from monetization.

To do that he decided to change strategies. In the case of mobile, he admitted that the mobile strategy relied too much on HTML5, rather than native applications. As he said, “We’re going to execute this mission to make the world connected and build value over the long-term. The bigger question that will define how we’ve done is how we do with mobile.”. That’s also the moment when he admitted that for Facebook mobile is everything, and it will surpass desktop as far as future ad revenue.

React gets open-sourced

With time, React grew, and Facebook decided to make it open source. The decision was announced in May 2013 at JSConf US. It’s worth mentioning that at the beginning the audience was skeptical. Most people thought that React in reality was a huge step backward. To be honest this was caused by the fact that most attendees of this conference were 'early adopters' when React targeted 'innovators.' The creators decided to start a 'React tour' to help to better understand the React concept.

Through the year React popularity was growing, the community did 2.3k commits and addressed 1.5k issues, version 1.0(0.1.0) was released with big names such as Khan Academy, New York Times, and Airbnb (and naturally, Facebook and Instagram) using React in production. In 2015 Netflix shared their use case of React, in the same year, the first preview of React Native was shown by Facebook on React.js Conf 2015.

React Native

• With React you can create reusable UI components;
• unidirectional data flow;
• virtual DOM: react utilizes a virtual representation of the DOM, known as the Virtual DOM;
• component-based architecture;
• the introduction of React Hooks was in React 16.8. Hooks provide a way to manage state and side effects within functional components. Such as useState and useEffect, they allow developers to add statefulness and lifecycle methods to functional components, eliminating the need for class components;
• instead of rewriting the same code repeatedly for creating similar webpage elements, you can leverage a pre-built React component that you’ve already developed;
• large ecosystem and community.

React Native wasn‘t meant to be a “write once, run anywhere” tool, it was more a “learn once, write anywhere” tool. This ensured that the same set of engineers can build applications for whatever platform they choose, without having to change the syntax. The story of React Native is pretty fascinating. It started as Facebook’s internal hackathon project in the summer of 2013, since then it became one of the most popular frameworks. The first public preview was in January of 2015 at React.js Conf 2015, later Facebook decided to go open with React Native and announced that on F8.

After a year, React Native’s growth and adoption were visible. The statistics on the Github repository were at this time quite impressive. More than 1000 contributors committed around 8000 times in 45 branches with 124 releases. React Native was the 14th most starred repository on GitHub. In 2016 Facebook announced that React Native will get backing from Microsoft and Samsung by bringing it to Windows 10 and Tizen. It’s not a surprise that React became so popular with the support of technical giants and a dedicated community.

React features

Conclusion

React provides advantages like declarative rendering, top-down data flow, encapsulated components, and many others, which may be the reason why it’s so widely adopted nowadays. React helps developers with making scalable and modern applications that look and feel like native apps. React did not only have an impact on the way we write apps, but it also influenced how we design them.

It allows developers to create large web applications that can change data, without reloading the page. That’s the big game-changer in the case of user experience. The main purpose of React is to be fast, scalable, and simple.

If you want to talk with us about your project - just contact us