Getting Started Edit on GitHub

JSFiddle #

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

Using React from npm #

We recommend using React with a CommonJS module system like browserify or webpack. Use the react and react-dom npm packages.

// main.js
var React = require('react');
var ReactDOM = require('react-dom');

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

To install React DOM and build your bundle with browserify:

$ npm install --save react react-dom babelify babel-preset-react
$ browserify -t [ babelify --presets [ react ] ] main.js -o bundle.js

To install React DOM and build your bundle with webpack:

$ npm install --save react react-dom babel-preset-react
$ webpack

Note:

If you are using ES2015, you will want to also use the babel-preset-es2015 package.

Note: by default, React will be in development mode, which is slower, and not advised for production. To use React in production mode, set the environment variable NODE_ENV to production (using envify or webpack's DefinePlugin). For example:

new webpack.DefinePlugin({
  "process.env": {
    NODE_ENV: JSON.stringify("production")
  }
});

Quick Start Without npm #

If you're not ready to use npm yet, you can download the starter kit which includes prebuilt copies of React and React DOM.

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="build/react.js"></script>
    <script src="build/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      ReactDOM.render(
        <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/babel"> and include Babel 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.

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

Then reference it from helloworld.html:

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

Note that some browsers (Chrome, e.g.) will fail to load the file unless it's served via HTTP.

Offline Transform #

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

npm install --global babel-cli
npm install babel-preset-react

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

babel --presets react src --watch --out-dir build

Note:

If you are using ES2015, you will want to also use the babel-preset-es2015 package.

The file build/helloworld.js is autogenerated whenever you make a change. Read the Babel CLI documentation for more advanced usage.

ReactDOM.render(
  React.createElement('h1', null, 'Hello, world!'),
  document.getElementById('example')
);

Update your HTML file as below:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="build/react.js"></script>
    <script src="build/react-dom.js"></script>
    <!-- No need for Babel! -->
  </head>
  <body>
    <div id="example"></div>
    <script src="build/helloworld.js"></script>
  </body>
</html>

Next Steps #

Check out the tutorial and the other examples in the starter kit's examples directory to learn more.

We also have a wiki where the community contributes with workflows, UI-components, routing, data management etc.

Good luck, and welcome!