Learning React

Chapter 4. Pure React

In order to understand how React runs in the browser, we will be working purely with React in this chapter. We will not introduce JSX, or JavaScript as XML, until the next chapter. You may have worked with React in the past without ever looking at the pure React code that is generated when we transpile JSX into React. You can successfully use React without looking at pure React. However, if you take the time to understand what is going on behind the scenes, you will be more efficient, especially when it comes time to debug. That is our goal in this chapter: to look under the hood and understand how React works.

Page Setup

In order to work with React in the browser, we need to include two libraries: React and ReactDOM. React is the library for creating views. ReactDOM is the library used to actually render the UI in the browser.

ReactDOM

React and ReactDOM were split into two packages for version 0.14. The release notes state: “The beauty and the essence of React has nothing to do with browsers or the DOM... This [splitting into two packages] paves the way to writing components that can be shared between the web version of React and React Native.”¹ Instead of assuming that React will render only in the browser, future releases will aim to support rendering for a variety of platforms.

We also need an HTML element that ReactDOM will use to render the UI. You can see how the scripts and HTML elements are added in Example 4-1. Both libraries are available as ...