---
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.
## 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.
### 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!
