From 082d2afb3fe6ec9879cd1801c16e3ff209cf2f74 Mon Sep 17 00:00:00 2001 From: "Kent C. Dodds" Date: Mon, 26 Aug 2024 12:24:21 -0600 Subject: [PATCH] add videos --- exercises/01.composition/01.problem.compose/README.mdx | 2 ++ exercises/01.composition/01.solution.compose/README.mdx | 2 ++ exercises/01.composition/FINISHED.mdx | 2 ++ exercises/01.composition/README.mdx | 2 ++ exercises/02.latest-ref/01.problem.ref/README.mdx | 2 ++ exercises/02.latest-ref/01.solution.ref/README.mdx | 2 ++ exercises/02.latest-ref/FINISHED.mdx | 2 ++ exercises/02.latest-ref/README.mdx | 2 ++ exercises/03.compound-components/01.problem.context/README.mdx | 2 ++ exercises/03.compound-components/01.solution.context/README.mdx | 2 ++ .../03.compound-components/02.problem.validation/README.mdx | 2 ++ .../03.compound-components/02.solution.validation/README.mdx | 2 ++ exercises/03.compound-components/FINISHED.mdx | 2 ++ exercises/03.compound-components/README.mdx | 2 ++ exercises/04.slots/01.problem.context/README.mdx | 2 ++ exercises/04.slots/01.solution.context/README.mdx | 2 ++ exercises/04.slots/02.problem.generic/README.mdx | 2 ++ exercises/04.slots/02.solution.generic/README.mdx | 2 ++ exercises/04.slots/03.problem.prop/README.mdx | 2 ++ exercises/04.slots/03.solution.prop/README.mdx | 2 ++ exercises/04.slots/FINISHED.mdx | 2 ++ exercises/04.slots/README.mdx | 2 ++ exercises/05.prop-getters/01.problem.collections/README.mdx | 2 ++ exercises/05.prop-getters/01.solution.collections/README.mdx | 2 ++ exercises/05.prop-getters/02.problem.getters/README.mdx | 2 ++ exercises/05.prop-getters/02.solution.getters/README.mdx | 2 ++ exercises/05.prop-getters/FINISHED.mdx | 2 ++ exercises/05.prop-getters/README.mdx | 2 ++ exercises/06.state-initializers/01.problem.initial/README.mdx | 2 ++ exercises/06.state-initializers/01.solution.initial/README.mdx | 2 ++ exercises/06.state-initializers/02.problem.stability/README.mdx | 2 ++ .../06.state-initializers/02.solution.stability/README.mdx | 2 ++ exercises/06.state-initializers/FINISHED.mdx | 2 ++ exercises/06.state-initializers/README.mdx | 2 ++ exercises/07.state-reducer/02.problem.default/README.mdx | 2 ++ exercises/07.state-reducer/02.solution.default/README.mdx | 2 ++ exercises/07.state-reducer/FINISHED.mdx | 2 ++ exercises/07.state-reducer/README.mdx | 2 ++ exercises/08.control-props/01.problem.control/README.mdx | 2 ++ exercises/08.control-props/01.solution.control/README.mdx | 2 ++ exercises/08.control-props/FINISHED.mdx | 2 ++ exercises/08.control-props/README.mdx | 2 ++ exercises/FINISHED.mdx | 2 ++ exercises/README.mdx | 2 ++ 44 files changed, 88 insertions(+) diff --git a/exercises/01.composition/01.problem.compose/README.mdx b/exercises/01.composition/01.problem.compose/README.mdx index d62a92a6..0c9acae1 100644 --- a/exercises/01.composition/01.problem.compose/README.mdx +++ b/exercises/01.composition/01.problem.compose/README.mdx @@ -1,5 +1,7 @@ # Composition and Layout Components + + 👨‍💼 In this exercise we've got a simple user interface with several components necessitating passing state and updaters around. We're going to restructure things so we pass react elements instead of state and updaters. We might be diff --git a/exercises/01.composition/01.solution.compose/README.mdx b/exercises/01.composition/01.solution.compose/README.mdx index fb2296a8..5b0bb9a3 100644 --- a/exercises/01.composition/01.solution.compose/README.mdx +++ b/exercises/01.composition/01.solution.compose/README.mdx @@ -1,5 +1,7 @@ # 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 diff --git a/exercises/01.composition/FINISHED.mdx b/exercises/01.composition/FINISHED.mdx index 8f18edbc..6426cb8d 100644 --- a/exercises/01.composition/FINISHED.mdx +++ b/exercises/01.composition/FINISHED.mdx @@ -1,4 +1,6 @@ # Composition + + 👨‍💼 Great work! You now know how to create layout components to reduce prop drilling! diff --git a/exercises/01.composition/README.mdx b/exercises/01.composition/README.mdx index cbe3724f..05e2d50b 100644 --- a/exercises/01.composition/README.mdx +++ b/exercises/01.composition/README.mdx @@ -1,5 +1,7 @@ # Composition + + **One liner:** The Composition and Layout Components Pattern helps to avoid the prop drilling problem and enhances the reusability of your components. diff --git a/exercises/02.latest-ref/01.problem.ref/README.mdx b/exercises/02.latest-ref/01.problem.ref/README.mdx index 7f5819cd..a070628a 100644 --- a/exercises/02.latest-ref/01.problem.ref/README.mdx +++ b/exercises/02.latest-ref/01.problem.ref/README.mdx @@ -1,5 +1,7 @@ # Latest Ref + + 👨‍💼 In our exercise, we have a `useDebounce` function that isn't working the way we want with hooks. We're going to need to "change the default" using the latest ref pattern. diff --git a/exercises/02.latest-ref/01.solution.ref/README.mdx b/exercises/02.latest-ref/01.solution.ref/README.mdx index 7a8c9b3a..d3264b29 100644 --- a/exercises/02.latest-ref/01.solution.ref/README.mdx +++ b/exercises/02.latest-ref/01.solution.ref/README.mdx @@ -1,5 +1,7 @@ # 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: diff --git a/exercises/02.latest-ref/FINISHED.mdx b/exercises/02.latest-ref/FINISHED.mdx index 14e800a6..2037f1a0 100644 --- a/exercises/02.latest-ref/FINISHED.mdx +++ b/exercises/02.latest-ref/FINISHED.mdx @@ -1,3 +1,5 @@ # Latest Ref + + 👨‍💼 Great job! You now know the latest ref pattern. diff --git a/exercises/02.latest-ref/README.mdx b/exercises/02.latest-ref/README.mdx index 7dc74447..91b0d4f7 100644 --- a/exercises/02.latest-ref/README.mdx +++ b/exercises/02.latest-ref/README.mdx @@ -1,5 +1,7 @@ # Latest Ref + + **One liner:** The Latest Ref Pattern allows you to have a reference to the latest value of a prop, state, or callback without needing to list it in a diff --git a/exercises/03.compound-components/01.problem.context/README.mdx b/exercises/03.compound-components/01.problem.context/README.mdx index 185e749d..6ef63c03 100644 --- a/exercises/03.compound-components/01.problem.context/README.mdx +++ b/exercises/03.compound-components/01.problem.context/README.mdx @@ -1,5 +1,7 @@ # Compound Components + + 👨‍💼 In this exercise we're going to make `` the parent of a few compound components: diff --git a/exercises/03.compound-components/01.solution.context/README.mdx b/exercises/03.compound-components/01.solution.context/README.mdx index 9d86b391..8886fb4f 100644 --- a/exercises/03.compound-components/01.solution.context/README.mdx +++ b/exercises/03.compound-components/01.solution.context/README.mdx @@ -1,5 +1,7 @@ # 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 diff --git a/exercises/03.compound-components/02.problem.validation/README.mdx b/exercises/03.compound-components/02.problem.validation/README.mdx index 93dc5948..d2227366 100644 --- a/exercises/03.compound-components/02.problem.validation/README.mdx +++ b/exercises/03.compound-components/02.problem.validation/README.mdx @@ -1,5 +1,7 @@ # Compound Components Validation + + 👨‍💼 Change to this (temporarily): ```tsx diff --git a/exercises/03.compound-components/02.solution.validation/README.mdx b/exercises/03.compound-components/02.solution.validation/README.mdx index b897f7e2..f24de7f3 100644 --- a/exercises/03.compound-components/02.solution.validation/README.mdx +++ b/exercises/03.compound-components/02.solution.validation/README.mdx @@ -1,5 +1,7 @@ # 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, it's unlikely people will diff --git a/exercises/03.compound-components/FINISHED.mdx b/exercises/03.compound-components/FINISHED.mdx index 46371d1d..3b4bd64b 100644 --- a/exercises/03.compound-components/FINISHED.mdx +++ b/exercises/03.compound-components/FINISHED.mdx @@ -1,5 +1,7 @@ # Compound Components + + 👨‍💼 Great work! You now know how to create one of the best composition APIs for UI component libraries. The vast majority of component libraries employ this pattern and even if you don't build your own, you'll be much better able to use diff --git a/exercises/03.compound-components/README.mdx b/exercises/03.compound-components/README.mdx index c9ed5b65..bb09c382 100644 --- a/exercises/03.compound-components/README.mdx +++ b/exercises/03.compound-components/README.mdx @@ -1,5 +1,7 @@ # Compound Components + + **One liner:** The Compound Components Pattern enables you to provide a set of components that implicitly share state for a simple yet powerful declarative diff --git a/exercises/04.slots/01.problem.context/README.mdx b/exercises/04.slots/01.problem.context/README.mdx index 401d11b0..d0f49aba 100644 --- a/exercises/04.slots/01.problem.context/README.mdx +++ b/exercises/04.slots/01.problem.context/README.mdx @@ -1,5 +1,7 @@ # Slot Context + + 👨‍💼 It's a tale as old as time. Our `label` and `input` are not properly associated in this form and so clicking the `label` will not focus the `input` as expected (in addition to other accessibility issues). diff --git a/exercises/04.slots/01.solution.context/README.mdx b/exercises/04.slots/01.solution.context/README.mdx index b180d544..293c185b 100644 --- a/exercises/04.slots/01.solution.context/README.mdx +++ b/exercises/04.slots/01.solution.context/README.mdx @@ -1,4 +1,6 @@ # Slot Context + + 👨‍💼 That's a great start! Now we have that in place, I think we can use this in our toggle component! diff --git a/exercises/04.slots/02.problem.generic/README.mdx b/exercises/04.slots/02.problem.generic/README.mdx index ed11ea95..4310fb0c 100644 --- a/exercises/04.slots/02.problem.generic/README.mdx +++ b/exercises/04.slots/02.problem.generic/README.mdx @@ -1,5 +1,7 @@ # Generic Slot Components + + 👨‍💼 You'll notice our party mode toggle button is using `useId` to properly associate the toggle button with its label. We'd like to make that implicit and reuse the `Label` component for the `Toggle` as well. diff --git a/exercises/04.slots/02.solution.generic/README.mdx b/exercises/04.slots/02.solution.generic/README.mdx index 9f333a9b..f7fddb16 100644 --- a/exercises/04.slots/02.solution.generic/README.mdx +++ b/exercises/04.slots/02.solution.generic/README.mdx @@ -1,4 +1,6 @@ # Generic Slot Components + + 👨‍💼 Great! Now we can reuse the `Label` component in our set of `Toggle` compound components. Let's go a step further with a generic `Text` component. diff --git a/exercises/04.slots/03.problem.prop/README.mdx b/exercises/04.slots/03.problem.prop/README.mdx index 61827e3f..5feb3161 100644 --- a/exercises/04.slots/03.problem.prop/README.mdx +++ b/exercises/04.slots/03.problem.prop/README.mdx @@ -1,5 +1,7 @@ # Slot Prop + + 👨‍💼 We have `ToggleOn` and `ToggleOff` components, but really we could make those components a simple `Text` component that accepts a `slot` prop. Then the `Toggle` component could define the props that the individual `Text` components diff --git a/exercises/04.slots/03.solution.prop/README.mdx b/exercises/04.slots/03.solution.prop/README.mdx index 5549c11e..dfc85fb0 100644 --- a/exercises/04.slots/03.solution.prop/README.mdx +++ b/exercises/04.slots/03.solution.prop/README.mdx @@ -1,5 +1,7 @@ # Slot Prop + + 👨‍💼 Great! Now we can use the same component for multiple slots! One thing to note is that there's not a great way to have good type safety on diff --git a/exercises/04.slots/FINISHED.mdx b/exercises/04.slots/FINISHED.mdx index c1288ff1..e5439eb8 100644 --- a/exercises/04.slots/FINISHED.mdx +++ b/exercises/04.slots/FINISHED.mdx @@ -1,4 +1,6 @@ # Slots + + 👨‍💼 This is a really nice pattern if you find yourself building a library of components that have a lot of common components. Great job! diff --git a/exercises/04.slots/README.mdx b/exercises/04.slots/README.mdx index 5d3f8223..6facfb6c 100644 --- a/exercises/04.slots/README.mdx +++ b/exercises/04.slots/README.mdx @@ -1,5 +1,7 @@ # Slots + + **One liner:** Slots allow you to specify an element which takes on a particular role in the overall collection of components. diff --git a/exercises/05.prop-getters/01.problem.collections/README.mdx b/exercises/05.prop-getters/01.problem.collections/README.mdx index 078e8b32..4ae4d499 100644 --- a/exercises/05.prop-getters/01.problem.collections/README.mdx +++ b/exercises/05.prop-getters/01.problem.collections/README.mdx @@ -1,5 +1,7 @@ # Prop Collections + + 🧝‍♂️ I've removed the work we did with the Slot pattern and we're also going to be focusing the next few exercises on the hook. So we've simplified things a little bit to give us a better focus on the hook. diff --git a/exercises/05.prop-getters/01.solution.collections/README.mdx b/exercises/05.prop-getters/01.solution.collections/README.mdx index 7efad076..c5d7e032 100644 --- a/exercises/05.prop-getters/01.solution.collections/README.mdx +++ b/exercises/05.prop-getters/01.solution.collections/README.mdx @@ -1,4 +1,6 @@ # 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/05.prop-getters/02.problem.getters/README.mdx b/exercises/05.prop-getters/02.problem.getters/README.mdx index eed84d95..240191bc 100644 --- a/exercises/05.prop-getters/02.problem.getters/README.mdx +++ b/exercises/05.prop-getters/02.problem.getters/README.mdx @@ -1,5 +1,7 @@ # Prop Getters + + 👨‍💼 Uh oh! Someone wants to use our `togglerProps` object, but they need to apply their own `onClick` handler! Try doing that by updating the `App` component to this: diff --git a/exercises/05.prop-getters/02.solution.getters/README.mdx b/exercises/05.prop-getters/02.solution.getters/README.mdx index 01fed504..af8d9445 100644 --- a/exercises/05.prop-getters/02.solution.getters/README.mdx +++ b/exercises/05.prop-getters/02.solution.getters/README.mdx @@ -1,5 +1,7 @@ # 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. diff --git a/exercises/05.prop-getters/FINISHED.mdx b/exercises/05.prop-getters/FINISHED.mdx index b4f27890..0ff0009c 100644 --- a/exercises/05.prop-getters/FINISHED.mdx +++ b/exercises/05.prop-getters/FINISHED.mdx @@ -1,5 +1,7 @@ # Prop Collections and Getters + + 👨‍💼 Great work! This is a highly flexible pattern that gives consumers a great deal of control over how the component is rendered while also handling common cases with ease. diff --git a/exercises/05.prop-getters/README.mdx b/exercises/05.prop-getters/README.mdx index 1bdc3b06..15217203 100644 --- a/exercises/05.prop-getters/README.mdx +++ b/exercises/05.prop-getters/README.mdx @@ -1,5 +1,7 @@ # Prop Collections and Getters + + **One liner:** The Prop Collections and Getters Pattern allows your hook to support common use cases for UI elements people build with your hook. diff --git a/exercises/06.state-initializers/01.problem.initial/README.mdx b/exercises/06.state-initializers/01.problem.initial/README.mdx index 45ff4b33..50c0a95d 100644 --- a/exercises/06.state-initializers/01.problem.initial/README.mdx +++ b/exercises/06.state-initializers/01.problem.initial/README.mdx @@ -1,5 +1,7 @@ # Initialize Toggle + + 👨‍💼 Our toggle component should be able to be customizable for the initial state and reset to the initial state. diff --git a/exercises/06.state-initializers/01.solution.initial/README.mdx b/exercises/06.state-initializers/01.solution.initial/README.mdx index d61c6b47..c75d4512 100644 --- a/exercises/06.state-initializers/01.solution.initial/README.mdx +++ b/exercises/06.state-initializers/01.solution.initial/README.mdx @@ -1,4 +1,6 @@ # Initialize Toggle + + 👨‍💼 Great job! Now we can initilize and reset the toggle component! But we've discovered a bug. Let's look at that next. diff --git a/exercises/06.state-initializers/02.problem.stability/README.mdx b/exercises/06.state-initializers/02.problem.stability/README.mdx index 6c3059b3..5ef5c468 100644 --- a/exercises/06.state-initializers/02.problem.stability/README.mdx +++ b/exercises/06.state-initializers/02.problem.stability/README.mdx @@ -1,5 +1,7 @@ # Stability + + 👨‍💼 We've noticed that if someone passes an `initialOn` that's based on state, then calling `reset` will sometimes change the state to the wrong value based on what the `initialOn` was set to at the time the component was initialized. diff --git a/exercises/06.state-initializers/02.solution.stability/README.mdx b/exercises/06.state-initializers/02.solution.stability/README.mdx index c4292612..1eba1570 100644 --- a/exercises/06.state-initializers/02.solution.stability/README.mdx +++ b/exercises/06.state-initializers/02.solution.stability/README.mdx @@ -1,3 +1,5 @@ # Stability + + 👨‍💼 Great. Now we've got some stability with our state initializer. Well done! diff --git a/exercises/06.state-initializers/FINISHED.mdx b/exercises/06.state-initializers/FINISHED.mdx index 91ee604f..b8c6c837 100644 --- a/exercises/06.state-initializers/FINISHED.mdx +++ b/exercises/06.state-initializers/FINISHED.mdx @@ -1,5 +1,7 @@ # State Initializer + + 👨‍💼 Great job! You now know what to do to properly handle the initialization (and reset) of your state. diff --git a/exercises/06.state-initializers/README.mdx b/exercises/06.state-initializers/README.mdx index 57d986bc..04b168f4 100644 --- a/exercises/06.state-initializers/README.mdx +++ b/exercises/06.state-initializers/README.mdx @@ -1,5 +1,7 @@ # State Initializer + + **One liner:** The state initializer pattern is a way to initialize (and reset) the state of a component in a predictable way. diff --git a/exercises/07.state-reducer/02.problem.default/README.mdx b/exercises/07.state-reducer/02.problem.default/README.mdx index 9cd8741e..c2ff6edc 100644 --- a/exercises/07.state-reducer/02.problem.default/README.mdx +++ b/exercises/07.state-reducer/02.problem.default/README.mdx @@ -1,5 +1,7 @@ # Default State Reducer + + 👨‍💼 Our `toggleReducer` is pretty simple, so it's not a huge pain for people to implement their own. However, in a more realistic scenario, people may struggle with having to basically re-implement our entire reducer which could be pretty diff --git a/exercises/07.state-reducer/02.solution.default/README.mdx b/exercises/07.state-reducer/02.solution.default/README.mdx index 194305e9..f737af51 100644 --- a/exercises/07.state-reducer/02.solution.default/README.mdx +++ b/exercises/07.state-reducer/02.solution.default/README.mdx @@ -1,5 +1,7 @@ # 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.state-reducer/FINISHED.mdx b/exercises/07.state-reducer/FINISHED.mdx index aca07caa..27b40887 100644 --- a/exercises/07.state-reducer/FINISHED.mdx +++ b/exercises/07.state-reducer/FINISHED.mdx @@ -1,4 +1,6 @@ # State Reducer + + 👨‍💼 Great job! You've learned one of the simplest yet most powerful inversion of control tricks in the React biz. diff --git a/exercises/07.state-reducer/README.mdx b/exercises/07.state-reducer/README.mdx index 51990c6e..d6651b0e 100644 --- a/exercises/07.state-reducer/README.mdx +++ b/exercises/07.state-reducer/README.mdx @@ -1,5 +1,7 @@ # State Reducer + + **One liner:** The State Reducer Pattern inverts control over the state management of your hook and/or component to the developer using it so they can diff --git a/exercises/08.control-props/01.problem.control/README.mdx b/exercises/08.control-props/01.problem.control/README.mdx index eadafe08..1a381f89 100644 --- a/exercises/08.control-props/01.problem.control/README.mdx +++ b/exercises/08.control-props/01.problem.control/README.mdx @@ -1,5 +1,7 @@ # Control Props + + 👨‍💼 In this exercise, we've created a `` component which can accept a prop called `on` and another called `onChange`. These work similar to the `value` and `onChange` props of ``. Your job is to make those props diff --git a/exercises/08.control-props/01.solution.control/README.mdx b/exercises/08.control-props/01.solution.control/README.mdx index 534d1467..46dbb90b 100644 --- a/exercises/08.control-props/01.solution.control/README.mdx +++ b/exercises/08.control-props/01.solution.control/README.mdx @@ -1,5 +1,7 @@ # 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 diff --git a/exercises/08.control-props/FINISHED.mdx b/exercises/08.control-props/FINISHED.mdx index 9a4c9d62..6e420d1e 100644 --- a/exercises/08.control-props/FINISHED.mdx +++ b/exercises/08.control-props/FINISHED.mdx @@ -1,5 +1,7 @@ # Control Props + + 👨‍💼 Great work! You now know how you can allow developers to control your internal state by using control props. What makes this tricky is supporting both controlled and uncontrolled and you managed it. Good job! diff --git a/exercises/08.control-props/README.mdx b/exercises/08.control-props/README.mdx index 73e132c2..d070bf7f 100644 --- a/exercises/08.control-props/README.mdx +++ b/exercises/08.control-props/README.mdx @@ -1,5 +1,7 @@ # Control Props + + **One liner:** The Control Props pattern allows users to completely control state values within your component. This differs from the state reducer diff --git a/exercises/FINISHED.mdx b/exercises/FINISHED.mdx index 403f5eda..1c0818e3 100644 --- a/exercises/FINISHED.mdx +++ b/exercises/FINISHED.mdx @@ -1,3 +1,5 @@ # Advanced React Patterns 🤯 + + 👨‍💼 Congratulations. You've made it to the end. Awesome work! diff --git a/exercises/README.mdx b/exercises/README.mdx index 9b229297..4f25ba54 100644 --- a/exercises/README.mdx +++ b/exercises/README.mdx @@ -1,5 +1,7 @@ # Advanced React Patterns 🤯 + + 👨‍💼 Hello, my name is Peter the Product Manager. I'm here to help you get oriented and to give you your assignments for this workshop!