The second part of the React core is the Document Object Model (DOM) itself. In fact, the name virtual DOM is rooted in the idea that React is creating DOM representations in JavaScript before it actually talks to the DOM APIs. However, the render tree is a better name because React is creating an AST (short for Abstract Syntax Tree) based on the React components and their states. This is why the same React library is able to work with projects like React Native.

The react-dom package is used to actually translate the render tree into DOM elements in the browser by directly communicating with the browser DOM APIs. Here's what the previous diagram looks like with react-dom included:

This is a nice architecture—it means that you can substitute react-dom for another render target with little effort. As you can see, the core layer of React is minimal. No wonder it's so popular—we can create user interfaces with declarative code that are easy to maintain and are efficient with little effort on our part. With this in mind, let's shift our focus over to the tooling that makes all of this possible.