noimage

【React】CreateComponent with Babel,ES6

http://jsbin.com/goweminevo/7/edit?html,js,output

var HelloWorldComponent = React.createClass({
  render() {
    return (
    <h1>Hello {this.props.name}</h1>
    );
  }
});
React.render(
  <HelloWorldComponent name="kenjimorita" />,document.getElementById("fafa")
);


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

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

http://jsbin.com/goweminevo/13/edit?html,css,js,output

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);
(Visited 1 times, 1 visits today)

コメントを残す

メールアドレスが公開されることはありません。