React is a very popular JavaScript library. Today, many startups choose React as their tool for building fast front-end side applications for their projects. It has over 5.5 million weekly downloads, but not a lot of developers know how React actually works under the hood.

Going through the different documentations may be frustrating, so in this article, I’ll try to tackle that task and explain the inner workings of React as well as I can. There’s a lot to cover so let’s dig in.

Unlike Angular or Vue, React really is just plain JavaScript, so if you know the syntax of JS, a little bit of state management there, a little bit of components here, and you are pretty much set to start working in React.

React Virtual DOM

At its very core, React just maintains a tree for you and it will do efficient diff computations on the nodes. Your HTML code is pretty much a tree, or at least that’s how your browser treats it. It constructs what is called the Document Object Model or DOM as it’s often referred to.

The HTML DOM is pretty much an interface (API) to modify the nodes in it. It contains different methods like getElementById or the new querySelector to target each node and we use JS to work with the DOM. This means whenever we want to change content, we are modifying the DOM but it’s quite expensive. Why is quite expensive, that’s the question.

If you are at least somewhat familiar with React, you have probably heard of Virtual DOM, right?

#coding #programming #web-development #react #reactjs