add closing instructions

epicweb-dev · May 19, 2023 · 3a52016 · 3a52016
1 parent da68edd
commit 3a52016
Show file tree

Hide file tree

Showing 24 changed files with 67 additions and 185 deletions.
diff --git a/exercises/01.latest-ref/01.problem/README.mdx b/exercises/01.latest-ref/01.problem/README.mdx
@@ -83,15 +83,7 @@ I've made the debounce value last `3000ms` to make it easier for you to observe
 and test the behavior, but you can feel free to adjust that as you like. The
 tests can also help you make sure you've got things working well.
 
-<section id="files" className="not-prose">
- <h2>Files</h2>
-
- <ul>
- <li data-state="modified">
- <span>modified</span>
-
- <InlineFile file="index.tsx" />
- </li>
-
- </ul>
-</section>
+<callout-info>
+ The debounce behavior means that this will make the tests a bit slow. Don't
+ worry though, the rest of the tests will be quite fast.
+</callout-info>
diff --git a/exercises/01.latest-ref/01.solution/README.mdx b/exercises/01.latest-ref/01.solution/README.mdx
@@ -1 +1,9 @@
 # Latest Ref
+
+Great work. If you've got a bit more time and you haven't already read this
+post, I suggest you give these a read:
+
+- [How React Uses Closures to Avoid Bugs](https://epicreact.dev/how-react-uses-closures-to-avoid-bugs)
+- [The Latest Ref Pattern in React](https://epicreact.dev/the-latest-ref-pattern-in-react)
+
+With great power comes great responsibility.
diff --git a/exercises/02.composition/01.problem/README.mdx b/exercises/02.composition/01.problem/README.mdx
@@ -10,16 +10,3 @@ By the time you're done, the whole UI should look and function exactly as
 before, but you'll get a sense for how to use this pattern. The tests will be
 there just for you to verify you haven't broken anything that should be working
 if you want to use them.
-
-<section id="files" className="not-prose">
- <h2>Files</h2>
-
- <ul>
- <li data-state="modified">
- <span>modified</span>
-
- <InlineFile file="index.tsx" />
- </li>
-
- </ul>
-</section>
diff --git a/exercises/02.composition/01.solution/README.mdx b/exercises/02.composition/01.solution/README.mdx
@@ -1 +1,6 @@
 # Composition and Layout Components
+
+In this one we didn't actually change any visual behavior (the test was passing
+before your changes). But we hopefully demonstrated how restructuring your
+components can make it easier to maintain and help you avoid the prop drilling
+problem and reduce the amount you feel you need to use `useContext`.
diff --git a/exercises/03.compound-components/01.problem/README.mdx b/exercises/03.compound-components/01.problem/README.mdx
@@ -33,16 +33,3 @@ implicit state via `useContext(ToggleContext)`.
 
 🦺 TypeScript might not like your `useContext` call depending on how you set up
 your context. We'll deal with this in another step.
-
-<section id="files" className="not-prose">
- <h2>Files</h2>
-
- <ul>
- <li data-state="modified">
- <span>modified</span>
-
- <InlineFile file="toggle.tsx" />
- </li>
-
- </ul>
-</section>
diff --git a/exercises/03.compound-components/01.solution/README.mdx b/exercises/03.compound-components/01.solution/README.mdx
@@ -1 +1,6 @@
 # Compound Components
+
+This is an extremely powerful feature that gives us nice and declarative APIs
+for our reusable components. However, it's possible people could be using it
+wrong so let's explore a way to help people avoid using our API incorrectly
+next.
diff --git a/exercises/03.compound-components/02.problem.validation/README.mdx b/exercises/03.compound-components/02.problem.validation/README.mdx
@@ -22,16 +22,3 @@ your life already is 😂 In this exercise, we're going to make our lives better
 
 (You can go ahead and undo the change to <InlineFile file="app.tsx" /> if you'd
 like. The tests will let you know that you've gotten it right).
-
-<section id="files" className="not-prose">
- <h2>Files</h2>
-
- <ul>
- <li data-state="modified">
- <span>modified</span>
-
- <InlineFile file="toggle.tsx" />
- </li>
-
- </ul>
-</section>
diff --git a/exercises/03.compound-components/02.solution.validation/README.mdx b/exercises/03.compound-components/02.solution.validation/README.mdx
@@ -1 +1,6 @@
 # Compound Components Validation
+
+Runtime validation isn't the best (it would be better if we could enforce this
+statically via TypeScript), but unfortunately it's the best we can do with the
+composition model offered by React. That said, we it's unlikely people will mess
+this up now that we have this runtime validation in place.
diff --git a/exercises/04.prop-getters/01.problem.collections/README.mdx b/exercises/04.prop-getters/01.problem.collections/README.mdx
@@ -8,16 +8,3 @@ the UI they render.
 
 In this exercise you need to create a `togglerProps` object that has all the
 props people would typically need applied to a toggle button.
-
-<section id="files" className="not-prose">
- <h2>Files</h2>
-
- <ul>
- <li data-state="modified">
- <span>modified</span>
-
- <InlineFile file="toggle.tsx" />
- </li>
-
- </ul>
-</section>
diff --git a/exercises/04.prop-getters/01.solution.collections/README.mdx b/exercises/04.prop-getters/01.solution.collections/README.mdx
@@ -1 +1,4 @@
 # Prop Collections
+
+Prop collections are great for handling common use cases for your hooks, but
+there's a subtle but important limitation with them that we should address next.
diff --git a/exercises/04.prop-getters/02.problem.getters/README.mdx b/exercises/04.prop-getters/02.problem.getters/README.mdx
@@ -37,22 +37,3 @@ new API we're responsible for creating. See if you can make that API work.
 🦺 The types for the argument to the `getTogglerProps` component might be a bit
 tricky, so here's a little tip: you can get the `onClick` prop from:
 `React.DOMAttributes<HTMLButtonElement>['onClick']`.
-
-<section id="files" className="not-prose">
- <h2>Files</h2>
-
- <ul>
- <li data-state="modified">
- <span>modified</span>
-
- <InlineFile file="app.tsx" />
- </li>
-
- <li data-state="modified">
- <span>modified</span>
-
- <InlineFile file="toggle.tsx" />
- </li>
-
- </ul>
-</section>
diff --git a/exercises/04.prop-getters/02.solution.getters/README.mdx b/exercises/04.prop-getters/02.solution.getters/README.mdx
@@ -1 +1,6 @@
 # Prop Getters
+
+Great, now users don't have to worry about whether they're overriding us or
+we're overriding them and everything can be an implementation detail which we
+can change as needed without worrying about breaking people's expectations.
+Composition FTW!
diff --git a/exercises/05.state-initializer/01.problem/README.mdx b/exercises/05.state-initializer/01.problem/README.mdx
@@ -11,22 +11,3 @@ This will require a number of changes all outlined for you in the exercise file.
 You'll know that what you have is working when the toggle starts as "on" and
 when you can click the "reset" button to change it from "off" to "on" (and the
 tests will verify this is working for you as well).
-
-<section id="files" className="not-prose">
- <h2>Files</h2>
-
- <ul>
- <li data-state="modified">
- <span>modified</span>
-
- <InlineFile file="app.tsx" />
- </li>
-
- <li data-state="modified">
- <span>modified</span>
-
- <InlineFile file="toggle.tsx" />
- </li>
-
- </ul>
-</section>
diff --git a/exercises/05.state-initializer/01.solution/README.mdx b/exercises/05.state-initializer/01.solution/README.mdx
@@ -1 +1,4 @@
 # State Initializer
+
+This is a simple, yet powerful pattern for a variety of use cases. However
+there's one subtle bug we should address before we continue...
diff --git a/exercises/05.state-initializer/02.problem.initial/README.mdx b/exercises/05.state-initializer/02.problem.initial/README.mdx
@@ -8,22 +8,3 @@ prop?
 
 💰 Hint, it's not so complicated that you need `useEffect`. You can do this with
 `useRef` or `useState`.
-
-<section id="files" className="not-prose">
- <h2>Files</h2>
-
- <ul>
- <li data-state="modified">
- <span>modified</span>
-
- <InlineFile file="app.tsx" />
- </li>
-
- <li data-state="modified">
- <span>modified</span>
-
- <InlineFile file="toggle.tsx" />
- </li>
-
- </ul>
-</section>
diff --git a/exercises/05.state-initializer/02.solution.initial/README.mdx b/exercises/05.state-initializer/02.solution.initial/README.mdx
@@ -1 +1,8 @@
 # Handle changing the `initialOn`
+
+This is a pretty subtle behavior and it may feel unnecessary to handle this, but
+it's important that the prefix of `initial` be honored in the way we treat it
+and so the `ref` is absolutely necessary.
+
+If someone really did want to reset our component to a brand new initial state,
+they could use the `key` prop to force a remount of the component.
diff --git a/exercises/06.state-reducer/01.problem/README.mdx b/exercises/06.state-reducer/01.problem/README.mdx
@@ -13,22 +13,3 @@ responsibility."
 
 Your job is to enable people to provide a custom `reducer` so they can have
 complete control over how state updates happen in our `<Toggle />` component.
-
-<section id="files" className="not-prose">
- <h2>Files</h2>
-
- <ul>
- <li data-state="modified">
- <span>modified</span>
-
- <InlineFile file="app.tsx" />
- </li>
-
- <li data-state="modified">
- <span>modified</span>
-
- <InlineFile file="toggle.tsx" />
- </li>
-
- </ul>
-</section>
diff --git a/exercises/06.state-reducer/01.solution/README.mdx b/exercises/06.state-reducer/01.solution/README.mdx
@@ -1 +1,6 @@
 # State Reducer
+
+This is a powerful example of inversion of control that allows users to
+overwrite our entire reducer. But it could be exhausting to users to have to
+duplicate most of our reducer just to change a few things. So let's address that
+common scenario next.
diff --git a/exercises/06.state-reducer/02.problem.default/README.mdx b/exercises/06.state-reducer/02.problem.default/README.mdx
@@ -19,22 +19,3 @@ Feel free to add a comment for that if you like (for example):
 Go ahead and do this by changing the `toggleStateReducer` function inside the
 `<App />` example to use the default reducer instead of having to re-implement
 what to do when the action type is `'reset'`.
-
-<section id="files" className="not-prose">
- <h2>Files</h2>
-
- <ul>
- <li data-state="modified">
- <span>modified</span>
-
- <InlineFile file="app.tsx" />
- </li>
-
- <li data-state="modified">
- <span>modified</span>
-
- <InlineFile file="toggle.tsx" />
- </li>
-
- </ul>
-</section>
diff --git a/exercises/06.state-reducer/02.solution.default/README.mdx b/exercises/06.state-reducer/02.solution.default/README.mdx
@@ -1 +1,5 @@
 # Default State Reducer
+
+It's a pretty simple, yet powerful solution. Inversion of control with good
+defaults allows our component users to have a lot more power and will reduce the
+amount of feature requests you get for these components by a lot, I promise.
diff --git a/exercises/07.control-props/01.problem/README.mdx b/exercises/07.control-props/01.problem/README.mdx
@@ -4,16 +4,3 @@ In this exercise, we've created a `<Toggle />` component which can accept a prop
 called `on` and another called `onChange`. These work similar to the `value` and
 `onChange` props of `<input />`. Your job is to make those props actually
 control the state of `on` and call the `onChange` with the suggested changes.
-
-<section id="files" className="not-prose">
- <h2>Files</h2>
-
- <ul>
- <li data-state="modified">
- <span>modified</span>
-
- <InlineFile file="toggle.tsx" />
- </li>
-
- </ul>
-</section>
diff --git a/exercises/07.control-props/01.solution/README.mdx b/exercises/07.control-props/01.solution/README.mdx
@@ -1 +1,10 @@
 # Control Props
+
+Phew! That was a tough one! But it's extremely powerful. It wouldn't be hard if
+we just wanted to lift the state. What makes it hard is wanting to have a single
+component that can not only manage its own state, but also have that state be
+managed externally as well.
+
+All that said, things can act funny if they switch from controlled to
+uncontrolled and vice versa. If that ever happens, it's probably a mistake.
+Let's dive into that idea a bit.
diff --git a/exercises/07.control-props/02.problem.warnings/README.mdx b/exercises/07.control-props/02.problem.warnings/README.mdx
@@ -60,16 +60,3 @@ Then make sure you can reproduce all three warnings in the right scenarios.
 
 A real-world component that does this is
 [`@reach/listbox`](https://reacttraining.com/reach-ui/listbox/)
-
-<section id="files" className="not-prose">
- <h2>Files</h2>
-
- <ul>
- <li data-state="modified">
- <span>modified</span>
-
- <InlineFile file="toggle.tsx" />
- </li>
-
- </ul>
-</section>
diff --git a/exercises/07.control-props/02.solution.warnings/README.mdx b/exercises/07.control-props/02.solution.warnings/README.mdx
@@ -1 +1,5 @@
 # Control Prop Warnings
+
+Feel free to check out the utility for this in `shared/utils.tsx` if you like.
+It takes a minute to wrap your head around it, but it's pretty simple when you
+get down to it.