From 9c59d27e5bcb8cd418fd66a8c0e56bf020a4d850 Mon Sep 17 00:00:00 2001 From: "Kent C. Dodds" Date: Thu, 7 Mar 2024 09:12:08 -0700 Subject: [PATCH] getting started --- README.md | 5 +- .../01.problem.intro/README.mdx | 2 +- .../01.solution.intro/README.mdx | 2 +- exercises/01.use-reducer/README.mdx | 46 ++++++++++++++++++- exercises/README.mdx | 15 ++++++ 5 files changed, 66 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index e1a2dda8..108fdcdc 100644 --- a/README.md +++ b/README.md @@ -43,7 +43,10 @@ Here are some resources you can read before taking the workshop to get you up to speed on some of the tools and concepts we'll be covering: -- TODO: add resources +- [Should I useState or useReducer?](https://kentcdodds.com/blog/should-i-usestate-or-usereducer) +- [How to Implement useState with useReducer](https://kentcdodds.com/blog/how-to-implement-usestate-with-usereducer) +- [useEffect vs useLayoutEffect](https://kentcdodds.com/blog/useeffect-vs-uselayouteffect) +- [Imperative vs Declarative Programming](https://ui.dev/imperative-vs-declarative-programming) ## System Requirements diff --git a/exercises/01.use-reducer/01.problem.intro/README.mdx b/exercises/01.use-reducer/01.problem.intro/README.mdx index e10b99d0..2e835e02 100644 --- a/exercises/01.use-reducer/01.problem.intro/README.mdx +++ b/exercises/01.use-reducer/01.problem.intro/README.mdx @@ -1 +1 @@ -# Introduction +# useReducer diff --git a/exercises/01.use-reducer/01.solution.intro/README.mdx b/exercises/01.use-reducer/01.solution.intro/README.mdx index e10b99d0..2e835e02 100644 --- a/exercises/01.use-reducer/01.solution.intro/README.mdx +++ b/exercises/01.use-reducer/01.solution.intro/README.mdx @@ -1 +1 @@ -# Introduction +# useReducer diff --git a/exercises/01.use-reducer/README.mdx b/exercises/01.use-reducer/README.mdx index 2e835e02..406569a4 100644 --- a/exercises/01.use-reducer/README.mdx +++ b/exercises/01.use-reducer/README.mdx @@ -1 +1,45 @@ -# useReducer +# Advanced State Management + +React's `useState` hook can get you a really long way with React state +management. That said, sometimes you want to separate the state logic from the +components that make the state changes. In addition, if you have multiple +elements of state that typically change together, then having an object that +contains those elements of state can be quite helpful. + +This is where `useReducer` comes in really handy. + +This exercise will take you pretty deep into `useReducer`. Typically, you'll use +`useReducer` with an object of state, but we're going to start by managing a +single number (a `count`). We're doing this to ease you into `useReducer` and +help you learn the difference between the convention and the actual API. + +Here's an example of using `useReducer` to manage the value of a name in an +input. + +```javascript +function nameReducer(previousName, newName) { + return newName +} + +const initialNameValue = 'Joe' + +function NameInput() { + const [name, setName] = React.useReducer(nameReducer, initialNameValue) + const handleChange = event => setName(event.target.value) + return ( + <> + +
You typed: {name}
+ + ) +} +``` + +One important thing to note here is that the reducer (called `nameReducer` +above) is called with two arguments: + +1. the current state +2. whatever it is that the dispatch function (called `setName` above) is called + with. This is often called an "action." diff --git a/exercises/README.mdx b/exercises/README.mdx index cfb5bfb3..ba9dd24b 100644 --- a/exercises/README.mdx +++ b/exercises/README.mdx @@ -1 +1,16 @@ # Advanced React Hooks 🔥 + +👨‍💼 Hello there! I'm Peter the Product Manager and I'll be helping guide you +through all the things that our users want to see in our app that you'll be +working on in this workshop. + +We're going to cover a lot of ground and a handful of components that need to be +enhanced for the features our users are looking for. You'll be building things +using React hooks like `useReducer`, `useContext`, `useLayoutEffect`, +`useSyncExternalStore`, and more. You'll even ben building your own custom +hooks! + +In addition to advanced hooks, we'll also be covering a couple advanced use +cases like focus management with `flushSync` as well as `createPortal`. + +It's going to be a full experience, so let's get started!