In the seemingly infinite number of JavaScript front-end frameworks and libraries, there is one library that (Arguably) reigns supreme, and that library is React. But why is react so popular year after year? Before we go into a deep dive into the principles of react that made it so popular, we first need to understand what lead to the genesis of React and what problem it aims to solve.
Table of Contents:
-
The Genesis of React
-
The 4 principles of React
2a. Declarative vs. Imperative Approach
2b. Component Architecture
2c. One-way Data Flow
2d. UI Library
-
Conclusion
The Genesis of React
From the 90s to the early 2000s frontend web development was different than it was now. It had a lot fewer user interfaces and it wasn’t as interactive as websites are today. Before jQuery came along there wasn’t a unified way to work and manipulate the DOM (Document Object Model), jQuery was the first API to create a unified way for developers to work with the DOM without having to worry about cross-browser compatibility issues that developers were facing at the time. This was great and as websites got bigger and bigger other frameworks like backbone.js allowed manipulating the DOM to become easier and easier.
The Birth of Single Page Applications (SPAs)
With the rise of development becoming easier and easier on the frontend. A shift began to occur in web development, where we didn’t need to always get application code from the servers every time we wanted to show different content instead more applications were now manipulating JavaScript to show new content without having to communicate with the servers. Which meant we would rely less on HTML and more on JavaScript. As popularity grew, Google developed a framework called AngularJS to further make developing SPAs more efficient.
The Facebook Problem
Although it was great at the time people noticed that as applications scaled and were getting more complex on the front end, It was hard for developers to debug their code and figure out how data was flowing. This was especially true for Facebook and its Facebook ads app. Although they were not using AnguarJS, the Facebook ads team realized as more people were added to the development team and their code base increased, the engineers and developers couldn’t keep up and realized they needed a better architecture that was best suited for their application.
React The Solution
To solve the problem Facebook was facing, in 2013 Facebook released a library that worked really well for them called React. A year later Google realized that the architecture of AngularJS was making it hard for developers to create good applications at scale so they were creating a remake called Angular. With this happening at the emergence of React a lot of people moved towards creating applications with React and in turn Reacts popularity soared since big tech companies began using it.
The 4 Principles of React
With the emergence of React on the scene, there were 4 key principles that lead to its ongoing success. Those 4 are:
1. Declarative vs. Imperative Approach
Before React when developers would interact with the DOM they would either use libraries or manually change individual parts of the DOM in response to various user events. This way of thinking is considered imperative. For example:
In the example above we loop through the listOfNumbers and during each iteration, we add the current number to the end of the newList multiplied by 10. This process of explaining each step to achieve an outcome is a simple example of an imperative way of thinking. On the flip side, the following would be an example of declarative programming:
In the above example, this is declarative because instead of showing each step of how to make the list we abstract some of the functionality away by using the map() function which does the work for us. This is great in that it allows us to debug our code easier as we scale.
When it comes to React when we are manipulating the DOM instead of doing it in an imperative way where we use JavaScript to show each step in response to an event. We can now instead show React the state of our app and from that React will render the app in the best way it knows how. This is where the name “React” came from because it will react when the state changes!
2. Component Architecture
The second principle is that React’s architecture is based off of reusable components. This breaks up our web application into Lego blocks that we can take apart or switch to other Lego blocks. For example:
When you are making a website using React its second principle is that you want to make your components as reusable as possible so that if you were to make a navbar. The navbar itself would be its own component that could be potentially used in other projects as well as shared with other people. Likewise with a footer or even a button component.
3. One Way Data Flow
The third principle states that data travels from parent to child component unidirectional. Below is an example of steps it could take:
- Parent component passes data of state to child components in the form of props If they take any.
- Child components return User Interface representation of current state or continue passing on data to descending child components.
- React renders UI of the whole state.
- If User causes an event. The state will update causing the events to trigger again and React to re-render.
The reason why this is good is that it allows for code that is more maintainable as an application scales. When we have an error in a component we know that we can look at where the component is and then correct that error there rather than having to wonder if it is due to data outside the scope of the component.
4. UI Library
The last principle is that React at the end of the day is a UI library that is just a way for users to interact with an application on the front end. It has a lot less of a rigid structure on how to build an application as a framework would have. A good way of thinking of React is that it is like an oven in comparison to a framework that is like a kitchen that has all the tools for you. React allows the chef, and developer, to pick and choose their own tools to make their application. React can be used on the web, mobile, and even in developing virtual reality.
Conclusion
In the sea of many front-end frameworks and libraries React is popular for a reason. It offers not only a solid paradigm of programming but also makes code much more maintainable. As technology evolves and the front-end landscape changes it will be interesting to see how far the longevity of React will go.
CTA
Thanks for reading! Please be sure to subscribe to my stories on HackerNoon here. If you have any questions or comments about what I’ve written here? Please let me know in the comments section below!