react.dev

3.0 KiB

Raw Blame History

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

JSFiddle

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

Create React App

Create React App is a new officially supported way to create single-page React applications. It offers a modern build setup with no configuration. It requires Node 4 or higher.

Note that it has some limitations and is only useful for single-page applications. If you need more flexibility, or if you want to integrate React into an existing project, consider other options below.

Starter Pack

If you're just getting started, you can download the starter kit. The starter kit includes prebuilt copies of React and React DOM for the browser, as well as a collection of usage examples to help you 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="build/react-dom.js"></script>
    <script src="https://unpkg.com/babel-core@5.8.38/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. Open the html from a browser and you should already be able to see the greeting!

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.

Using React with npm or Bower

You can also use React with package managers like npm or Bower. You can learn more in our Package Managers section.

Next Steps

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

Good luck, and welcome!

3.0 KiB Raw Blame History