add (most) videos

epicweb-dev · Aug 20, 2024 · 27d00ab · 27d00ab
1 parent 96512a1
commit 27d00ab
Show file tree

Hide file tree

Showing 49 changed files with 99 additions and 1 deletion.
diff --git a/exercises/01.managing-ui-state/01.problem.use-state/README.mdx b/exercises/01.managing-ui-state/01.problem.use-state/README.mdx
@@ -1,5 +1,7 @@
 # useState
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-hooks/usestate" />
+
 👨‍💼 We've got you working on a blog search page. Allow me to introduce you to
 🧝‍♂️ Kellie the coworker who put this together.
 

diff --git a/exercises/01.managing-ui-state/01.solution.use-state/README.mdx b/exercises/01.managing-ui-state/01.solution.use-state/README.mdx
@@ -1,5 +1,7 @@
 # useState
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-hooks/usestate/solution" />
+
 👨‍💼 Super! You've successfully filtered the blog posts based on what the user has
 typed. This is where we start getting into why React is so great. It makes doing
 stateful dynamic things like this super easy compared to the alternative of

diff --git a/exercises/01.managing-ui-state/02.problem.control/README.mdx b/exercises/01.managing-ui-state/02.problem.control/README.mdx
@@ -1,5 +1,7 @@
 # Controlling Inputs
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-hooks/controlling-inputs" />
+
 👨‍💼 When the user clicks on one of the checkboxes, we want to auto-fill that
 value into the search input for them. This means we need to "control" the input
 value so we can set it programmatically. We can do this by using the `value`

diff --git a/exercises/01.managing-ui-state/02.solution.control/README.mdx b/exercises/01.managing-ui-state/02.solution.control/README.mdx
@@ -1,5 +1,7 @@
 # Controlling Inputs
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-hooks/controlling-inputs/solution" />
+
 👨‍💼 Great! Now you can add/remove each of these tags to the search when they're
 checked. Programmatically controlling the input value is why you use the `value`
 prop.

diff --git a/exercises/01.managing-ui-state/03.problem.derive/README.mdx b/exercises/01.managing-ui-state/03.problem.derive/README.mdx
@@ -1,5 +1,7 @@
 # Derive State
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-hooks/derive-state" />
+
 🦉 Often, it can be easy to think you need to keep track of two elements of
 state when you really only need one. For example, let's say you have a counter
 that will display the number of times a user has clicked a button and also it

diff --git a/exercises/01.managing-ui-state/03.solution.derive/README.mdx b/exercises/01.managing-ui-state/03.solution.derive/README.mdx
@@ -1,5 +1,7 @@
 # Derive State
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-hooks/derive-state/solution" />
+
 👨‍💼 Awesome work! It looks really cool to have the checkboxes check and uncheck
 automatically as you type! We're now controlling both all the inputs on here
 all based on a single element of state. Well done.
diff --git a/exercises/01.managing-ui-state/04.problem.init/README.mdx b/exercises/01.managing-ui-state/04.problem.init/README.mdx
@@ -1,5 +1,7 @@
 # Initialize State
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-hooks/initialize-state" />
+
 👨‍💼 We want users to be able to share a link to this page with a prefilled
 search. For example:
 [`https://www.example.com/search?query=cat+dog`](/app/playground?query=cat+dog).

diff --git a/exercises/01.managing-ui-state/04.solution.init/README.mdx b/exercises/01.managing-ui-state/04.solution.init/README.mdx
@@ -1,4 +1,6 @@
 # Initialize State
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-hooks/initialize-state/solution" />
+
 👨‍💼 Great! Now our users can share links to this page that initialize the search
 to something specific.
diff --git a/exercises/01.managing-ui-state/05.problem.cb/README.mdx b/exercises/01.managing-ui-state/05.problem.cb/README.mdx
@@ -1,5 +1,7 @@
 # Init Callback
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-hooks/init-callback" />
+
 🦉 There's one more thing you should know about `useState` initialization and
 that is a small performance optimization. `useState` can accept a function.
 

diff --git a/exercises/01.managing-ui-state/05.solution.cb/README.mdx b/exercises/01.managing-ui-state/05.solution.cb/README.mdx
@@ -1,4 +1,6 @@
 # Init Callback
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-hooks/init-callback/solution" />
+
 👨‍💼 Great! This isn't 100% necessary as a performance optimization, but it's easy
 and doesn't hurt readability so we may as well!
diff --git a/exercises/01.managing-ui-state/FINISHED.mdx b/exercises/01.managing-ui-state/FINISHED.mdx
@@ -1,4 +1,6 @@
 # Managing UI State
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-hooks/dad-joke-break-managing-ui-state" />
+
 👨‍💼 Great work! You now know how to manage client-side component state in a React
 application!
diff --git a/exercises/01.managing-ui-state/README.mdx b/exercises/01.managing-ui-state/README.mdx
@@ -1,5 +1,7 @@
 # Managing UI State
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-hooks/intro-to-managing-ui-state" />
+
 Dynamic applications allow users to interact and make changes to what they see
 on the page and the application should respond by updating the UI based on what
 the user has done. We accomplish this by using state. When state changes (for

diff --git a/exercises/02.side-effects/01.problem.effects/README.mdx b/exercises/02.side-effects/01.problem.effects/README.mdx
@@ -1,5 +1,7 @@
 # useEffect
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-hooks/useeffect" />
+
 👨‍💼 We want the query to update as the query params change through a
 [`popstate`](https://developer.mozilla.org/en-US/docs/Web/API/Window/popstate_event)
 event. Once you added the `useEffect` hook, you then have to prevent the default

diff --git a/exercises/02.side-effects/01.solution.effects/README.mdx b/exercises/02.side-effects/01.solution.effects/README.mdx
@@ -1,5 +1,7 @@
 # useEffect
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-hooks/useeffect/solution" />
+
 👨‍💼 Great! Now you know how to make sure side-effects like global event listeners
 can be registered from within a React component and how to integrate that with
 the state of your React component. But we've still got a bug, so let's get to

diff --git a/exercises/02.side-effects/02.problem.cleanup/README.mdx b/exercises/02.side-effects/02.problem.cleanup/README.mdx
@@ -1,5 +1,7 @@
 # Effect Cleanup
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-hooks/effect-cleanup" />
+
 👨‍💼 We've got an issue with our `useEffect` callback here that needs some
 attention. You won't be able to tell without a little bit extra in the app, so
 Kellie (🧝‍♂️) has put together a demo.

diff --git a/exercises/02.side-effects/02.solution.cleanup/README.mdx b/exercises/02.side-effects/02.solution.cleanup/README.mdx
@@ -1,4 +1,6 @@
 # Effect Cleanup
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-hooks/effect-cleanup/solution" />
+
 👨‍💼 Phew! I'm glad we're not going to run into memory leaks now. Our users
 (especially) those on low-end devices will thank us for it!
diff --git a/exercises/02.side-effects/FINISHED.mdx b/exercises/02.side-effects/FINISHED.mdx
@@ -1,5 +1,7 @@
 # Side-Effects
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-hooks/dad-joke-break-side-effects" />
+
 👨‍💼 Great work! You've learned the basics of how to trigger side-effects when our
 component is added to the page and how to properly clean up when it's through.
 You've not learned everything there is to know about `useEffect` yet (that

diff --git a/exercises/02.side-effects/README.mdx b/exercises/02.side-effects/README.mdx
@@ -1,5 +1,7 @@
 # Side-Effects
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-hooks/intro-to-side-effects" />
+
 `useEffect` is a built-in hook that allows you to run some custom code
 after React renders (and re-renders) your component to the DOM. It accepts a
 callback function which React will call after the DOM has been updated:

diff --git a/exercises/03.lifting-state/01.problem.lift/README.mdx b/exercises/03.lifting-state/01.problem.lift/README.mdx
@@ -1,5 +1,7 @@
 # Lift State
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-hooks/lift-state" />
+
 🧝‍♂️ I refactored the app a bit. In the process I kinda broke stuff and you'll be
 required to fix it. Feel free to <DiffLink app1={-1} app2={0}>check the diff</DiffLink>
 to know what I've done. I pretty much just moved stuff into separate components

diff --git a/exercises/03.lifting-state/01.solution.lift/README.mdx b/exercises/03.lifting-state/01.solution.lift/README.mdx
@@ -1,5 +1,7 @@
 # Lift State
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-hooks/lift-state/solution" />
+
 👨‍💼 Great! It's working now!
 
 Hmmm... What's that I hear? It's the sound of a new requirement coming in! 😆
diff --git a/exercises/03.lifting-state/02.problem.lift-array/README.mdx b/exercises/03.lifting-state/02.problem.lift-array/README.mdx
@@ -1,5 +1,7 @@
 # Lift More State
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-hooks/lift-more-state" />
+
 👨‍💼 The users loved 🧝‍♂️ Kellie's like feature so much they want to have the blog
 posts sorted by whether they're favorites.
 

diff --git a/exercises/03.lifting-state/02.solution.lift-array/README.mdx b/exercises/03.lifting-state/02.solution.lift-array/README.mdx
@@ -1,3 +1,5 @@
 # Lift More State
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-hooks/lift-more-state/solution" />
+
 👨‍💼 Great job! Unfortunately... I have some bad news. Let's talk about that next.
diff --git a/exercises/03.lifting-state/03.problem.colocate/README.mdx b/exercises/03.lifting-state/03.problem.colocate/README.mdx
@@ -1,5 +1,7 @@
 # Colocate State
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-hooks/colocate-state" />
+
 👨‍💼 Well, the users thought they wanted the articles sorted by whether they were
 favorited... But after using the feature, they found it to be jarring and
 confusing. So we're going to need you to remove that feature. Kellie already

diff --git a/exercises/03.lifting-state/03.solution.colocate/README.mdx b/exercises/03.lifting-state/03.solution.colocate/README.mdx
@@ -1,5 +1,7 @@
 # Colocate State
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-hooks/colocate-state/solution" />
+
 👨‍💼 Awesome! You now know how to colocate state! Try to do this as much as
 possible in the future.
 

diff --git a/exercises/03.lifting-state/FINISHED.mdx b/exercises/03.lifting-state/FINISHED.mdx
@@ -1,3 +1,5 @@
 # Lifting State
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-hooks/dad-joke-break-lifting-state" />
+
 👨‍💼 Hooray! You've learned how to move state around as needed like a pro!
diff --git a/exercises/03.lifting-state/README.mdx b/exercises/03.lifting-state/README.mdx
@@ -1,5 +1,7 @@
 # Lifting State
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-hooks/intro-to-lifting-state" />
+
 A common question from React beginners is how to share state between two sibling
 components. The answer is to
 ["lift the state"](https://react.dev/learn/sharing-state-between-components)

diff --git a/exercises/04.dom/01.problem.ref/README.mdx b/exercises/04.dom/01.problem.ref/README.mdx
@@ -1,5 +1,7 @@
 # Refs
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-hooks/refs" />
+
 👨‍💼 Our users want a button they can click to increment a count a bunch of times.
 They also like fancy things. So we're going to package it in a fancy way.
 

diff --git a/exercises/04.dom/01.solution.ref/README.mdx b/exercises/04.dom/01.solution.ref/README.mdx
@@ -1,3 +1,5 @@
 # Refs
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-hooks/refs/solution" />
+
 👨‍💼 Great job! Now our users have a fancy counter!
diff --git a/exercises/04.dom/02.problem.deps/README.mdx b/exercises/04.dom/02.problem.deps/README.mdx
@@ -1,5 +1,7 @@
 # Dependencies
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-hooks/dependencies" />
+
 👨‍💼 Our users wanted to be able to control `vanilla-tilt` a bit. Some of them
 like the speed and glare to look different. So Kellie 🧝‍♂️ added a form that will
 allow them to control those values. This is working great, but something we

diff --git a/exercises/04.dom/02.solution.deps/README.mdx b/exercises/04.dom/02.solution.deps/README.mdx
@@ -1,5 +1,7 @@
 # Dependencies
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-hooks/dependencies/solution" />
+
 👨‍💼 Great! But... ummm... we didn't actually solve the problem. It's still
 getting re-initialized whenever you click the count button. That's not good.
 Let's look into why and fix it.
diff --git a/exercises/04.dom/03.problem.primitives/README.mdx b/exercises/04.dom/03.problem.primitives/README.mdx
@@ -1,5 +1,7 @@
 # Primitive Dependencies
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-hooks/primitive-dependencies" />
+
 👨‍💼 Our users are annoyed. Whenever they click the incrementing button in the
 middle, the tilt effect is reset. You can reproduce this more easily by clicking
 one of the corners of the button.

diff --git a/exercises/04.dom/03.solution.primitives/README.mdx b/exercises/04.dom/03.solution.primitives/README.mdx
@@ -1,5 +1,7 @@
 # Primitive Dependencies
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-hooks/primitive-dependencies/solution" />
+
 👨‍💼 This is probably one of the more annoying parts about dependency arrays.
 Luckily modern React applications don't need to reach for `useEffect` for many
 use cases (thanks to frameworks like Remix), but it's important for you to

diff --git a/exercises/04.dom/FINISHED.mdx b/exercises/04.dom/FINISHED.mdx
@@ -1,5 +1,7 @@
 # DOM Side-Effects
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-hooks/dad-joke-break-dom-side-effects" />
+
 👨‍💼 You did well! Now you know how to properly integrate third party DOM
 libraries with your React app. You can apply this same knowledge to other
 libraries that help you interact with other browser APIs as well. Good job!
diff --git a/exercises/04.dom/README.mdx b/exercises/04.dom/README.mdx
@@ -1,5 +1,7 @@
 # DOM Side-Effects
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-hooks/intro-to-dom-side-effects" />
+
 Often when working with React you'll need to interact with the DOM directly. You
 may need to use a vanilla-js (non-framework-specific) library that needs to
 interact with directly with the DOM. Often to make a UI accessible you need to

diff --git a/exercises/05.unique-ids/01.problem.use-id/README.mdx b/exercises/05.unique-ids/01.problem.use-id/README.mdx
@@ -1,5 +1,7 @@
 # useId
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-hooks/useid" />
+
 🧝‍♂️ I've made a few changes to our `vanilla-tilt` app to try and make a reusable
 `Field` component. But there's a problem. When I try to click on the label for
 a field, it doesn't focus the input. This is because we're missing an `id`.

diff --git a/exercises/05.unique-ids/01.solution.use-id/README.mdx b/exercises/05.unique-ids/01.solution.use-id/README.mdx
@@ -1,3 +1,5 @@
 # useId
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-hooks/useid/solution" />
+
 👨‍💼 Great, now our labels are properly associated and that makes our users happy.
diff --git a/exercises/05.unique-ids/FINISHED.mdx b/exercises/05.unique-ids/FINISHED.mdx
@@ -1,3 +1,5 @@
 # Unique IDs
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-hooks/dad-joke-break-unique-ids" />
+
 👨‍💼 Great work! Now you know how to make globally unique IDs for your React apps!
diff --git a/exercises/05.unique-ids/README.mdx b/exercises/05.unique-ids/README.mdx
@@ -1,5 +1,7 @@
 # Unique IDs
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-hooks/intro-to-unique-ids" />
+
 To build accessible forms, you need to ensure that each input element has a
 globally unique `id` attribute, and that the corresponding label element has a
 `for` attribute that matches the input's `id`. This allows screen readers to

diff --git a/exercises/06.tic-tac-toe/01.problem.set-state-callback/README.mdx b/exercises/06.tic-tac-toe/01.problem.set-state-callback/README.mdx
@@ -1,5 +1,7 @@
 # setState callback
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-hooks/setstate-callback" />
+
 👨‍💼 Our users want to play tic-tac-toe.
 
 <callout-info class="aside">

diff --git a/exercises/06.tic-tac-toe/01.solution.set-state-callback/README.mdx b/exercises/06.tic-tac-toe/01.solution.set-state-callback/README.mdx
@@ -1,4 +1,6 @@
 # Real World Review: Tic Tac Toe
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-hooks/setstate-callback/solution" />
+
 👨‍💼 Awesome! Now our users can play tic-tac-toe! They're thrilled. But you know,
 they kinda want more... As is often the case. We call this "job security!" 😆
diff --git a/exercises/06.tic-tac-toe/02.problem.local-storage/README.mdx b/exercises/06.tic-tac-toe/02.problem.local-storage/README.mdx
@@ -1,5 +1,7 @@
 # Preserve State in localStorage
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-hooks/preserve-state-in-localstorage" />
+
 👨‍💼 Our customers want to be able to close the tab in the middle of a game and
 then resume the game later. Can you store the game's state in `localStorage`?
 

diff --git a/exercises/06.tic-tac-toe/02.solution.local-storage/README.mdx b/exercises/06.tic-tac-toe/02.solution.local-storage/README.mdx
@@ -1,5 +1,7 @@
 # Preserve State in localStorage
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-hooks/preserve-state-in-localstorage/solution" />
+
 👨‍💼 Stellar work! Now our users can refresh the page and they'll be right back
 where they started...
 

diff --git a/exercises/06.tic-tac-toe/03.problem.history/README.mdx b/exercises/06.tic-tac-toe/03.problem.history/README.mdx
@@ -1,5 +1,7 @@
 # Add Game History Feature
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-hooks/add-game-history-feature" />
+
 👨‍💼 Sometimes users are playing tic-tac-toe against their children and their kids
 want to change their move when they lose 😆 So we're going to add a feature that
 allows users to go backward through the game and change moves.

diff --git a/exercises/06.tic-tac-toe/03.solution.history/README.mdx b/exercises/06.tic-tac-toe/03.solution.history/README.mdx
@@ -1,3 +1,5 @@
 # Add Game History Feature
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-hooks/add-game-history-feature/solution" />
+
 👨‍💼 Hey, great job! Our users are really happy with what you've put together 👏
diff --git a/exercises/06.tic-tac-toe/FINISHED.mdx b/exercises/06.tic-tac-toe/FINISHED.mdx
@@ -1,3 +1,5 @@
 # Tic Tac Toe
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-hooks/dad-joke-break-tic-tac-toe" />
+
 👨‍💼 Congratulations! You now have a great handle on `useState` and `useEffect`.
diff --git a/exercises/06.tic-tac-toe/README.mdx b/exercises/06.tic-tac-toe/README.mdx
@@ -1,5 +1,7 @@
 # Tic Tac Toe
 
+<EpicVideo url="https://www.epicreact.dev/workshops/react-hooks/intro-to-tic-tac-toe" />
+
 This exercise is just to give you more practice with `useState` and `useEffect`.
 For the most part, this is just review, but there is one thing we'll be doing
 in this exercise we haven't done yet with `useState` and that is, it can

diff --git a/exercises/FINISHED.mdx b/exercises/FINISHED.mdx
@@ -1,5 +1,7 @@
 # React Hooks 🎣
 
+{/* TODO: add this video */}
+
 👨‍💼 You've done an awesome job. Now you understand the foundational hooks with
 React and you're prepared to learn some of the more advanced hooks that React
 has to offer. Great job!
diff --git a/exercises/README.mdx b/exercises/README.mdx
@@ -1,5 +1,7 @@
 # React Hooks 🎣
 
+{/* TODO: add this video */}
+
 👨‍💼 Hello! I'm Peter the Product manager and I'm here to help guide you through
 this workshop. I'll be there to tell you what our users want and to help you
 understand the requirements of the tasks you'll be working on.

diff --git a/package.json b/package.json
@@ -4,7 +4,9 @@
   "epicshop": {
     "title": "React Hooks 🎣",
     "subtitle": "Understand the building blocks of React",
-    "githubRoot": "https://github.com/epicweb-dev/react-hooks/blob/main",
+    "githubRepo": "https://github.com/epicweb-dev/react-hooks",
+    "epicWorkshopHost": "www.epicreact.dev",
+    "epicWorkshopSlug": "react-hooks",
     "instructor": {
       "name": "Kent C. Dodds",
       "avatar": "/images/instructor.png",