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/exercise/README.md

@@ -6,13 +6,13 @@ If you don't already have the app running, start it by running `npm start` from
 
 ## TodoFooter
 
-1. Add a TodoFooter component in the `components` folder, copying over the `<footer>` tag and all of its children from `TodoApp.html` in the `step1-05` folder. This component could be a function or class.
-2. Remove any `onclick` properties, and change `class` to `className`
+1. Add a TodoFooter component in the `step1-05/exercise/src/components` folder.
+2. Create a react component that returns the footer markup from `step1-05/TodoApp.html`. Make sure to import React, export the component, and change `class` to `className`.
 
 ## TodoList
 
-1. Add a TodoList component like you did with the footer. This could also be function or class.
-2. Import TodoListItem and add four of them inside of the `<ul>`
+1. Add a TodoList component like you did with the footer.
+2. Import TodoListItem and add four of them inside of the `<ul>` (we'll be using live data later)
 3. Bonus points for using a [`for`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) loop or using [`map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) to create 4 list items based on the array `[1,2,3,4]`
 
 ## App

step1-05/exercise/src/App.tsx

@@ -1,12 +1,10 @@
 import React from 'react';
 import { TodoHeader } from './components/TodoHeader';
 
-export class TodoApp extends React.Component<any, any> {
-  render() {
-    return (
-      <div>
-        <TodoHeader />
-      </div>
-    );
-  }
+export const TodoApp = () => {
+  return (
+    <div>
+      <TodoHeader />
+    </div>
+  );
 }

step1-05/exercise/src/components/TodoHeader.tsx

@@ -1,20 +1,18 @@
 import React from 'react';
 
-export class TodoHeader extends React.Component<any, any> {
-  render() {
-    return (
-      <header>
-        <h1>todos <small>(1.5 exercise)</small></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 <small>(1.5 exercise)</small></h1>
+      <div className="addTodo">
+        <input className="textfield" placeholder="add todo" />
+        <button className="submit">Add</button>
+      </div>
+      <nav className="filter">
+        <button className="selected">all</button>
+        <button>active</button>
+        <button>completed</button>
+      </nav>
+    </header>
+  )
 }

step1-05/exercise/src/components/TodoListItem.tsx

@@ -1,13 +1,11 @@
 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>
+  );
 }