History of ReactJS
Understand the historical context behind ReactJS's creation, tracing the evolution of JavaScript libraries like AngularJS to React's innovation. Learn how ReactJS introduced new approaches such as JSX, state, and props, and how it shaped modern web development and state management solutions.
We'll cover the following...
The predecessors
Did you know that the first website ever created is still live? It was created in 1991! A lot has changed since then. To start, web developers wanted to change their websites’ appearance; therefore, CSS was created. A few years later, those same web developers wanted to see more interactivity on their now beautiful websites. This is when JavaScript found its place on the internet. But as we know, the web never stops evolving. Heavy usage of JavaScript led to the creation of libraries such as jQuery, BackboneJS, and Ember. Each library’s creators learned lessons from their competitors. They made decisions that led to creating very different developer experiences. The developers had their preferences and little disagreements over which library was better.
The user experience on websites evolved, no matter which library was used behind the scenes. Websites became much more interactive and adaptable to the user’s screen size. For example, it is common practice today to create separate menus for mobile views and desktop views. This can be achieved with JavaScript or CSS alone. This user experience shift could not have taken place without the evolution of JavaScript open-source libraries.
AngularJS framework
After a few years of adding more and more separate bits of JavaScript to websites, it was time for a more holistic solution. The first breakthrough came from Google with AngularJS, officially released in 2010. AngularJS was different from other solutions on the market at that time. It was not just another library; it was a framework.
Developers were able to create complex interactions quickly, and they were no longer afraid that any change to their JavaScript files could break the entire page. We don’t want to go into the implementational details of AngularJS. After all, that is not the focus of this course. In broad strokes, AngularJS introduced special HTML attributes that were observed by the framework running in the background. As imagined, when JavaScript is observing dozens or even hundreds of elements and events, it will slow down. So, the user experience is suffering, and the world is ready for another JavaScript revolution.
Google thought it would remain the leader with Angular version 2, but in 2013, Facebook developers announced the release of ReactJS.
And then there was React
ReactJS was presented specifically as a user interface (UI) library. It was conceived to be used for end-user interactions on websites. It also used JSX—an extension to JavaScript created for React. Many developers reacted (pun intended) angrily to this new syntax. These angry reactions are not unexpected in the world of tech. Any new technological solution has to weather the storm of angry Reddit posts saying that it’s ugly, useless, or simply terrible. Luckily for us, ReactJS developers did not stop working on their open-source framework because of this initial negative reaction. Furthermore, developers who got to know ReactJS became its advocates. Why, you may ask, did ReactJS stand the test of time while Angular hasn’t? It has to do with the high-level mindset of the framework. ReactJS proposes elegant, simple solutions while staying completely configurable to any needs.
Going back to our history lesson! We’re in 2013, and ReactJS has entered the scene with a bang. Many people hate it, but others use it for more and more complex websites. And it turns out, unfortunately, that ReactJS does not scale well. The React components use state and props. If the parent creates a state, which needs to be read four to five components lower in the hierarchy, we encounter something that is dubbed prop drilling. Prop drilling means that the developer has to pass the necessary prop through many parent components in order to get to the final child that needs to read it. This process is irritating and boring at the same time! This is when the first state management library was created—Redux.
As of writing this course in 2024, ReactJS is one of the most popular JavaScript libraries. It evolves constantly, and its maintainers are open to public discussions and suggestions. In 2019, they introduced hooks and context. These two React utilities can cover a lot of our state management needs. They were created because the React team realized that developers using React needed an improvement in the state management area.
A few years before the introduction of hooks and context, specifically in 2015, Facebook developers released React Native. The true hero of this course! But let’s not get ahead of ourselves. At this moment, it is important that we understand the basic concepts of React.