Hello World
===
```
ReactDOM.render(
  React.createElement('h1', {}, 'Hello World'),
  document.getElementById('container')
);
```

Intro
===

```
const currentTime = (new Date).toLocaleTimeString();

ReactDOM.render(
	React.createElement('h1', {}, currentTime),
  document.getElementById('container')
);
```

Make ClockFace component
===
```
class ClockFace extends React.Component {
  const currentTime = (new Date).toLocaleTimeString();

  render() {
    return React.createElement('h1', {}, currentTime)
  }
}

const currentTime = (new Date).toLocaleTimeString();

ReactDOM.render(
	React.createElement(ClockFace, { time: currentTime }),
  document.getElementById('container')
);
```

Make ticking clock (higher order component)
===
```
class ClockFace extends React.Component {
  render() {
    return React.createElement('h1', {}, this.props.time);
  }
}

function Timekeeper(WrappedComponent) {
  return class Timekeeper extends React.Component {
    render() {
      return React.createElement(WrappedComponent, { time: 'Starting...' });
    }
  }
}

function TimekeeperHoc(WrappedComponent) {
	return class Timekeeper extends React.Component {
  	constructor() {
    	super();

      this.state = { time: 'Starting...' };
      setInterval(this.updateTime.bind(this), 1000);
    }

    updateTime() {
    	this.setState({ time: (new Date).toLocaleTimeString() })
    }

  	render() {
    	const props = Object.assign({}, { time: this.state.time }, this.props);

    	return React.createElement(WrappedComponent, props)
    }
  }
}

const Clock = TimekeeperHoc(ClockFace);

ReactDOM.render(
	React.createElement(Clock),
  document.getElementById('container')
);
```
JSX
===
```
ReactDOM.render(
	<Clock />,
  document.getElementById('container')
);

class ClockFace extends React.Component {
  render() {
    <h1>{this.props.time}</h1>
  }
}

function TimekeeperHoc(WrappedComponent) {
	return class Timekeeper extends React.Component {
  	constructor() {
    	super();

      this.state = { time: 'Starting...' };
      setInterval(this.updateTime.bind(this), 1000);
    }

    updateTime() {
    	this.setState({ time: (new Date).toLocaleTimeString() })
    }

  	render() {
    	return <WrappedComponent {...this.props} time={this.state.time} />
    }
  }
}
```
Stateless Function
===
```
function ClockFace(props) {
	return (
  	<h1 style={{backgroundColor: props.colour}}>{props.time}</h1>
  )
}
```
ES6 Stateless
===
```
const ClockFace = ({time, colour}) => <h1 style={{backgroundColor}}>{time}</h1>
```