React: Building Modern Web Applications

Creating the Button component

Create the following ~/snapterest/source/components/Button.react.js file:

var React = require('react');

var buttonStyle = {
  margin: '10px 10px 10px 0'
};

var Button = React.createClass({
  render: function () {
    return (
      <button
        className="btn btn-default"
        style={buttonStyle}
        onClick={this.props.handleClick}>{this.props.label}</button>
    );
  }
});

module.exports = Button;

The Button component renders a button. You might be wondering what's the benefit of creating a dedicated component for a button if you could just use the <button> element? Think of a component as a wrapper for a <button> element and something else that comes with it. In our case, most <button> elements come with the same style, so it makes sense to encapsulate ...