Skip to content

Commit 33d8edd

Browse files
kentcdoddskentcdodds
committed
add videos!
1 parent 39fc87d commit 33d8edd

File tree

27 files changed

+445
-80
lines changed

27 files changed

+445
-80
lines changed

‎epicshop/package-lock.json

+393-78
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎epicshop/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
{
22
"type": "module",
33
"dependencies": {
4-
"@epic-web/workshop-app": "^4.12.4",
5-
"@epic-web/workshop-utils": "^4.12.4",
4+
"@epic-web/workshop-app": "^4.12.5",
5+
"@epic-web/workshop-utils": "^4.12.5",
66
"chokidar": "^3.6.0",
77
"execa": "^9.3.0",
88
"fs-extra": "^11.2.0"

‎exercises/01.use-state/01.problem.initial-state/README.mdx

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# Initial State
22

3+
<EpicVideo url="https://www.epicreact.dev/tutorials/build-react-hooks/use-state/render-an-initial-state" />
4+
35
👨‍💼 Hello! So here's where we're starting out:
46

57
```tsx

‎exercises/01.use-state/01.solution.initial-state/README.mdx

+2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
# Initial State
22

3+
<EpicVideo url="https://www.epicreact.dev/tutorials/build-react-hooks/use-state/render-an-initial-state/solution" />
4+
35
👨‍💼 Great work! Now at least we're not just throwing an error. But let's handle
46
the state update next.

‎exercises/01.use-state/02.problem.update-state/README.mdx

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# Update State
22

3+
<EpicVideo url="https://www.epicreact.dev/tutorials/build-react-hooks/use-state/make-the-setstate-function-work" />
4+
35
👨‍💼 Alright, right now when you click the button, nothing happens. Let's get it
46
to update the state.
57

‎exercises/01.use-state/02.solution.update-state/README.mdx

+2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
# Update State
22

3+
<EpicVideo url="https://www.epicreact.dev/tutorials/build-react-hooks/use-state/make-the-setstate-function-work/solution" />
4+
35
👨‍💼 So we're updating the state value, but it's not actually updating the number
46
in the button? What gives?!

‎exercises/01.use-state/03.problem.re-render/README.mdx

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# Re-render
22

3+
<EpicVideo url="https://www.epicreact.dev/tutorials/build-react-hooks/use-state/component-doesn-t-re-render-when-state-updates" />
4+
35
👨‍💼 Ok, so we're initializing our state properly and we're updating the state
46
properly as well. The problem is we're not updating the UI when the state gets
57
updated. Remember, we're not React. We need to tell React when the state has

‎exercises/01.use-state/03.solution.re-render/README.mdx

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# Re-render
22

3+
<EpicVideo url="https://www.epicreact.dev/tutorials/build-react-hooks/use-state/component-doesn-t-re-render-when-state-updates/solution" />
4+
35
👨‍💼 Great work! Now we're not only updating the state, but we're also triggering
46
a re-render so the UI can be updated. Unfortunately that seems to not be working
57
either? Let's figure out why.

‎exercises/01.use-state/04.problem.preserve-state/README.mdx

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# Preserve State
22

3+
<EpicVideo url="https://www.epicreact.dev/tutorials/build-react-hooks/use-state/state-is-reset-to-initialstate-on-each-render" />
4+
35
👨‍💼 Alright, so there are actually two problems here. First, when the user clicks
46
on the button, we update the `state` variable inside the `useState` closure, but
57
that variable is not accessible by our component. Our component has its own

‎exercises/01.use-state/04.solution.preserve-state/README.mdx

+2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
# Preserve State
22

3+
<EpicVideo url="https://www.epicreact.dev/tutorials/build-react-hooks/use-state/state-is-reset-to-initialstate-on-each-render/solution" />
4+
35
👨‍💼 Great work! Our UI is working properly! By preserving our state we're able to
46
make changes to it and render again whenever that value changes.

‎exercises/01.use-state/FINISHED.mdx

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# useState
22

3+
<EpicVideo url="https://www.epicreact.dev/tutorials/build-react-hooks/use-state/dad-joke-and-break-usestate" />
4+
35
👨‍💼 This is a great time for you to take a break and reflect on your learnings so
46
far. Take a moment and then when you're ready, we'll see you in the next
57
exercise.

‎exercises/01.use-state/README.mdx

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# useState
22

3+
<EpicVideo url="https://www.epicreact.dev/tutorials/build-react-hooks/use-state/introduction-to-usestate" />
4+
35
The `useState` hook is one of the most common hooks and is a good place for us
46
to start because it triggers re-rendering of the component and we can observe
57
its effects in the UI.

‎exercises/02.multiple-hooks/01.problem.phase/README.mdx

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# Render Phase
22

3+
<EpicVideo url="https://www.epicreact.dev/tutorials/build-react-hooks/multiple-hooks/multiple-calls-to-usestate-breaks-initialstate" />
4+
35
🧝‍♂️ Hi! I made a change to the code a bit. Now we're rendering two buttons, the
46
count button is still there, but now we're also a button for disabling the count
57
button. I needed to add another `useState` for that, but it's not working. You

‎exercises/02.multiple-hooks/01.solution.phase/README.mdx

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# Render Phase
22

3+
<EpicVideo url="https://www.epicreact.dev/tutorials/build-react-hooks/multiple-hooks/multiple-calls-to-usestate-breaks-initialstate/solution" />
4+
35
👨‍💼 Great! It's not quite working yet, now if we add
46
`console.log({ count, enabled })` to the component, we'll get
57
`{ count: 0, enabled: true }` like you'd expect, but when you click the counter

‎exercises/02.multiple-hooks/02.problem.hook-id/README.mdx

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# Hook ID
22

3+
<EpicVideo url="https://www.epicreact.dev/tutorials/build-react-hooks/multiple-hooks/all-usestate-hooks-are-overwriting-the-same-state" />
4+
35
👨‍💼 Based on what's happening now, I think we're not isolating the `state`
46
between the two hooks. We need to uniquely identify each hook and store their
57
state separately.

‎exercises/02.multiple-hooks/02.solution.hook-id/README.mdx

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# Hook ID
22

3+
<EpicVideo url="https://www.epicreact.dev/tutorials/build-react-hooks/multiple-hooks/all-usestate-hooks-are-overwriting-the-same-state/solution" />
4+
35
👨‍💼 Hey, that works! And now you understand why it's important to avoid
46
conditionally calling hooks or call them in loops. Their call order is their
57
only uniquely identifying trait!

‎exercises/02.multiple-hooks/FINISHED.mdx

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# Multiple Hooks
22

3+
<EpicVideo url="https://www.epicreact.dev/tutorials/build-react-hooks/multiple-hooks/dad-joke-and-break-multiple-hooks" />
4+
35
👨‍💼 Whew, now we've got multiple `useState` hooks in a single component working!
46
It's a good time for a break. Write down what you learned, then we'll see you
57
back soon!

‎exercises/02.multiple-hooks/README.mdx

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# Multiple Hooks
22

3+
<EpicVideo url="https://www.epicreact.dev/tutorials/build-react-hooks/multiple-hooks/introduction-to-multiple-hooks" />
4+
35
Often components require more than a single hook. In fact, often they'll use
46
two or more of the `useState` hook. If we tried that with our implementation
57
right now things wouldn't work so well and I think you can imagine why.

‎exercises/03.use-effect/01.problem.callback/README.mdx

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# Callback
22

3+
<EpicVideo url="https://www.epicreact.dev/tutorials/build-react-hooks/use-effect/replace-react-s-useeffect-with-your-own" />
4+
35
🧝‍♂️ I've added a `useEffect`, but it's not supported yet so the app's busted:
46

57
```tsx

‎exercises/03.use-effect/01.solution.callback/README.mdx

+2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
11
# Callback
22

3+
<EpicVideo url="https://www.epicreact.dev/tutorials/build-react-hooks/use-effect/replace-react-s-useeffect-with-your-own/solution" />
4+
35
👨‍💼 Great job! Now, can you handle the dependency array?

‎exercises/03.use-effect/02.problem.dependencies/README.mdx

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# Dependencies
22

3+
<EpicVideo url="https://www.epicreact.dev/tutorials/build-react-hooks/use-effect/requirements-for-the-dependency-array" />
4+
35
🧝‍♂️ I've updated the `useEffect`:
46

57
```tsx

‎exercises/03.use-effect/02.solution.dependencies/README.mdx

+2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
11
# Dependencies
22

3+
<EpicVideo url="https://www.epicreact.dev/tutorials/build-react-hooks/use-effect/requirements-for-the-dependency-array/solution" />
4+
35
👨‍💼 Great work! Now the `useEffect` dependencies work. Well done 👏

‎exercises/03.use-effect/FINISHED.mdx

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# useEffect
22

3+
<EpicVideo url="https://www.epicreact.dev/tutorials/build-react-hooks/use-effect/dad-joke-and-break-use-effect" />
4+
35
👨‍💼 That's as far as we're going to take `useEffect`. Unfortunately there's just
46
not a good way to handle the cleanup function since we don't have a way to track
57
when a component gets added and removed from the page because the API React

‎exercises/03.use-effect/README.mdx

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# useEffect
22

3+
<EpicVideo url="https://www.epicreact.dev/tutorials/build-react-hooks/use-effect/introduction-to-useeffect" />
4+
35
The `useEffect` hook has a simple API:
46

57
```tsx

‎exercises/FINISHED.mdx

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# Build React Hooks 🪝
22

3+
<EpicVideo url="https://www.epicreact.dev/tutorials/build-react-hooks/outro-build-react-hooks/build-react-hooks-outro" />
4+
35
Hooray! You're all done! 👏👏
46

57
Of course there's much more we can do for our implementations to make them more

‎exercises/README.mdx

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# Build React Hooks 🪝
22

3+
<EpicVideo url="https://www.epicreact.dev/tutorials/build-react-hooks/introduction-build-react-hooks/build-react-hooks-introduction" />
4+
35
👨‍💼 Hello, my name is Peter the Product Manager. I'm here to help you get
46
oriented and to give you your assignments for the workshop!
57

‎package.json

+2
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@
55
"title": "Build React Hooks 🪝",
66
"subtitle": "Understand how React hooks work by building them from scratch",
77
"githubRoot": "https://github.com/epicweb-dev/build-react-hooks/blob/main",
8+
"epicWorkshopSlug": "build-react-hooks",
9+
"epicWorkshopHost": "www.epicreact.dev",
810
"instructor": {
911
"name": "Kent C. Dodds",
1012
"avatar": "/images/instructor.png",

0 commit comments

Comments
 (0)