Getting Started With React

    Hello React!

      ReactDOM.render(

        <h1>Hello, world!</h1>,

        document.getElementById('example')

      );

Refresh the page and you will see the `helloworld.js` being rendered by babel. 

Note: Some browsers (for example Chrome) will fail to load the file unless it's served via HTTP, so ensure you're using a local server. I recommend the [browsersync project](http://www.browsersync.io/).

### Offline Transformation

You can also use the command-line interface (CLI) to transform your JSX via using the babel command-line tools. This is easily acquired via the npm command:

$ sudo npm install --global babel

The `--global` or `-g` flag for short will install the babel package globally so that it is available everywhere. This is a very good practice with using Node for multiple projects and command-line tools.

Now that babel is installed, let's do the translation of the `helloworld.js` we just created in the step before. 

At the command prompt from the root directory where you unzipped the starter kit, run:

$ babel src --watch --out-dir build

Now the file `build/helloworld.js` will be auto-generated whenever you make a change! If you are interested, read the [Babel CLI documentation](http://babeljs.io/docs/usage/cli/) to get a more advanced knowledge.

Now that babel has generated the `build/helloworld.js`, which contains just straight-up JavaScript, update the HTML without any babel-enabled script tags.

    Hello React!

So to recap, with babel we can load JSX directly inside  a `script` tag via the `text/babel` type attribute. This is good for development purposes, but for going to production we can provide a generated JavaScript file which can be cached on the user's local machine. 

Generation of this copy is done on the command line, and as this is a repetitive task I highly recommend automating the process via using the `--watch` flag. Or you can go a step further and utilize `webpack` and `browsersync` to fully automate your development workflow. To do that in the easiest path possible, we can automate the setup of a new project with a Yeoman generator. 

## Installing With Yeoman Scaffolding

Yeoman is a very useful tool for starting projects quickly and with an optimal workflow and tool configuration. The idea is to let you spend more time on development than configuration of the project's work area, and to minimize repetitive tasks (be aware of this—RSI is the number one reason coders stop coding). So as a best practice, saving time with tools and implementing D.R.Y (Don't Repeat Yourself) in your day-to-day life will boost your health and efficiency, and let you spend more time doing actual code rather than configuration. 

There are a lot of scaffoldings out there, coming in many flavours for different scales of project. For this first example we will be using the `react-fullstack` scaffolding from the Yeoman generators; you can see a [demo](http://demo.reactstarterkit.com/) of what the end result looks like.

Note: This is a fullstack configuration, which is probably overkill for any small projects. The reason I select this scaffolding is to give you a fully set-up environment, so you can see how the starter kit fleshes out into a larger app. There's a header and footer, and you can see where a user login and register feature will go, although they are not coded yet in the example.

### Usage

To use yeoman, first install it, and if you do not have yeoman's required counterparts `gulp`, `bower` and `grunt-cli`, install them as so:

$ sudo npm install -g yo bower grunt-cli gulp

Now install the React scaffolding with:

$ sudo npm install -g generator-react-fullstack

Now create a directory for your project and `cd` to it:

$ mkdir react-project

$ cd react-project

Finally use the `yo` command with the React-fullstack scaffolding generator to create your react app inside the directory:

$ yo react-fullstack

Yeoman will now create the directories and files required; you will be able to see updates about this in the command line.

With the scaffolding now set up, let's build our project:

$ npm start

By default we start in *debug* mode, and to go live we just add the `-- release` flag, e.g. `npm run start -- release`.

You will now see the build starting and webpack initializing. Once this is done, you will see the webpack output telling you detailed information about the build and the URLs to access from.

Access your app via the URLs listed at the end of the output, with your browser by default at http://localhost:3000. To access the browser sync admin interface, go to http://localhost:3001.

Note: You may need to open the port on your server for the development port. For ubuntu / debian users with `ufw`, do the following:

$ ufw allow 3001/tcp

$ ufw allow 3000/tcp

## Converting Your Existing Site to JSX

Facebook provides an [online tool](http://facebook.github.io/react/html-jsx.html) if you need to just convert a snippet of your HTML into JSX.

For larger requirements there is a tool on `npm` for that named `htmltojsx`. Download it with:

npm install htmltojsx

Using it via the command line is as simple as:

$  htmltojsx -c MyComponent existing_code.htm 

Because `htmltojsx` is a node module, you can also use it directly in the code, for example:

var HTMLtoJSX = require('htmltojsx');

var converter = new HTMLtoJSX({

  createClass: true,

  outputClassName: 'HelloWorld'

});

var output = converter.convert('Hello world!');

## List Example

Let's start working on creating a basic to-do list so you can see how React works. Before we begin, please configure your IDE. I recommend using Atom. 

At the bash prompt, install the linters for React via apm:

apm install linter linter-eslint react

Installing linter to /Users/tom/.atom/packages ✓

Installing linter-eslint to /Users/tom/.atom/packages ✓

Installing react to /Users/tom/.atom/packages ✓

Note: the latest version of `linter-eslint` was making my MacBook Pro very slow, so I disabled it.

Once that is done, we can get going on creating a basic list within the scaffolding we made in the prior step with Yeoman, to show you a working example of the data flow.

Make sure your server is started with `npm start`, and now let's start making some changes.

First of all there are three jade template files provided in this scaffolding. We won't be using them for the example, so start by clearing out the `index.jade` file so it's just an empty file. Once you save the file, check your browser and terminal output. 

The update is displayed instantly, without any need to refresh. This is the webpack and browsersync configuration that the scaffolding has provided coming into effect. 

Next open the components directory and create a new directory:

$ cd components

$ mkdir UserList

Now, inside the `UserList` directory, create a `package.json` file with the following:

{

  "name": "UserList",

  "version": "0.0.0",

  "private": true,

  "main": "./UserList.js"

}

Also, still inside the `UserList` directory, create the `UserList.js` file and add the following:

//Import React

import React, { PropTypes, Component } from 'react';

//Create the UserList component

class UserList extends Component {

	//The main method render is called in all components for display

    render(){

      //Uncomment below to see the object inside the console

      //console.log(this.props.data);

      //Iterate the data provided here 

      var list = this.props.data.map(function(item) {

        return