getting started

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
 

exercises/01.use-reducer/01.problem.intro/README.mdx

@@ -1 +1 @@
-# Introduction
+# useReducer

exercises/01.use-reducer/01.solution.intro/README.mdx

@@ -1 +1 @@
-# Introduction
+# useReducer

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 (
+		<>
+			<label>
+				Name: <input defaultValue={name} onChange={handleChange} />
+			</label>
+			<div>You typed: {name}</div>
+		</>
+	)
+}
+```
+
+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."

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!