add videos

epicweb-dev · Aug 26, 2024 · 082d2af · 082d2af
1 parent af04f5f
commit 082d2af
Show file tree

Hide file tree

Showing 44 changed files with 88 additions and 0 deletions.
diff --git 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
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-patterns/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
@@ -1,5 +1,7 @@
 # Composition and Layout Components
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-patterns/composition-and-layout-components/solution" />
+
 👨‍💼 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
@@ -1,4 +1,6 @@
 # Composition
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-patterns/dad-joke-break-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
@@ -1,5 +1,7 @@
 # Composition
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-patterns/intro-to-composition" />
+
 <callout-success>
 	**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
@@ -1,5 +1,7 @@
 # Latest Ref
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-patterns/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
@@ -1,5 +1,7 @@
 # Latest Ref
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-patterns/latest-ref/solution" />
+
 👨‍💼 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
@@ -1,3 +1,5 @@
 # Latest Ref
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-patterns/dad-joke-break-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
@@ -1,5 +1,7 @@
 # Latest Ref
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-patterns/intro-to-latest-ref" />
+
 <callout-success>
 	**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
@@ -1,5 +1,7 @@
 # Compound Components
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-patterns/compound-components" />
+
 👨‍💼 In this exercise we're going to make `<Toggle />` 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
@@ -1,5 +1,7 @@
 # Compound Components
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-patterns/compound-components/solution" />
+
 👨‍💼 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
@@ -1,5 +1,7 @@
 # Compound Components Validation
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-patterns/compound-components-validation" />
+
 👨‍💼 Change <InlineFile file="app.tsx" /> 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
@@ -1,5 +1,7 @@
 # Compound Components Validation
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-patterns/compound-components-validation/solution" />
+
 👨‍💼 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
@@ -1,5 +1,7 @@
 # Compound Components
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-patterns/dad-joke-break-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
@@ -1,5 +1,7 @@
 # Compound Components
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-patterns/intro-to-compound-components" />
+
 <callout-success>
 	**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
@@ -1,5 +1,7 @@
 # Slot Context
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-patterns/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
@@ -1,4 +1,6 @@
 # Slot Context
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-patterns/slot-context/solution" />
+
 👨‍💼 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
@@ -1,5 +1,7 @@
 # Generic Slot Components
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-patterns/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
@@ -1,4 +1,6 @@
 # Generic Slot Components
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-patterns/generic-slot-components/solution" />
+
 👨‍💼 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
@@ -1,5 +1,7 @@
 # Slot Prop
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-patterns/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
@@ -1,5 +1,7 @@
 # Slot Prop
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-patterns/slot-prop/solution" />
+
 👨‍💼 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
@@ -1,4 +1,6 @@
 # Slots
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-patterns/dad-joke-break-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
@@ -1,5 +1,7 @@
 # Slots
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-patterns/intro-to-slots" />
+
 <callout-success>
 	**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
@@ -1,5 +1,7 @@
 # Prop Collections
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-patterns/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
@@ -1,4 +1,6 @@
 # Prop Collections
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-patterns/prop-collections/solution" />
+
 👨‍💼 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
@@ -1,5 +1,7 @@
 # Prop Getters
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-patterns/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
@@ -1,5 +1,7 @@
 # Prop Getters
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-patterns/prop-getters/solution" />
+
 👨‍💼 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
@@ -1,5 +1,7 @@
 # Prop Collections and Getters
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-patterns/dad-joke-break-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
@@ -1,5 +1,7 @@
 # Prop Collections and Getters
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-patterns/intro-to-prop-collections-and-getters" />
+
 <callout-success>
 	**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
@@ -1,5 +1,7 @@
 # Initialize Toggle
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-patterns/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
@@ -1,4 +1,6 @@
 # Initialize Toggle
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-patterns/initialize-toggle/solution" />
+
 👨‍💼 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
@@ -1,5 +1,7 @@
 # Stability
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-patterns/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
@@ -1,3 +1,5 @@
 # Stability
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-patterns/stability/solution" />
+
 👨‍💼 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
@@ -1,5 +1,7 @@
 # State Initializer
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-patterns/dad-joke-break-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
@@ -1,5 +1,7 @@
 # State Initializer
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-patterns/intro-to-state-initializer" />
+
 <callout-success>
 	**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
@@ -1,5 +1,7 @@
 # Default State Reducer
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-patterns/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
@@ -1,5 +1,7 @@
 # Default State Reducer
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-patterns/default-state-reducer/solution" />
+
 👨‍💼 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
@@ -1,4 +1,6 @@
 # State Reducer
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-patterns/dad-joke-break-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
@@ -1,5 +1,7 @@
 # State Reducer
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-patterns/intro-to-state-reducer" />
+
 <callout-success>
 	**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
@@ -1,5 +1,7 @@
 # Control Props
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-patterns/control-props" />
+
 👨‍💼 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

diff --git 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
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-patterns/control-props/solution" />
+
 👨‍💼 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
@@ -1,5 +1,7 @@
 # Control Props
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-patterns/dad-joke-break-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
@@ -1,5 +1,7 @@
 # Control Props
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-patterns/intro-to-control-props" />
+
 <callout-success>
 	**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
@@ -1,3 +1,5 @@
 # Advanced React Patterns 🤯
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-patterns/advanced-react-patterns-outro-v2" />
+
 👨‍💼 Congratulations. You've made it to the end. Awesome work!
diff --git a/exercises/README.mdx b/exercises/README.mdx
@@ -1,5 +1,7 @@
 # Advanced React Patterns 🤯
 
+<EpicVideo url="https://www.epicreact.dev/workshops/advanced-react-patterns/advanced-react-patterns-intro" />
+
 👨‍💼 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!