1// Syntax has changed from ES5 to ES6 in the following aspects:
2// 1. require vs import
3// ES5
4var React = require('react');
5
6// ES6
7import React from 'react';
8
9// 2. export vs exports
10// ES5
11module.exports = Component;
12
13// ES6
14export default Component;
15
16// 3. component and function
17
18// ES5
19var MyComponent = React.createClass({
20
21	render() {
22		return <h3>Hello World!</h3>;
23	}
24});
25
26// ES6
27class MyComponent extends React.Component {
28
29	render() {
30		return <h3>Hello World!</h3>;
31	}
32}
33
34// 4. props
35
36// ES5
37var App = React.createClass({
38	propTypes: { name: React.PropTypes.string },
39	render: function() {
40	return <h3>Hello, {this.props.name}!</h3>;}
41});
42
43// ES6
44class App extends React.Component {
45render() {
46	return <h3>Hello, {this.props.name}!</h3>;
47	}
48}
49
50// 5. state
51// ES5
52var App = React.createClass({
53	getInitialState: function() {
54		return { name: 'world' };
55	},
56	render() {
57		return <h3>Hello, {this.state.name}!</h3>;
58	}
59});
60
61
62
63
64// ES6
65class App extends React.Component {
66	constructor() {
67	super();
68	this.state = { name: 'world' };
69	}
70	render() {
71		return <h3>Hello, {this.state.name}!</h3>;	
72	}
73}