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](http://jsfiddle.net/reactjs/69z2wepo/)**
 * [React JSFiddle without JSX](http://jsfiddle.net/reactjs/5vjqabv3/)

## Starter Kit

Download the starter kit to get started.

<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>
    <script src="build/react.js"></script>
    <script src="build/JSXTransformer.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/jsx">
      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](/react/docs/jsx-in-depth.html) 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`.

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

Then reference it from `helloworld.html`:

```html{10}
<script type="text/jsx" src="src/helloworld.js"></script>
```

### Offline Transform

First install the command-line tools (requires [npm](http://npmjs.org/)):

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

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


Update your HTML file as below:

```html{6,10}
<!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](http://browserify.org/), [webpack](http://webpack.github.io/), or another CommonJS-compatible module system, just use the [`react` npm package](https://www.npmjs.org/package/react). In addition, the `jsx` build tool can be integrated into most packaging systems (not just CommonJS) quite easily.

## 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 11 years ago			`---`
put it all together 11 years ago			`id: getting-started`
cleanup some files, move tutorial 11 years ago			`title: Getting Started`
			`next: tutorial.html`
Use jekyll-redirect-from instead of our other redirect method 10 years ago			`redirect_from: "docs/index.html"`
cleanup some files, move tutorial 11 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 11 years ago
Own our fiddles so we can update them more easily 10 years ago			`* [React JSFiddle](http://jsfiddle.net/reactjs/69z2wepo/)`
			`* [React JSFiddle without JSX](http://jsfiddle.net/reactjs/5vjqabv3/)`
cleanup some files, move tutorial 11 years ago
			`## Starter Kit`

			`Download the starter kit to get started.`

			`<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>`
Don't use the min build in getting started guide 11 years ago			`<script src="build/react.js"></script>`
cleanup some files, move tutorial 11 years ago			`<script src="build/JSXTransformer.js"></script>`
			`</head>`
			`<body>`
			`<div id="example"></div>`
			`<script type="text/jsx">`
Update docs to align with 0.12 better - Rename React.renderComponent -> React.render - Remove most references to transferPropsTo 10 years ago			`React.render(`
cleanup some files, move tutorial 11 years ago			`<h1>Hello, world!</h1>,`
			`document.getElementById('example')`
			`);`
			`</script>`
			`</body>`
			`</html>`
			```

docs make all link start with /react/docs 11 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/jsx">` and include `JSXTransformer.js` to actually perform the transformation in the browser.
cleanup some files, move tutorial 11 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 11 years ago
			```javascript
Update docs to align with 0.12 better - Rename React.renderComponent -> React.render - Remove most references to transferPropsTo 10 years ago			`React.render(`
cleanup some files, move tutorial 11 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 11 years ago			Then reference it from `helloworld.html`:

			```html{10}
			`<script type="text/jsx" src="src/helloworld.js"></script>`
			```

			`### Offline Transform`

			`First install the command-line tools (requires [npm](http://npmjs.org/)):`

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

[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}
Update docs to align with 0.12 better - Rename React.renderComponent -> React.render - Remove most references to transferPropsTo 10 years ago			`React.render(`
Update React.DOM -> React.createElement through docs 10 years ago			`React.createElement('h1', null, 'Hello, world!'),`
typo fix 11 years ago			`document.getElementById('example')`
cleanup some files, move tutorial 11 years ago			`);`
			```


			`Update your HTML file as below:`

			```html{6,10}
			`<!DOCTYPE html>`
			`<html>`
			`<head>`
			`<title>Hello React!</title>`
Remove two more react.min.js references 11 years ago			`<script src="build/react.js"></script>`
cleanup some files, move tutorial 11 years ago			`<!-- No need for JSXTransformer! -->`
			`</head>`
			`<body>`
			`<div id="example"></div>`
			`<script src="build/helloworld.js"></script>`
			`</body>`
			`</html>`
			```

			`## Want CommonJS?`

Tweak getting started wording 11 years ago			If you want to use React with [browserify](http://browserify.org/), [webpack](http://webpack.github.io/), or another CommonJS-compatible module system, just use the [`react` npm package](https://www.npmjs.org/package/react). In addition, the `jsx` build tool can be integrated into most packaging systems (not just CommonJS) quite easily.
cleanup some files, move tutorial 11 years ago
			`## Next Steps`

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			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!`