react.dev

3.4 KiB

Raw Blame History

id	title	next	redirect_from
getting-started	Getting Started	tutorial.html	docs/index.html

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 {{site.react_version}}

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="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">
      React.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.

React.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

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

babel src --watch --out-dir build

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

React.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>
    <!-- No need for Babel! -->
  </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.

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

Good luck, and welcome!

3.4 KiB Raw Blame History