breaking up into stages

step1-04/final/src/components/Button.css

@@ -0,0 +1,15 @@
+.Button {
+  display: block;
+  background: #0078d4;
+  color: white;
+  padding: 5px 10px;
+  outline: none;
+  border: none;
+}
+.Button:hover {
+  background: #005a9e;
+}
+
+.Button:active {
+  background: #004578;
+}

step1-04/final/src/components/Button.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import './Button.css';
+
+export const Button = props => {
+  return (
+    <button className="Button" onClick={props.onClick}>
+      {props.children}
+    </button>
+  );
+};

step1-04/final/src/components/Counter.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Button } from './Button';
+
+export class Counter extends React.Component<{ text: string }, { counter: number }> {
+  constructor(props) {
+    super(props);
+    this.state = {
+      counter: 0
+    };
+  }
+  render() {
+    const { counter } = this.state;
+    const { text } = this.props;
+    return (
+      <div>
+        {text}: {counter}
+        <Button
+          onClick={() => {
+            this.setState({ counter: counter + 1 });
+          }}
+        >
+          Click
+        </Button>
+      </div>
+    );
+  }
+}