In the seemingly infinite number of JavaScript front-end frameworks and libraries, there is one library that (Arguably) reigns supreme, and that library is . 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. React 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 came along there wasn’t a unified way to work and manipulate the (Document Object Model), jQuery was the first 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 allowed manipulating the DOM to become easier and easier. jQuery DOM API backbone.js 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 to further make developing SPAs more efficient. AngularJS 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 and during each iteration, we add the current number to the end of the 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: listOfNumbers newList 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 function which does the work for us. This is great in that it allows us to debug our code easier as we scale. map() 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 If you have any questions or comments about what I’ve written here? Please let me know in the comments section below! here.

This story contains new, firsthand information uncovered by the writer.

Flow

Amazon

Facebook

Google

Mozilla

A Simple Introduction to Arrays In JavaScript

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

The 4 Main Principles of React That Made It So Popular

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

A Simple Introduction to Arrays In JavaScript

10 Resources That’ll Make You Better At Dashboard Creation

10+ Ridiculously Cool Admin Themes And Templates

10 Reasons Why Front End Development Is a Great Career Choice

10 Reasons To Use TailwindCSS In Your Next Project

A Simple Introduction to Arrays In JavaScript

10 Resources That’ll Make You Better At Dashboard Creation

10+ Ridiculously Cool Admin Themes And Templates

10 Reasons Why Front End Development Is a Great Career Choice

10 Reasons To Use TailwindCSS In Your Next Project

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps