add videos!

epicweb-dev · Jul 23, 2024 · 33d8edd · 33d8edd
1 parent 39fc87d
commit 33d8edd
Show file tree

Hide file tree

Showing 27 changed files with 445 additions and 80 deletions.
diff --git a/epicshop/package-lock.json b/epicshop/package-lock.json
diff --git a/epicshop/package.json b/epicshop/package.json
@@ -1,8 +1,8 @@
 {
   "type": "module",
   "dependencies": {
-    "@epic-web/workshop-app": "^4.12.4",
-    "@epic-web/workshop-utils": "^4.12.4",
+    "@epic-web/workshop-app": "^4.12.5",
+    "@epic-web/workshop-utils": "^4.12.5",
     "chokidar": "^3.6.0",
     "execa": "^9.3.0",
     "fs-extra": "^11.2.0"

diff --git a/exercises/01.use-state/01.problem.initial-state/README.mdx b/exercises/01.use-state/01.problem.initial-state/README.mdx
@@ -1,5 +1,7 @@
 # Initial State
 
+<EpicVideo url="https://www.epicreact.dev/tutorials/build-react-hooks/use-state/render-an-initial-state" />
+
 👨‍💼 Hello! So here's where we're starting out:
 
 ```tsx

diff --git a/exercises/01.use-state/01.solution.initial-state/README.mdx b/exercises/01.use-state/01.solution.initial-state/README.mdx
@@ -1,4 +1,6 @@
 # Initial State
 
+<EpicVideo url="https://www.epicreact.dev/tutorials/build-react-hooks/use-state/render-an-initial-state/solution" />
+
 👨‍💼 Great work! Now at least we're not just throwing an error. But let's handle
 the state update next.
diff --git a/exercises/01.use-state/02.problem.update-state/README.mdx b/exercises/01.use-state/02.problem.update-state/README.mdx
@@ -1,5 +1,7 @@
 # Update State
 
+<EpicVideo url="https://www.epicreact.dev/tutorials/build-react-hooks/use-state/make-the-setstate-function-work" />
+
 👨‍💼 Alright, right now when you click the button, nothing happens. Let's get it
 to update the state.
 

diff --git a/exercises/01.use-state/02.solution.update-state/README.mdx b/exercises/01.use-state/02.solution.update-state/README.mdx
@@ -1,4 +1,6 @@
 # Update State
 
+<EpicVideo url="https://www.epicreact.dev/tutorials/build-react-hooks/use-state/make-the-setstate-function-work/solution" />
+
 👨‍💼 So we're updating the state value, but it's not actually updating the number
 in the button? What gives?!
diff --git a/exercises/01.use-state/03.problem.re-render/README.mdx b/exercises/01.use-state/03.problem.re-render/README.mdx
@@ -1,5 +1,7 @@
 # Re-render
 
+<EpicVideo url="https://www.epicreact.dev/tutorials/build-react-hooks/use-state/component-doesn-t-re-render-when-state-updates" />
+
 👨‍💼 Ok, so we're initializing our state properly and we're updating the state
 properly as well. The problem is we're not updating the UI when the state gets
 updated. Remember, we're not React. We need to tell React when the state has

diff --git a/exercises/01.use-state/03.solution.re-render/README.mdx b/exercises/01.use-state/03.solution.re-render/README.mdx
@@ -1,5 +1,7 @@
 # Re-render
 
+<EpicVideo url="https://www.epicreact.dev/tutorials/build-react-hooks/use-state/component-doesn-t-re-render-when-state-updates/solution" />
+
 👨‍💼 Great work! Now we're not only updating the state, but we're also triggering
 a re-render so the UI can be updated. Unfortunately that seems to not be working
 either? Let's figure out why.
diff --git a/exercises/01.use-state/04.problem.preserve-state/README.mdx b/exercises/01.use-state/04.problem.preserve-state/README.mdx
@@ -1,5 +1,7 @@
 # Preserve State
 
+<EpicVideo url="https://www.epicreact.dev/tutorials/build-react-hooks/use-state/state-is-reset-to-initialstate-on-each-render" />
+
 👨‍💼 Alright, so there are actually two problems here. First, when the user clicks
 on the button, we update the `state` variable inside the `useState` closure, but
 that variable is not accessible by our component. Our component has its own

diff --git a/exercises/01.use-state/04.solution.preserve-state/README.mdx b/exercises/01.use-state/04.solution.preserve-state/README.mdx
@@ -1,4 +1,6 @@
 # Preserve State
 
+<EpicVideo url="https://www.epicreact.dev/tutorials/build-react-hooks/use-state/state-is-reset-to-initialstate-on-each-render/solution" />
+
 👨‍💼 Great work! Our UI is working properly! By preserving our state we're able to
 make changes to it and render again whenever that value changes.
diff --git a/exercises/01.use-state/FINISHED.mdx b/exercises/01.use-state/FINISHED.mdx
@@ -1,5 +1,7 @@
 # useState
 
+<EpicVideo url="https://www.epicreact.dev/tutorials/build-react-hooks/use-state/dad-joke-and-break-usestate" />
+
 👨‍💼 This is a great time for you to take a break and reflect on your learnings so
 far. Take a moment and then when you're ready, we'll see you in the next
 exercise.

diff --git a/exercises/01.use-state/README.mdx b/exercises/01.use-state/README.mdx
@@ -1,5 +1,7 @@
 # useState
 
+<EpicVideo url="https://www.epicreact.dev/tutorials/build-react-hooks/use-state/introduction-to-usestate" />
+
 The `useState` hook is one of the most common hooks and is a good place for us
 to start because it triggers re-rendering of the component and we can observe
 its effects in the UI.

diff --git a/exercises/02.multiple-hooks/01.problem.phase/README.mdx b/exercises/02.multiple-hooks/01.problem.phase/README.mdx
@@ -1,5 +1,7 @@
 # Render Phase
 
+<EpicVideo url="https://www.epicreact.dev/tutorials/build-react-hooks/multiple-hooks/multiple-calls-to-usestate-breaks-initialstate" />
+
 🧝‍♂️ Hi! I made a change to the code a bit. Now we're rendering two buttons, the
 count button is still there, but now we're also a button for disabling the count
 button. I needed to add another `useState` for that, but it's not working. You

diff --git a/exercises/02.multiple-hooks/01.solution.phase/README.mdx b/exercises/02.multiple-hooks/01.solution.phase/README.mdx
@@ -1,5 +1,7 @@
 # Render Phase
 
+<EpicVideo url="https://www.epicreact.dev/tutorials/build-react-hooks/multiple-hooks/multiple-calls-to-usestate-breaks-initialstate/solution" />
+
 👨‍💼 Great! It's not quite working yet, now if we add
 `console.log({ count, enabled })` to the component, we'll get
 `{ count: 0, enabled: true }` like you'd expect, but when you click the counter

diff --git a/exercises/02.multiple-hooks/02.problem.hook-id/README.mdx b/exercises/02.multiple-hooks/02.problem.hook-id/README.mdx
@@ -1,5 +1,7 @@
 # Hook ID
 
+<EpicVideo url="https://www.epicreact.dev/tutorials/build-react-hooks/multiple-hooks/all-usestate-hooks-are-overwriting-the-same-state" />
+
 👨‍💼 Based on what's happening now, I think we're not isolating the `state`
 between the two hooks. We need to uniquely identify each hook and store their
 state separately.

diff --git a/exercises/02.multiple-hooks/02.solution.hook-id/README.mdx b/exercises/02.multiple-hooks/02.solution.hook-id/README.mdx
@@ -1,5 +1,7 @@
 # Hook ID
 
+<EpicVideo url="https://www.epicreact.dev/tutorials/build-react-hooks/multiple-hooks/all-usestate-hooks-are-overwriting-the-same-state/solution" />
+
 👨‍💼 Hey, that works! And now you understand why it's important to avoid
 conditionally calling hooks or call them in loops. Their call order is their
 only uniquely identifying trait!
diff --git a/exercises/02.multiple-hooks/FINISHED.mdx b/exercises/02.multiple-hooks/FINISHED.mdx
@@ -1,5 +1,7 @@
 # Multiple Hooks
 
+<EpicVideo url="https://www.epicreact.dev/tutorials/build-react-hooks/multiple-hooks/dad-joke-and-break-multiple-hooks" />
+
 👨‍💼 Whew, now we've got multiple `useState` hooks in a single component working!
 It's a good time for a break. Write down what you learned, then we'll see you
 back soon!
diff --git a/exercises/02.multiple-hooks/README.mdx b/exercises/02.multiple-hooks/README.mdx
@@ -1,5 +1,7 @@
 # Multiple Hooks
 
+<EpicVideo url="https://www.epicreact.dev/tutorials/build-react-hooks/multiple-hooks/introduction-to-multiple-hooks" />
+
 Often components require more than a single hook. In fact, often they'll use
 two or more of the `useState` hook. If we tried that with our implementation
 right now things wouldn't work so well and I think you can imagine why.

diff --git a/exercises/03.use-effect/01.problem.callback/README.mdx b/exercises/03.use-effect/01.problem.callback/README.mdx
@@ -1,5 +1,7 @@
 # Callback
 
+<EpicVideo url="https://www.epicreact.dev/tutorials/build-react-hooks/use-effect/replace-react-s-useeffect-with-your-own" />
+
 🧝‍♂️ I've added a `useEffect`, but it's not supported yet so the app's busted:
 
 ```tsx

diff --git a/exercises/03.use-effect/01.solution.callback/README.mdx b/exercises/03.use-effect/01.solution.callback/README.mdx
@@ -1,3 +1,5 @@
 # Callback
 
+<EpicVideo url="https://www.epicreact.dev/tutorials/build-react-hooks/use-effect/replace-react-s-useeffect-with-your-own/solution" />
+
 👨‍💼 Great job! Now, can you handle the dependency array?
diff --git a/exercises/03.use-effect/02.problem.dependencies/README.mdx b/exercises/03.use-effect/02.problem.dependencies/README.mdx
@@ -1,5 +1,7 @@
 # Dependencies
 
+<EpicVideo url="https://www.epicreact.dev/tutorials/build-react-hooks/use-effect/requirements-for-the-dependency-array" />
+
 🧝‍♂️ I've updated the `useEffect`:
 
 ```tsx

diff --git a/exercises/03.use-effect/02.solution.dependencies/README.mdx b/exercises/03.use-effect/02.solution.dependencies/README.mdx
@@ -1,3 +1,5 @@
 # Dependencies
 
+<EpicVideo url="https://www.epicreact.dev/tutorials/build-react-hooks/use-effect/requirements-for-the-dependency-array/solution" />
+
 👨‍💼 Great work! Now the `useEffect` dependencies work. Well done 👏
diff --git a/exercises/03.use-effect/FINISHED.mdx b/exercises/03.use-effect/FINISHED.mdx
@@ -1,5 +1,7 @@
 # useEffect
 
+<EpicVideo url="https://www.epicreact.dev/tutorials/build-react-hooks/use-effect/dad-joke-and-break-use-effect" />
+
 👨‍💼 That's as far as we're going to take `useEffect`. Unfortunately there's just
 not a good way to handle the cleanup function since we don't have a way to track
 when a component gets added and removed from the page because the API React

diff --git a/exercises/03.use-effect/README.mdx b/exercises/03.use-effect/README.mdx
@@ -1,5 +1,7 @@
 # useEffect
 
+<EpicVideo url="https://www.epicreact.dev/tutorials/build-react-hooks/use-effect/introduction-to-useeffect" />
+
 The `useEffect` hook has a simple API:
 
 ```tsx

diff --git a/exercises/FINISHED.mdx b/exercises/FINISHED.mdx
@@ -1,5 +1,7 @@
 # Build React Hooks 🪝
 
+<EpicVideo url="https://www.epicreact.dev/tutorials/build-react-hooks/outro-build-react-hooks/build-react-hooks-outro" />
+
 Hooray! You're all done! 👏👏
 
 Of course there's much more we can do for our implementations to make them more

diff --git a/exercises/README.mdx b/exercises/README.mdx
@@ -1,5 +1,7 @@
 # Build React Hooks 🪝
 
+<EpicVideo url="https://www.epicreact.dev/tutorials/build-react-hooks/introduction-build-react-hooks/build-react-hooks-introduction" />
+
 👨‍💼 Hello, my name is Peter the Product Manager. I'm here to help you get
 oriented and to give you your assignments for the workshop!
 

diff --git a/package.json b/package.json
@@ -5,6 +5,8 @@
     "title": "Build React Hooks 🪝",
     "subtitle": "Understand how React hooks work by building them from scratch",
     "githubRoot": "https://github.com/epicweb-dev/build-react-hooks/blob/main",
+    "epicWorkshopSlug": "build-react-hooks",
+    "epicWorkshopHost": "www.epicreact.dev",
     "instructor": {
       "name": "Kent C. Dodds",
       "avatar": "/images/instructor.png",