【React】CreateComponent with Babel,ES6

https://jsbin.com/goweminevo/7/edit?html,js,output
[js]
var HelloWorldComponent = React.createClass({
render() {
return (
<h1>Hello {this.props.name}</h1>
);
}
});
React.render(
<HelloWorldComponent name="kenjimorita" />,document.getElementById("fafa")
);
[/js]


https://jsbin.com/goweminevo/9/edit?html,js,output

[js]
class HelloWorldComponent extends React.Component {
render() {
return (
<h1>Hello {this.props.name}</h1>
);
}
};
React.render(
<HelloWorldComponent name="kenjimorita" />,document.getElementById("fafa")
);
[/js]

https://jsbin.com/goweminevo/13/edit?html,css,js,output
[js]
var Tags = React.createClass({
getInitialState: function(){
return {
selected:''
}
},
setFilter: function(filter) {
this.setState({selected : filter})
this.props.onChangeFilter(filter);
},
isActive:function(value){
return 'btn '+((value===this.state.selected) ?'active':'default');
},
render: function() {
return <div className="tags">
<button className={this.isActive('')} onClick={this.setFilter.bind(this, '')}>All</button>
<button className={this.isActive('front')} onClick={this.setFilter.bind(this, 'front')}>front</button>
<button className={this.isActive('backend')} onClick={this.setFilter.bind(this, 'backend')}>backend</button>
<button className={this.isActive('infrastructure')} onClick={this.setFilter.bind(this, 'infrastructure')}>infrastructure</button>
<button className={this.isActive('database')} onClick={this.setFilter.bind(this, 'database')}>database</button>
</div>
}
});

var Kid = React.createClass({
render: function() {
return <ul>
<li>{this.props.name}</li>
</ul>
}
});

var List = React.createClass({
getInitialState: function() {
return {
filter: ''
};
},
changeFilter: function(filter) {
this.setState({
filter: filter
});
},
render: function() {
var list = this.props.Data;

if (this.state.filter !== '') {
list = list.filter((i)=> i.tags.indexOf(this.state.filter) !== -1);
console.log(list);
}

list = list.map(function(Props){
return <Kid {...Props} />
});

return <div>
<h2>moriken ToDo filter</h2>
<Tags onChangeFilter={this.changeFilter}/>
{list}
</div>
}
});

var options = {
Data: [{
name: 'Learn Ract',
tags: ['front', 'js']
},{
name: 'Learn SQL',
tags: ['backend', 'database']
},{
name: 'Learn Angular2',
tags: ['front','js']
},{
name: 'Learn AWS',
tags: ['infrastructure', 'backend']
},{
name: 'Learn SpringFrameWork',
tags: ['backend', 'Java', 'database']
},
{
name: 'Learn NodeJS',
tags: ['backend', 'database']
},
{
name: 'Learn TypeScript',
tags: ['front']
},
{
name: 'Learn Java8',
tags: ['backend','database']
},
{
name: 'Learn ES6',
tags: ['front']
}
]
};

var element = React.createElement(List, options);
React.render(element, document.body);
[/js]