React 16 Essentials - Second Edition

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 ...