--- id: getting-started title: Getting Started layout: docs next: tutorial.html --- ## JSFiddle The easiest way to start hacking on React is using the following JSFiddle Hello World examples: * **[React JSFiddle](http://jsfiddle.net/vjeux/kb3gN/)** * [React JSFiddle without JSX](http://jsfiddle.net/vjeux/VkebS/) ## Starter Kit Download the starter kit to get started.
Download Starter Kit {{site.react_version}}
In the root directory of the starter kit, create a `helloworld.html` with the following contents. ```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 ` ``` ### 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{3} /** @jsx React.DOM */ React.renderComponent( React.DOM.h1(null, 'Hello, world!'), document.getElementById('example') ); ``` > Note: > > The comment parser is very strict right now; in order for it to pick up the `@jsx` modifier, two conditions are required. The `@jsx` comment block must be the first comment on the file. The comment must start with `/**` (`/*` and `//` will not work). If the parser can't find the `@jsx` comment, it will output the file without transforming it. Update your HTML file as below: ```html{6,10} Hello React!
``` ## 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. Good luck, and welcome!