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

At the time of writing 0.13.3 is the latest stable version.

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">)

NOTE

You can always mix regular HTML content as well as other JavaScript libraries with a React app. You can also have several React apps on the same page. All you need is place in the DOM where you tell React: “do you magic right here”.

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