wrapping up lesson 4

step1-04/final/src/App.tsx

@@ -1,14 +1,11 @@
 import React from 'react';
 import { Counter } from './components/Counter';
 
-export class App extends React.Component<any, any> {
-  render() {
-    return (
-      <div className="App">
-        <h2>My App</h2>
-        <Counter text="Chickens" />
-        <Counter text="Ducks" />
-      </div>
-    );
-  }
-}
+export const App = props => {
+  return (
+    <div>
+      <Counter text="chickens" />
+      <Counter text="ducks" />
+    </div>
+  );
+};

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

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

step1-04/final/src/index.tsx

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