From 27d00ab9b3d378eac87ca5025742db709f3e492f Mon Sep 17 00:00:00 2001 From: "Kent C. Dodds" Date: Tue, 20 Aug 2024 13:47:54 -0600 Subject: [PATCH] add (most) videos --- .../01.managing-ui-state/01.problem.use-state/README.mdx | 2 ++ .../01.managing-ui-state/01.solution.use-state/README.mdx | 2 ++ exercises/01.managing-ui-state/02.problem.control/README.mdx | 2 ++ exercises/01.managing-ui-state/02.solution.control/README.mdx | 2 ++ exercises/01.managing-ui-state/03.problem.derive/README.mdx | 2 ++ exercises/01.managing-ui-state/03.solution.derive/README.mdx | 2 ++ exercises/01.managing-ui-state/04.problem.init/README.mdx | 2 ++ exercises/01.managing-ui-state/04.solution.init/README.mdx | 2 ++ exercises/01.managing-ui-state/05.problem.cb/README.mdx | 2 ++ exercises/01.managing-ui-state/05.solution.cb/README.mdx | 2 ++ exercises/01.managing-ui-state/FINISHED.mdx | 2 ++ exercises/01.managing-ui-state/README.mdx | 2 ++ exercises/02.side-effects/01.problem.effects/README.mdx | 2 ++ exercises/02.side-effects/01.solution.effects/README.mdx | 2 ++ exercises/02.side-effects/02.problem.cleanup/README.mdx | 2 ++ exercises/02.side-effects/02.solution.cleanup/README.mdx | 2 ++ exercises/02.side-effects/FINISHED.mdx | 2 ++ exercises/02.side-effects/README.mdx | 2 ++ exercises/03.lifting-state/01.problem.lift/README.mdx | 2 ++ exercises/03.lifting-state/01.solution.lift/README.mdx | 2 ++ exercises/03.lifting-state/02.problem.lift-array/README.mdx | 2 ++ exercises/03.lifting-state/02.solution.lift-array/README.mdx | 2 ++ exercises/03.lifting-state/03.problem.colocate/README.mdx | 2 ++ exercises/03.lifting-state/03.solution.colocate/README.mdx | 2 ++ exercises/03.lifting-state/FINISHED.mdx | 2 ++ exercises/03.lifting-state/README.mdx | 2 ++ exercises/04.dom/01.problem.ref/README.mdx | 2 ++ exercises/04.dom/01.solution.ref/README.mdx | 2 ++ exercises/04.dom/02.problem.deps/README.mdx | 2 ++ exercises/04.dom/02.solution.deps/README.mdx | 2 ++ exercises/04.dom/03.problem.primitives/README.mdx | 2 ++ exercises/04.dom/03.solution.primitives/README.mdx | 2 ++ exercises/04.dom/FINISHED.mdx | 2 ++ exercises/04.dom/README.mdx | 2 ++ exercises/05.unique-ids/01.problem.use-id/README.mdx | 2 ++ exercises/05.unique-ids/01.solution.use-id/README.mdx | 2 ++ exercises/05.unique-ids/FINISHED.mdx | 2 ++ exercises/05.unique-ids/README.mdx | 2 ++ .../06.tic-tac-toe/01.problem.set-state-callback/README.mdx | 2 ++ .../06.tic-tac-toe/01.solution.set-state-callback/README.mdx | 2 ++ exercises/06.tic-tac-toe/02.problem.local-storage/README.mdx | 2 ++ exercises/06.tic-tac-toe/02.solution.local-storage/README.mdx | 2 ++ exercises/06.tic-tac-toe/03.problem.history/README.mdx | 2 ++ exercises/06.tic-tac-toe/03.solution.history/README.mdx | 2 ++ exercises/06.tic-tac-toe/FINISHED.mdx | 2 ++ exercises/06.tic-tac-toe/README.mdx | 2 ++ exercises/FINISHED.mdx | 2 ++ exercises/README.mdx | 2 ++ package.json | 4 +++- 49 files changed, 99 insertions(+), 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 index 18a571671..934db92a3 100644 --- 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 + + 👨‍💼 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 index fb3cfb4cf..feb841b59 100644 --- 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 + + 👨‍💼 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 index cc11013ed..a8a23d522 100644 --- 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 + + 👨‍💼 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 index 81c37f690..31fffef67 100644 --- 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 + + 👨‍💼 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 index 64d53f9ac..734053565 100644 --- 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 + + 🦉 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 index 091cba1a6..d7ac32ae8 100644 --- 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 + + 👨‍💼 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 index 4e97e001b..39efa389e 100644 --- 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 + + 👨‍💼 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 index 6fdaea566..71fa2778e 100644 --- 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 + + 👨‍💼 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 index e7dccc16e..b0a9c3371 100644 --- 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 + + 🦉 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 index b9a278f4e..0486ba007 100644 --- 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 + + 👨‍💼 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 index 9133c4660..24de6b1a1 100644 --- a/exercises/01.managing-ui-state/FINISHED.mdx +++ b/exercises/01.managing-ui-state/FINISHED.mdx @@ -1,4 +1,6 @@ # 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 index b3a7a2dd2..4db46f924 100644 --- a/exercises/01.managing-ui-state/README.mdx +++ b/exercises/01.managing-ui-state/README.mdx @@ -1,5 +1,7 @@ # 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 index 4c00e05a7..5b68b4425 100644 --- 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 + + 👨‍💼 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 index 2567de3d6..4c5874438 100644 --- 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 + + 👨‍💼 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 index cbaa147e7..2d4991fb5 100644 --- 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 + + 👨‍💼 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 index 9d257ca1b..21f75f543 100644 --- 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 + + 👨‍💼 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 index 134c6685a..dbad4e216 100644 --- a/exercises/02.side-effects/FINISHED.mdx +++ b/exercises/02.side-effects/FINISHED.mdx @@ -1,5 +1,7 @@ # 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 index 736e23e67..438f0c484 100644 --- a/exercises/02.side-effects/README.mdx +++ b/exercises/02.side-effects/README.mdx @@ -1,5 +1,7 @@ # 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 index 67624ffeb..9250fb391 100644 --- 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 + + 🧝‍♂️ I refactored the app a bit. In the process I kinda broke stuff and you'll be required to fix it. Feel free to check the diff 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 index 8d25a9269..0a46dd53a 100644 --- 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 + + 👨‍💼 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 index 1166b8261..bfc280b10 100644 --- 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 + + 👨‍💼 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 index a1ff1c87f..3de8eea30 100644 --- 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 + + 👨‍💼 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 index be83100ea..a97737866 100644 --- 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 + + 👨‍💼 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 index 80921949b..d26400f66 100644 --- 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 + + 👨‍💼 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 index ddd7aae36..3d7b6ed48 100644 --- a/exercises/03.lifting-state/FINISHED.mdx +++ b/exercises/03.lifting-state/FINISHED.mdx @@ -1,3 +1,5 @@ # 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 index 5bd204f2a..b8e474d49 100644 --- a/exercises/03.lifting-state/README.mdx +++ b/exercises/03.lifting-state/README.mdx @@ -1,5 +1,7 @@ # 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 index 6a4d8116b..21de8e1e7 100644 --- a/exercises/04.dom/01.problem.ref/README.mdx +++ b/exercises/04.dom/01.problem.ref/README.mdx @@ -1,5 +1,7 @@ # 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 index 1ffb3ce42..d78fbf028 100644 --- a/exercises/04.dom/01.solution.ref/README.mdx +++ b/exercises/04.dom/01.solution.ref/README.mdx @@ -1,3 +1,5 @@ # Refs + + 👨‍💼 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 index 0cb1e0364..2cd63ef8a 100644 --- a/exercises/04.dom/02.problem.deps/README.mdx +++ b/exercises/04.dom/02.problem.deps/README.mdx @@ -1,5 +1,7 @@ # 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 index 160990570..7596723a8 100644 --- a/exercises/04.dom/02.solution.deps/README.mdx +++ b/exercises/04.dom/02.solution.deps/README.mdx @@ -1,5 +1,7 @@ # Dependencies + + 👨‍💼 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 index a21485030..8ce58b9f3 100644 --- a/exercises/04.dom/03.problem.primitives/README.mdx +++ b/exercises/04.dom/03.problem.primitives/README.mdx @@ -1,5 +1,7 @@ # 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 index 2005e86c8..79f0e5599 100644 --- a/exercises/04.dom/03.solution.primitives/README.mdx +++ b/exercises/04.dom/03.solution.primitives/README.mdx @@ -1,5 +1,7 @@ # Primitive Dependencies + + 👨‍💼 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 index eaa83df05..0bd361831 100644 --- a/exercises/04.dom/FINISHED.mdx +++ b/exercises/04.dom/FINISHED.mdx @@ -1,5 +1,7 @@ # 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 index 5a26c081f..b0e422b5f 100644 --- a/exercises/04.dom/README.mdx +++ b/exercises/04.dom/README.mdx @@ -1,5 +1,7 @@ # 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 index 759e6e52f..c61131ac8 100644 --- 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 + + 🧝‍♂️ 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 index 50476e6e6..b74a7442b 100644 --- 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 + + 👨‍💼 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 index e221f6cfd..c59148ee7 100644 --- a/exercises/05.unique-ids/FINISHED.mdx +++ b/exercises/05.unique-ids/FINISHED.mdx @@ -1,3 +1,5 @@ # 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 index 33a822234..9cc5fd0bf 100644 --- a/exercises/05.unique-ids/README.mdx +++ b/exercises/05.unique-ids/README.mdx @@ -1,5 +1,7 @@ # 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 index 209f5a5e0..0d3cece46 100644 --- 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 + + 👨‍💼 Our users want to play tic-tac-toe. 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 index 0444f6e1a..d243af4c1 100644 --- 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 + + 👨‍💼 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 index 53c6d108c..e67ae9630 100644 --- 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 + + 👨‍💼 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 index 66b5316cc..408963bca 100644 --- 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 + + 👨‍💼 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 index c00831319..8a23c787f 100644 --- 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 + + 👨‍💼 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 index ae5830a5a..89c00d660 100644 --- 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 + + 👨‍💼 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 index a3a9ca287..11ce6989b 100644 --- a/exercises/06.tic-tac-toe/FINISHED.mdx +++ b/exercises/06.tic-tac-toe/FINISHED.mdx @@ -1,3 +1,5 @@ # 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 index e07f23137..d48c41546 100644 --- a/exercises/06.tic-tac-toe/README.mdx +++ b/exercises/06.tic-tac-toe/README.mdx @@ -1,5 +1,7 @@ # 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 index ab6ccf423..a433594d2 100644 --- 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 index 8dd4e6143..c9a15af25 100644 --- 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 index 6f4e75e0d..338cda141 100644 --- 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",