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 both the <button> and style objects inside a component, and reuse that component. Hence, the Button component. It expects to receive two properties from a parent component:

• The label property is a label for a button

• The handleClick property is a callback function that is called when a user clicks on this button

Now, it's time to create our CollectionExportForm component.