Skip to content

React with ES6

haleyhuiliu edited this page Mar 22, 2017 · 3 revisions
// Define a React component
class Greeting extends React.Component {
  // Setting the Initial State
  constructor(props) {
    super(props);
    this.state = {
      count: props.initialCount,
      message: 'Hello!'
    };
    // ES6 don't automatically bind 'this' to the instance. You'll have to explicitly use .bind(this) in the constructor.
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    alert(this.state.message);
  }
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
      <button onClick={this.handleClick}>Say hello</button>
    );
  }
}
// Declaring Prop Types and Default Props
Greeting.propTypes = {
  name: React.PropTypes.string
};
Greeting.defaultProps = {
  name: 'Mary'
};
Clone this wiki locally