react.dev/docs/getting-started.md

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

## JSFiddle

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

 * **[React JSFiddle](https://jsfiddle.net/reactjs/69z2wepo/)**
 * [React JSFiddle without JSX](https://jsfiddle.net/reactjs/5vjqabv3/)

## Using React from npm

We recommend using React with a CommonJS module system like [browserify](http://browserify.org/) or [webpack](https://webpack.github.io/). Use the [`react`](https://www.npmjs.com/package/react) and [`react-dom`](https://www.npmjs.com/package/react-dom) npm packages.

```js
// 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:

```sh
$ 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:

```sh
$ 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:

```js
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.

<div class="buttons-unit downloads">
  <a href="/react/downloads/react-{{site.react_version}}.zip" class="button">
    Download Starter Kit {{site.react_version}}
  </a>
</div>

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

```html
<!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](/react/docs/jsx-in-depth.html) 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`.

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

Then reference it from `helloworld.html`:

```html{10}
<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](http://babeljs.io/) command-line tools (requires [npm](https://www.npmjs.com/)):

```
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](http://babeljs.io/docs/usage/cli/) for more advanced usage.

```javascript{2}
ReactDOM.render(
  React.createElement('h1', null, 'Hello, world!'),
  document.getElementById('example')
);
```


Update your HTML file as below:

```html{8,12}
<!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](/react/docs/tutorial.html) 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.](https://github.com/facebook/react/wiki/Complementary-Tools)

Good luck, and welcome!
cleanup some files, move tutorial 12 years ago			`---`
put it all together 12 years ago			`id: getting-started`
cleanup some files, move tutorial 12 years ago			`title: Getting Started`
			`next: tutorial.html`
Use jekyll-redirect-from instead of our other redirect method 11 years ago			`redirect_from: "docs/index.html"`
cleanup some files, move tutorial 12 years ago			`---`

			`## JSFiddle`

Tweak getting started wording 11 years ago			`The easiest way to start hacking on React is using the following JSFiddle Hello World examples:`
cleanup some files, move tutorial 12 years ago
SSL/TLSize all the things! (convert http:// to https:// where appropriate) Update links to use https:// where it is supported. There's probably a lot more that could be fixed, but these are the core ones I found (especially the download links in order to prevent MITM attacks). Note that there are some fb.me links that will redirect to http:// even while accessed over https://, but this seemed like the best way to fix those for now. NOTE: Only non-third-party files were modified. There are references to http:// URLs in vendored/third-party files, but seems appropriate to fix upstream for those rather than editing the files. Also, copy one image locally to the blog, as it was hotlinking to a site that did not support https://. Last, use youtube-nocookie.com instead of youtube.com for video embeds, as the former doesn't try to set a cookie on load (privacy enhancement). 10 years ago			`* [React JSFiddle](https://jsfiddle.net/reactjs/69z2wepo/)`
			`* [React JSFiddle without JSX](https://jsfiddle.net/reactjs/5vjqabv3/)`
cleanup some files, move tutorial 12 years ago
Update some more docs for package split 9 years ago			`## Using React from npm`
cleanup some files, move tutorial 12 years ago
Update some more docs for package split 9 years ago			We recommend using React with a CommonJS module system like [browserify](http://browserify.org/) or [webpack](https://webpack.github.io/). Use the [`react`](https://www.npmjs.com/package/react) and [`react-dom`](https://www.npmjs.com/package/react-dom) npm packages.

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

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

Clarify dependency installation Split browserify and webpack to separate sections. Remove `babelify` from the webpack section since it's only for browserify 9 years ago			`To install React DOM and build your bundle with browserify:`
Update some more docs for package split 9 years ago
			```sh
[docs] Update Getting Started for babel 6 9 years ago			`$ npm install --save react react-dom babelify babel-preset-react`
			`$ browserify -t [ babelify --presets [ react ] ] main.js -o bundle.js`
Update some more docs for package split 9 years ago			```

Improve documentation for using React with Webpack Fixes #5679 9 years ago			`To install React DOM and build your bundle with webpack:`
Clarify dependency installation Split browserify and webpack to separate sections. Remove `babelify` from the webpack section since it's only for browserify 9 years ago
			```sh
			`$ npm install --save react react-dom babel-preset-react`
			`$ webpack`
			```

[docs] Update Getting Started for babel 6 9 years ago			`> Note:`
			`>`
			> If you are using ES2015, you will want to also use the `babel-preset-es2015` package.

Improve documentation for using React with Webpack Fixes #5679 9 years ago			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:

			```js
			`new webpack.DefinePlugin({`
			`"process.env": {`
			`NODE_ENV: JSON.stringify("production")`
			`}`
			`});`
			```
[docs] Update Getting Started for babel 6 9 years ago
Update some more docs for package split 9 years ago			`## 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.`
cleanup some files, move tutorial 12 years ago
			`<div class="buttons-unit downloads">`
			`<a href="/react/downloads/react-{{site.react_version}}.zip" class="button">`
			`Download Starter Kit {{site.react_version}}`
			`</a>`
			`</div>`

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

			```html
			`<!DOCTYPE html>`
			`<html>`
			`<head>`
Add meta tag in the header of HTML 10 years ago			`<meta charset="UTF-8" />`
Add site title to first code snippet of getting started 10 years ago			`<title>Hello React!</title>`
Don't use the min build in getting started guide 11 years ago			`<script src="build/react.js"></script>`
Update some more docs for package split 9 years ago			`<script src="build/react-dom.js"></script>`
[docs] Update script mimetypes: text/jsx -> text/babel 9 years ago			`<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>`
cleanup some files, move tutorial 12 years ago			`</head>`
			`<body>`
			`<div id="example"></div>`
[docs] Update script mimetypes: text/jsx -> text/babel 9 years ago			`<script type="text/babel">`
React -> ReactDOM for render() and findDOMNode() 9 years ago			`ReactDOM.render(`
cleanup some files, move tutorial 12 years ago			`<h1>Hello, world!</h1>,`
			`document.getElementById('example')`
			`);`
			`</script>`
			`</body>`
			`</html>`
			```

Clarify a step in the quick start I propose to add a sentence to indicate the page is ready, and the next step (Separate File) is optional. IMMO, the quick-start guide should be really short so that readers can see the result asap. Furthermore, the "Separate File" might not work for readers using Chrome anyway. 9 years ago			The XML syntax inside of JavaScript is called JSX; check out the [JSX syntax](/react/docs/jsx-in-depth.html) 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!
cleanup some files, move tutorial 12 years ago
			`### Separate File`

Tweak getting started wording 11 years ago			Your React JSX code can live in a separate file. Create the following `src/helloworld.js`.
cleanup some files, move tutorial 12 years ago
			```javascript
React -> ReactDOM for render() and findDOMNode() 9 years ago			`ReactDOM.render(`
cleanup some files, move tutorial 12 years ago			`<h1>Hello, world!</h1>,`
			`document.getElementById('example')`
			`);`
			```
Update getting-started.md merge the warn and explain for the @jsx 10 years ago
cleanup some files, move tutorial 12 years ago			Then reference it from `helloworld.html`:

			```html{10}
[docs] Update script mimetypes: text/jsx -> text/babel 9 years ago			`<script type="text/babel" src="src/helloworld.js"></script>`
cleanup some files, move tutorial 12 years ago			```

Add warning for protocol sandboxing near pain point in Getting Started 10 years ago			`Note that some browsers (Chrome, e.g.) will fail to load the file unless it's served via HTTP.`

cleanup some files, move tutorial 12 years ago			`### Offline Transform`

[docs] Remove mentions of react-tools/jsx command 9 years ago			`First install the [Babel](http://babeljs.io/) command-line tools (requires [npm](https://www.npmjs.com/)):`
cleanup some files, move tutorial 12 years ago
			```
[docs] Update Getting Started for babel 6 9 years ago			`npm install --global babel-cli`
			`npm install babel-preset-react`
cleanup some files, move tutorial 12 years ago			```

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

			```
[docs] Update Getting Started for babel 6 9 years ago			`babel --presets react src --watch --out-dir build`
cleanup some files, move tutorial 12 years ago			```

[docs] Update Getting Started for babel 6 9 years ago			`> Note:`
			`>`
			> If you are using ES2015, you will want to also use the `babel-preset-es2015` package.

[docs] Remove mentions of react-tools/jsx command 9 years ago			The file `build/helloworld.js` is autogenerated whenever you make a change. Read the [Babel CLI documentation](http://babeljs.io/docs/usage/cli/) for more advanced usage.
cleanup some files, move tutorial 12 years ago
[Docs] Remove most of @jsx I kept some places intact (search for @jsx) because they require other bigger changes: - ref-01-top-level-api.md - grunt/tasks/npm.js - old blog posts (don't change those) - examples/ folder, as they have their own package.json that rely on old dependencies (node-jsx, reactify) that haven't upgraded to 0.12 10 years ago			```javascript{2}
React -> ReactDOM for render() and findDOMNode() 9 years ago			`ReactDOM.render(`
Update React.DOM -> React.createElement through docs 10 years ago			`React.createElement('h1', null, 'Hello, world!'),`
typo fix 12 years ago			`document.getElementById('example')`
cleanup some files, move tutorial 12 years ago			`);`
			```


			`Update your HTML file as below:`

Update some more docs for package split 9 years ago			```html{8,12}
cleanup some files, move tutorial 12 years ago			`<!DOCTYPE html>`
			`<html>`
			`<head>`
Add meta tag in the header of HTML 10 years ago			`<meta charset="UTF-8" />`
cleanup some files, move tutorial 12 years ago			`<title>Hello React!</title>`
Remove two more react.min.js references 11 years ago			`<script src="build/react.js"></script>`
Update some more docs for package split 9 years ago			`<script src="build/react-dom.js"></script>`
[docs] Update script mimetypes: text/jsx -> text/babel 9 years ago			`<!-- No need for Babel! -->`
cleanup some files, move tutorial 12 years ago			`</head>`
			`<body>`
			`<div id="example"></div>`
			`<script src="build/helloworld.js"></script>`
			`</body>`
			`</html>`
			```

			`## Next Steps`

Add meta tag in the header of HTML 10 years ago			Check out [the tutorial](/react/docs/tutorial.html) and the other examples in the starter kit's `examples` directory to learn more.
Adding link to wiki Based on conversation in https://github.com/facebook/react/pull/2501. A good place to guide people further in finding the complete set of tools needed to build an application. 10 years ago
			`We also have a wiki where the community contributes with [workflows, UI-components, routing, data management etc.](https://github.com/facebook/react/wiki/Complementary-Tools)`

			`Good luck, and welcome!`