<commit_before>---
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 Worlds

 * **[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.

<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.min.js"></script>
    <script src="build/JSXTransformer.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/jsx">
      /** @jsx React.DOM */
      React.renderComponent(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>
```

The XML syntax inside of JavaScript is called JSX; check out the [JSX syntax](syntax.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 file can live in a separate file. Create the following `src/helloworld.js`.<commit_msg>Fix 404 in Getting Started<commit_after>---
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 Worlds

 * **[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.

<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.min.js"></script>
    <script src="build/JSXTransformer.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/jsx">
      /** @jsx React.DOM */
      React.renderComponent(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>
```

The XML syntax inside of JavaScript is called JSX; check out the [JSX syntax](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 file can live in a separate file. Create the following `src/helloworld.js`.
{'fraction_non_alphanumeric': 0.13814222524668254, 'fraction_numerical': 0.003062266076896904, 'mean_word_length': 3.796084828711256, 'pattern_counts': {'":': 0, '<': 47, '<?xml version=': 0, '>': 47, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 8, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6410321', 'n_tokens_mistral': 959, 'n_tokens_neox': 920, 'n_words': 303}