Creating the Button component

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

import React from 'react';

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

const Button = ({ label, handleClick }) => (
  <button
    className="btn btn-default"
    style={buttonStyle}
    onClick={handleClick}
  >
    {label}
  </button>
);

export default Button;

The Button component renders a button.

Notice that we didn't declare a class, but rather defined a simple function called Button. This is the functional way of creating React components. In fact, when the purpose of your component is purely to render some user interface elements with or without any props, then it's recommended that you use this approach.

You can think of this simple React component as a "pure" function which takes an input in the form of the props object and returns JSX as output—consistently, no matter how many times you call this function.

Ideally, most of your components should be created that way—as ...