How React.js Works

React is a JavaScript library developed by Facebook to build interactive, reusable components for user interfaces. Facebook uses it in production; Instagram is built entirely in React. It runs on both the client and the server.

How React works

React is built around functions that take state updates from a page and translate them into a virtual representation of the resulting page. When React receives a state change, it reruns those functions to get a new virtual page representation, then translates that result into the exact DOM changes needed to display the new state.

At first this sounds slower than updating each DOM node directly. Behind the scenes, though, React uses an efficient diffing algorithm to find the differences between the current virtual page and the new one, then makes only the minimum set of DOM changes needed.

This relies on a concept called the virtual DOM. React builds sub-trees of nodes based on state changes, manipulating the real DOM as little as possible to keep components up to date.

How the virtual DOM works

Think of an object modelled around a person with all the relevant properties. That object reflects the current state of the person. React builds the same kind of model for the DOM.

Now apply some changes: a moustache and biceps added. React handles this in 2 steps:

• Diffing: React runs an algorithm that identifies exactly what changed.
• Reconciliation: React updates the real DOM with only those diff results.

Instead of rebuilding the entire person from scratch, React changes just the face and the arms. This means that if text sits in an input field and a parent node elsewhere gets updated, the text in that field stays untouched.

Where to go next

React powers much of modern web development. If you want a broader picture of how JavaScript is used on the web, Functional Programming in JavaScript shows how pure functions and immutability patterns complement a React codebase. For the server side, Node.js Hello World: Install and First Server walks through the runtime React apps typically pair with.

Working on a React assignment and need a hand? The team at GeeksProgramming handles JavaScript and React projects. See Do My Programming Homework for how it works.