React: Up & Running

Chapter 1. Hello World

Let’s get started on the journey to mastering application development using React. In this chapter, you will learn how to set up React and write your first “Hello World” web app.

Setup

First things first: you need to get a copy of the React library. Luckily, this process is as simple as it can be.

Go to http://reactjs.com (which should redirect you to the official GitHub page), then click the “Download” button, then “Download Starter Kit,” and you’ll get a copy of a ZIP file. Unzip and copy the directory contained in the download to a location where you’ll be able to find it.

For example:

mkdir ~/reactbook
mv ~/Downloads/react-0.14.7/ ~/reactbook/react

Now your working directory (reactbook) should look like Figure 1-1.

Figure 1-1. Your React directory listing

The only file you need to get started is ~/reactbook/react/build/react.js. You’ll learn about the others as you go along.

Note that React doesn’t impose any directory structure; you’re free to move to a different directory or rename react.js however you see fit.

Hello React World

Let’s start with a simple page in your working directory (~/reactbook/01.01.hello.html):

<!DOCTYPE html>
<html>
  <head>
    <title>Hello React</title>
    <meta charset="utf-8">
  </head>
  <body>
    <div id="app">
      <!-- my app renders here -->
    </div>
    <script src="react/build/react.js"></script>
    <script src="react/build/react-dom.js"></script> ...