Document Object Model

The Document Object Model (DOM)

So now that we’ve seen a simple example of how to use React, let’s dig a little more into how it works, as well as learn a few architectural concepts. This information isn’t critical, but it may help us visualize what is happening in our code a little better.

While not an exact comparison, React is mostly the view layer in MVC (Model-view-controller) architecture terms. It is essentially a function, or collection of functions, that takes the Model as input, and outputs HTML in a tree structure.

As we learned in the previous chapter, React gives us the ability to modify the Document Object Model (DOM) of a web page dynamically. This means that it allows us to programmatically add and remove HTML elements to and from the DOM based on changes in state as the user interacts with the application.