Rewrite of Day 1 to use modern React (#294)

* update to hooks

* more class to function

* cleanup

* finish ts final

* update html lesson

* add lessons page

* clean up

* move getters into context

* adding type

* fix bug

* step 5 cleanup

* init final pass

* text tweak

* fix ternaries

* readme cleanup

* fixed root readme

step1-05/demo/README.md

@@ -11,31 +11,29 @@ You can find the HTML for our application in `step1-05/TodoApp.html`.
 
 ## TodoHeader
 
-We'll store all of our components inside a `components` folder under `src`. Let's create that now. We'll then start writing the `TodoHeader` in `src/components/TodoHeader.tsx`. The `tsx` file extension tells our editor that this file includes React code written in TypeScript.
+We'll store all of our components inside a `components` folder under `step1-05/demo/src`. Let's create that now. We'll then start writing the `TodoHeader` in `src/components/TodoHeader.tsx`. The `tsx` file extension tells our editor that this file includes React code written in TypeScript.
 
 > We'll talk about TypeScript soon, but for now, know that all valid JavaScript is valid TypeScript.
 
 ```jsx
 import React from 'react';
 
-export class TodoHeader extends React.Component<any, any> {
-  render() {
-    return (
-      <header>
-        <h1>todos</h1>
-        <div className="addTodo">
-          <input className="textfield" placeholder="add todo" />
-          <button className="submit">Add</button>
-        </div>
-        <nav className="filter">
-          <button className="completed">all</button>
-          <button>active</button>
-          <button>completed</button>
-        </nav>
-      </header>
-    );
-  }
-}
+export const TodoHeader = () => {
+  return (
+    <header>
+      <h1>todos</h1>
+      <div className="addTodo">
+        <input className="textfield" placeholder="add todo" />
+        <button className="submit">Add</button>
+      </div>
+      <nav className="filter">
+        <button className="completed">all</button>
+        <button>active</button>
+        <button>completed</button>
+      </nav>
+    </header>
+  );
+};
 ```
 
 > Note that since this is React, we had to change `class` to `className`, but nothing else changes.
@@ -47,28 +45,13 @@ Any time you see repeated complex elements, that is usually a sign that you shou
 ```jsx
 import React from 'react';
 
-export class TodolistItem extends React.Component<any, any> {
-  render() {
-    return (
-      <li className="todo">
-        <label>
-          <input type="checkbox" /> Todo 1
-        </label>
-      </li>
-    );
-  }
-}
+export const TodolistItem = () => {
+  return (
+    <li className="todo">
+      <label>
+        <input type="checkbox" /> Todo 1
+      </label>
+    </li>
+  );
+};
 ```
-
-> Note that this control could also be created as a function instead of a class:
-> ```jsx
-> export const TodoListItem = (props) => {
->   return (
->     <li className="todo">
->       <label>
->         <input type="checkbox" /> Todo 1
->       </label>
->     </li>
->   );
-> }
-> ```

step1-05/demo/src/App.tsx

@@ -1,11 +1,9 @@
 import React from 'react';
 
-export class TodoApp extends React.Component<any, any> {
-  render() {
-    return (
-      <div>
-        <p>Hello World</p>
-      </div>
-    );
-  }
+export const TodoApp = () => {
+  return (
+    <div>
+      <p>Hello World</p>
+    </div>
+  );
 }