Before we dive into tooling discussions, let's make sure that we're on the same page about what React is, and what actually comes with the package when you install it. There are two core React packages required for running React web applications. We'll take a look at these now to provide you with some context for thinking about React tooling.
What's included with React
Components that compare render trees
The first part of the React core is the package called react. This package is what we interface with directly when writing React components. It's a small API—the only time we really use it is when we're creating components with state and we need to extend the Component class.
There's a lot going on under the hood with the react package. This is where the render tree resides and is responsible for efficiently rendering UI elements. Another name for the render tree is the virtual DOM. The idea is that you only have to write JSX markup that describe the UI elements that you want to render while the render tree takes care of everything else:
What you see in this diagram are the components that your code directly interfaces with, and the render tree that takes care of handling presentational changes that result from components that change state. The render tree and everything that it does for you is the key value proposition of React.
The DOM render target
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.
