In this post I want to talk why React is the most popular framework because you can hear this question really often on the interview and a lot of people don't understand the real reasons.

History of frameworks

To understand why React is the most popular framework we must look a little bit on the history. Actually React was created in 2013. And a lot of people learned about it somewhere around 2014. And at this time we had 3 major frameworks.

First of all we had jQuery. And actually jQuery is not a framework, it's a library, so this is just a bunch of functions which were use to write cross browser Javascript.

Nowadays we don't need jQuery at all because almost all JavaScript features are supported in all browsers or we use transpiling tools like Babel to bring new features in all browsers

Another framework that we had at that time was Backbone.js. And actually if you don't know what Backbone, this is just some wrapper with model view and controller around jQuery. Which actually means it is not a lot and you still do a lot of DOM manipulations. This is just a way to structure your code. But you still write your jQuery code just inside a framework.

And the best what we had at that time was AngularJS.

And actually AngularJS the first version doesn't have anything in common with Angular that we have nowadays

Today AngularJS the first version is long term support and you should not learn it on purpose or invest your time in it. So AngularJS approach was the most interesting. They had a life cycle inside AngularJS and they constantly were checking if our model inside AngularJS or our view inside HTML changed. And they did changes directly to the DOM every single time, when we are changing model. Which actually means we are talking here about two way data binding between our model and a view.

React is coming

And at that time react was first presented. And actually most of the people didn't get the purpose of react and how it solves things. They just saw JSX templating inside React and they said "This is garbage, we won't use it". Because as you can see JSX is completely new language, which is super similar to HTML, but we are writing our tags inside JavaScript.

And actually it is not JavaScript at all, this is just a special syntax, which allows you to create JavaScript functions in the way, how we typically write an HTML.

At that time all people wanted a separation of concerns. They wanted to have their JavaScript and they wanted to have separately their HTML and they didn't want to mix them. But this is not possible because if we are talking about modern frameworks: Vue, Angular or React, they all have exactly the same approach. They just have JavaScript functions and they don't have any HTML at all.

When you are writing some markup inside all these 3 frameworks, you don't write HTML at all. You write some pseudo code, which is converted in plain JavaScript functions. And this is actually the only solution to bring the state and HTML together. Because we must write them in a single place.

Typically in all these frameworks we isolated everything in components.

And this is one of important features, that React introduced. We have inside Reacts not a lot of different entities like it was for example inside AngularJS, we just have components and nothing else. And actually we split the whole application, that we create inside small reusable components. This is why it is super simple to create components, to split our page in different components and have shareable logic if we need to. Because all this stuff is still JavaScript. This is why we can import our components, export and reuse everywhere.

Core feature of React

But even nowadays a lot of people don't understand the core feature of React. We write state inside React and React simply does it's magic and rerenders our HTML. Which actually means we are not working with HTML and we are not working with events directly.

We simply have some state and we think about changing this state of React and React will mirror these changes inside HTML.

Virtual DOM

And here we are coming to a super important point. React leverages virtual DOM. What is virtual DOM at all? This is the representation of our HTML page inside JavaScript, which actually means we have a page and react based on this page creates pseudo DOM inside JavaScript. The main idea is when we have some changes inside our state inside React, it doesn't do these changes directly to HTML. Because actually it is super slow to do anything with DOM.

This is why it is much faster to compare our changes with data inside JavaScript. So actually React has the old state and the new state, it can compare these two states and after this apply only needed changes to our real DOM. Which actually means React doesn't work like all other frameworks that were existing at that time. It doesn't rerender data directly inside HTML. It does it only through virtual DOM, which is extremely efficient.

Which actually means every single time React generates a new tree of our components and compares it with the old state to know what changes it needs to apply to the real DOM.

State management

Also it is important to mention that React doesn't have any features related to state management system. This is why we have a lot of different solutions and the most popular is Redux library, which is a state management system and it plays really nicely together with React.

Conclusion

So even if we count from 2014 React exists already 8 years and it is still the most popular framework. Why it is like that? Because actually we doesn't have anything new. We have Angular, React, Vue, which are 3 most popular frameworks and they all are working in the same way. Yes, you have different syntax in all of them, but the idea is the same. They all use virtual DOM underneath to compare their changes. They all have some component based system, because this is the easiest way to split the application. And actually this is the answer.

After React we didn't get anything new and all other frameworks are working exactly in the same way.

And also if you are interested to learn how to maintain your life working balance make sure to check this post also.