React

Quick Start

Community Resources

Guides

Reference

Flux

Tips

Getting Started Edit on GitHub

JSFiddle #

The easiest way to start hacking on React is using the following JSFiddle Hello World examples:

Starter Kit #

Download the starter kit to get started.

Download Starter Kit 0.11.2

In the root directory of the starter kit, create a helloworld.html with the following contents.

<!DOCTYPE html>
<html>
  <head>
    <script src="build/react.js"></script>
    <script src="build/JSXTransformer.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/jsx">
      /** @jsx React.DOM */
      React.renderComponent(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

The XML syntax inside of JavaScript is called JSX; check out the JSX syntax to learn more about it. In order to translate it to vanilla JavaScript we use <script type="text/jsx"> and include JSXTransformer.js to actually perform the transformation in the browser.

Separate File #

Your React JSX code can live in a separate file. Create the following src/helloworld.js.

/** @jsx React.DOM */
React.renderComponent(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

Note:

/** @jsx React.DOM */ is required. The comment parser is very strict right now; in order for it to pick up the @jsx modifier, two conditions are required. The @jsx comment block must be the first comment on the file. The comment must start with /** (/* and // will not work). If the parser can't find the @jsx comment, it will output the file without transforming it.

Then reference it from helloworld.html:

<script type="text/jsx" src="src/helloworld.js"></script>

Offline Transform #

First install the command-line tools (requires npm):

npm install -g react-tools

Then, translate your src/helloworld.js file to plain JavaScript:

jsx --watch src/ build/

The file build/helloworld.js is autogenerated whenever you make a change.

/** @jsx React.DOM */
React.renderComponent(
  React.DOM.h1(null, 'Hello, world!'),
  document.getElementById('example')
);

Update your HTML file as below:

<!DOCTYPE html>
<html>
  <head>
    <title>Hello React!</title>
    <script src="build/react.js"></script>
    <!-- No need for JSXTransformer! -->
  </head>
  <body>
    <div id="example"></div>
    <script src="build/helloworld.js"></script>
  </body>
</html>

Want CommonJS? #

If you want to use React with browserify, webpack, or another CommonJS-compatible module system, just use the react npm package. In addition, the jsx build tool can be integrated into most packaging systems (not just CommonJS) quite easily.

Next Steps #

Check out the tutorial and the other examples in the starter kit's examples directory to learn more. Good luck, and welcome!

Next →