checking in docs for github.io page

docs/step1-04/src/App.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Counter } from './components/Counter';
+
+export class App extends React.Component {
+  render() {
+    return (
+      <div>
+        <h2>My App</h2>
+        <Counter start={2} />
+      </div>
+    );
+  }
+}

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

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

docs/step1-04/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>
+  );
+};

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

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

docs/step1-04/src/index.tsx

@@ -0,0 +1,4 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import { App } from "./App";
+ReactDOM.render(<App />, document.getElementById("app"));