Added react example

step1-04/src/App.tsx

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

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;
+}

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>
+  );
+};

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>
+    );
+  }
+}