---
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(
Hello, world!
,
document.getElementById('example')
);
```
To install React DOM and build your bundle after installing browserify:
```sh
$ npm install --save react react-dom babelify babel-preset-react
$ browserify -t [ babelify --presets [ react ] ] main.js -o bundle.js
```
> 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.
In the root directory of the starter kit, create a `helloworld.html` with the following contents.
```html
Hello React!
```
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 `
```
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}
Hello React!
```
## 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!