React Hands On (Container)

by hokuma

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-0.14.6.js"></script>
<script src="https://fb.me/react-dom-0.14.6.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

Babel + JSX

class Hello extends React.Component {
  render() {
    return <div>Hello {this.props.name} {this.props.count}<button onClick={this.props.onClick}>Plus</button></div>;
  }
}

class HelloContainer extends React.Component {
  constructor() {
    super();
    this.state = {name: 'World', count: 0};
  }
  
  onClick() {
    this.setState({count: this.state.count + 1});
  }
  
  render() {
    return <Hello name={this.state.name} count={this.state.count} onClick={this.onClick.bind(this)}/>;
  }
}


ReactDOM.render(
  <HelloContainer/>,
  document.getElementById('container')
);