Rewrite ex 9 with useState

_not_important/instructor-notes/TODO.md

@@ -1,5 +1,5 @@
 1: Modern JavaScript: Modules (& fat-arrow)
-2: Thinking In Components
+2: Identifying Components
 3: Modern JavaScript: Working With Variables (was 4)
 v4: JSX Fundamentals (was 5)
 t5: What can a component render? (was 6)
@@ -17,9 +17,68 @@ v16: Legacy Lifecycle Events (new)
 17: Testing Component Render
 18: Testing Component Interactions
 
-X rename folders
-x rename in README's
-x rename in apps
-x yarn start's
-change colors
-sync names/numbers to slides
+-[x] rename folders
+
+-[x] rename in README's
+
+-[x] rename in apps
+
+-[x] yarn start's
+
+-[x] change colors
+
+-[x] sync names/numbers to slides
+
+## Content
+
+### replace classes with functions
+
+-[ ] rewrite ex 9 (and beyond) to useState
+
+-[ ] rewrite ex 11 (and beyond) to useEffect
+
+-[ ] rewrite ex 12 (and beyond) to useContext
+
+-[ ] rewrite ex 14 to go opposite direction
+
+-[ ] write ex 15 (legacy state mgmt)
+
+-[ ] write ex 16 (legacy lifecycle)
+
+### Instructor-led/no instrux
+
+-[ ] write instrux for ex 1: modernjs: modules
+
+-[ ] write instrux for ex 2: identifying components
+
+-[ ] write instrux for ex 3: working with vars
+
+-[ ] write instrux for ex 10: async/await
+
+-[ ] write instrux for ex 13: class syntax
+
+### ModernJS tweaks
+
+-[ ] All Modern JS exercises need to change. More instructions, so they can see the answers for what i'm doing? Let them do it on their own? Find a way to make it more hands-on for them, easier for them to get to the answers, and still not take a lot of time.
+
+-[ ] In instructor notes for import/export, make sure I talk more about named vs default more!
+
+-[ ] Modern JS #4 (async/await) is way too fast. Slow down, talk more about what you're doing.
+
+-[ ] Many modern JS features can be removed from "big up-front" exercises! Object destructuring, array destructuring, implicit return can all be held back until they see code without them - and sprinkle them in when they come up (just mention them)! There are probably other features that could do the same!
+
+## Quality
+
+-[ ] Revisit all instructions. Add more detail & clarity.
+
+-[ ] Inconsistent names of functions - make sure I **always** name functions in examples/solutions!
+
+-[ ] Explain async stuff better
+
+-[ ] Ex 11 - take a look at FriendFlipper in completed/SOLUTIONS. Something might be wrong with it.
+
+-[ ] At least one place has the wrong name of prevState/prevProps. Check them!
+
+-[ ] test windows subsystem for linux
+
+-[ ] test fish shell

exercise-2/README.md

@@ -1,5 +1,5 @@
 # Exercise 2
 
-## Thinking In Components
+## Identifying Components
 
 TODO: write me

exercise-7/SOLUTIONS.md

@@ -22,7 +22,7 @@ A CSS Module is imported into a component using `import styles from '___.module.
 
 ### 2-2
 
-This `styles` object imported from the CSS Module contains properties for every class we define in the `styles.css` file. We use that object to specify which style from the module to use on an element.
+This `styles` object imported from the CSS Module contains properties for every style we define in the `styles.css` file. We use that object to specify which style from the module to use on an element.
 
 For example, if the CSS Module contained a style `.title { ... }`, in the associated component we would use it with `<h1 className={styles.title}>`.
 

exercise-9/friend-detail/FriendFlipper.js

@@ -2,52 +2,50 @@ import React from 'react';
 
 import styles from './FriendFlipper.module.css';
 
-export default class FriendFlipper extends React.Component {
-  render() {
-    return (
-      <div className={styles.flipWrapper}>
-        <div className={styles.flipper}>{this.renderFront()}</div>
-      </div>
-    );
-  }
+export default function FriendFlipper(props) {
+  return (
+    <div className={styles.flipWrapper}>
+      <div className={styles.flipper}>{renderFront(props)}</div>
+    </div>
+  );
+}
 
-  renderFront() {
-    const { friend } = this.props;
-    return (
-      <div className={styles.front}>
-        <div className={styles.frontContents}>
-          <img src={friend.image} alt={friend.name} />
-          <button type="button" className={styles.flipperNav}>
-            Details &gt;
-          </button>
-        </div>
+function renderFront(props) {
+  const { friend } = props;
+  return (
+    <div className={styles.front}>
+      <div className={styles.frontContents}>
+        <img src={friend.image} alt={friend.name} />
+        <button type="button" className={styles.flipperNav}>
+          Details &gt;
+        </button>
       </div>
-    );
-  }
+    </div>
+  );
+}
 
-  renderBack() {
-    const { friend } = this.props;
-    return (
-      <div className={styles.back}>
-        <div className={styles.backContents}>
-          <img src={friend.image} alt={friend.image} />
-          <div className={styles.backDetails}>
-            <h3>
-              ID:
-              {friend.id}
-            </h3>
-            <h3>Colors:</h3>
-            <ul>
-              {friend.colors.map(color => (
-                <li key={color}>{color}</li>
-              ))}
-            </ul>
-          </div>
-          <button type="button" className={styles.flipperNav}>
-            &lt; Back
-          </button>
+function renderBack(props) {
+  const { friend } = props;
+  return (
+    <div className={styles.back}>
+      <div className={styles.backContents}>
+        <img src={friend.image} alt={friend.image} />
+        <div className={styles.backDetails}>
+          <h3>
+            ID:
+            {friend.id}
+          </h3>
+          <h3>Colors:</h3>
+          <ul>
+            {friend.colors.map(color => (
+              <li key={color}>{color}</li>
+            ))}
+          </ul>
         </div>
+        <button type="button" className={styles.flipperNav}>
+          &lt; Back
+        </button>
       </div>
-    );
-  }
+    </div>
+  );
 }