Tutorial – Say hello to React.js

we will learn how to setup React and write your first “Hello world” application.

Setup

First things first: you need to get a copy of the React library. Luckily this is as simple as it can be. Go tohttp://reactjs.com (which should redirect you to the official GitHub home at http://facebook.github.io/react/), 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.13.3/ ~/reactbook/react

The only file you need to get started for the time being is ~/reactbook/react/build/react.js. You’ll learn about all 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 renamereact.js however you see fit.

Hello React world

Let’s start with a simple page in your working directory (~/reactbook/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>
      // my app's code
    </script>
  </body>
</html>

There are only two notable things happening in this file:

  • you include the React library (<script src="react/build/react.js">)
  • you define where your application should be placed on the page (<div id="app">)

Now let’s add the code that says hello. Update hello.html and replace // my app's code with:

React.render(
  React.DOM.h1(null, "Hello world!"),
  document.getElementById("app")
);

Load hello.html in your browser and you’ll see your new app in action

 

Figure 1-2. Hello World in action

Congratulations, you’ve just built your first React application!

About the author

Deven Rathore

I'm Deven Rathore, a multidisciplinary & self-taught designer with 3 years of experience. I'm passionate about technology, music, coffee, traveling and everything visually stimulating. Constantly learning and experiencing new things.

Pin It on Pinterest

Shares