Modern Full-Stack Development

 Yeah, Okay, History Nerd, That’s All Great, but What 
IS React?!
You might actually be surprised to see how little there fundamentally is to React. It 
doesn’t ship with a bunch of interface widgets like grids and buttons and sliders and 
such as many more “robust” toolkits do. It doesn’t provide a rigid structure to your 
application like many frameworks do.
At a very high level, the point of React is to make it easy to reason about the 
structure of your interface at any given moment in time. This is accomplished by way of 
components, which you can think of as self-contained pieces of the interface. Combine a 
whole bunch of widgets and you have yourself a user interface.
Chapter 3   Client-Side adventureS: reaCt

---

47
Getting into a little more detail, but still in possibly simplest terms, React supplies 
just four things: the aforementioned components (more precisely, an approach for 
building them), props, state, and style (some might argue this fourth shouldn’t be 
included since it’s outside React itself, but I think it’s reasonable to include it).
Well, you might consider there to be a fifth thing too, given that it’s so fundamental to 
React, and that’s virtual DOM.
You won’t be using virtual DOM directly, but React will be using it extensively. 
Presumably, you know what the regular DOM is, but if not, it’s the Document Object 
Model, which is to say the tree structure that the browser builds as it parses your 
HTML. All the elements, denoted by tags, in the HTML, become nodes in this tree.
Typically, when you do something that makes a change to the page, whether it be as 
a result of user action or programmatically, the browser has to perform some relatively 
intensive and expensive work, primarily to repaint the screen (any change that doesn’t 
affect the flow of the page falls in this category, things like changing the color of text) and 
reflow (any changes that can affect the layout, say, inserting a new 

 element). This 
DOM, therefore, has a direct tie to what you see on the screen, and it offers an API to 
manipulate it with. All of this takes computing time obviously, and sometimes a lot of  
it – enough to impact the user experience.
So React uses the concept of a virtual DOM. This is, in essence, a secondary DOM 
that sits conceptually on top of the real DOM in memory. Rather than manipulate 
the real DOM directly, you instead allow React to mediate the changes that could 
occur to the page. React will update the virtual DOM and then will intelligently figure 
out, via a diffing algorithm, the least amount of real DOM work that can be done to 
accomplish the update. Most importantly, this allows React to batch up real DOM 
changes and apply them all in one go, which is much more efficient than doing each 
one individually. The result is better performance than can typically be achieved with 
direct DOM manipulation (there’s always exceptions, but this tends to be generally 
true).
Putting virtual DOM aside, since it’s in a sense just an internal React implementation 
detail, let’s talk about each of the other four in turn, and in the process, let’s build 
ourselves an elementary React app to see it all in action!
Chapter 3   Client-Side adventureS: reaCt

---

48