good progress on exercise 1

Author: kentcdodds

README.md

@@ -33,16 +33,18 @@
 
 ## Prerequisites
 
-- Watch my talk
-  [Why React Hooks](https://www.youtube.com/watch?v=zWsZcBiwgVE&list=PLV5CVI1eNcJgNqzNwcs4UKrlJdhfDjshf)
-  (35 minutes)
+- Experience with
+  [React fundamentals](https://github.com/epicweb-dev/react-fundamentals)
 
 ## Pre-workshop Resources
 
 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
+- [Why React Hooks](https://www.youtube.com/watch?v=zWsZcBiwgVE&list=PLV5CVI1eNcJgNqzNwcs4UKrlJdhfDjshf)
+  (35 minutes)
+- [Getting Closure on Hooks](https://www.swyx.io/getting-closure-on-hooks/)
+- [React Hooks Documentation](https://react.dev/reference/react/hooks)
 
 ## System Requirements
 

exercises/01.managing-ui-state/01.problem.use-state/README.mdx

@@ -1 +1,16 @@
 # useState
+
+👨‍💼 We've got you working on a blog search page. Allow me to introduce you to
+🧝‍♂️ Kellie the coworker who put this together.
+
+🧝‍♂️ Hello! I'm Kellie the co-worker and I do things for you sometimes. I've
+started up this app that you're going to be working with. There's a search
+input, a couple checkboxes, a submit button, and a list of blog posts. You've
+been asked to make it so when the user types into the search field it filters
+the list of blog posts. And when the checkboxes are checked, we want to update
+the filter for the user to include those values. You might find it helpful to
+review the code before you get started.
+
+👨‍💼 Thanks Kellie! Ok, so we're going to take this step-by-step. For this first
+step, we just want you to create a state variable for the user's query and pass
+that along to the `<MatchingPosts />`.

exercises/01.managing-ui-state/01.problem.use-state/index.tsx

@@ -3,7 +3,6 @@ import { generateGradient, getMatchingPosts } from '#shared/blog-posts'
 
 function App() {
 	// 🐨 call useState here and initialize the query with an empty string
-	// 💰 we don't need the query yet, but you can console.log it if you want
 
 	return (
 		<div className="app">

exercises/01.managing-ui-state/01.solution.use-state/README.mdx

@@ -1 +1,6 @@
 # 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
+working with the DOM directly. Let's keep going.

exercises/01.managing-ui-state/01.solution.use-state/index.tsx

@@ -4,7 +4,6 @@ import { generateGradient, getMatchingPosts } from '#shared/blog-posts'
 
 function App() {
 	const [query, setQuery] = useState('')
-	console.log(query)
 
 	return (
 		<div className="app">

exercises/01.managing-ui-state/02.problem.control/README.mdx

@@ -1 +1,15 @@
 # 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`
+prop on the input.
+
+📜 You can read up more on this in the React docs:
+[Controlling an input with a state variable](https://react.dev/reference/react-dom/components/input#controlling-an-input-with-a-state-variable)
+
+Once we add the query as the value for the input, we'll also want to have a
+function responsible for updating the query when the user checks or unchecks the
+checkboxes and call that in the `onClick` handler of the checkboxes.
+
+Good luck!

exercises/01.managing-ui-state/02.problem.control/index.tsx

@@ -4,7 +4,6 @@ import { generateGradient, getMatchingPosts } from '#shared/blog-posts'
 
 function App() {
 	const [query, setQuery] = useState('')
-	console.log(query)
 
 	// 🐨 make a function called handleCheck that accepts a "tag" string and a "checked" boolean
 	// 🐨 By calling setQuery, add the tag to the query if checked and remove it if not

exercises/01.managing-ui-state/README.mdx

@@ -5,24 +5,24 @@ you use special functions called "hooks" to do this. Common built-in hooks
 include:
 
 - `useState`
-- `useEffect`
-- `useContext`
 - `useRef`
+- `use` (currently in canary)
 - `useReducer`
+- `useEffect`
 
 Each of these is a special function that you can call inside your custom React
 component function to store data (like state) or perform actions (or
 side-effects). There are a few more built-in hooks that have special use cases,
 but the ones above are what you'll be using most of the time.
 
 Each of the hooks has a unique API. Some return a value (like `useRef` and
-`useContext`), others return a pair of values (like `useState` and
+`use`), others return a pair of values (like `useState` and
 `useReducer`), and others return nothing at all (like `useEffect`).
 
 Here's an example of a component that uses the `useState` hook and an onClick
 event handler to update that state:
 
-```jsx
+```tsx
 function Counter() {
 	const [count, setCount] = useState(0)
 	const increment = () => setCount(count + 1)
@@ -51,6 +51,11 @@ called this time, the value we get back is the value that we called `setCount`
 with. And it continues like that until `Counter` is unmounted (removed from the
 application), or the user closes the application.
 
+Note that after the initial render, the argument passed to `useState` is
+ignored. The only time it's used is when the component is first created. The
+only way to change the state value of the component while it's around is to
+call the updater function returned by `useState`.
+
 📜 To get a deeper dive on how React keeps track of hooks, read/watch this great
 post/talk by [Shawn Wang](https://twitter.com/swyx):
 [Getting Closure on Hooks](https://www.swyx.io/getting-closure-on-hooks/)

exercises/README.mdx

@@ -1 +1,16 @@
 # React Hooks 🎣
+
+👨‍💼 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.
+
+React hooks are an critical part of React development. You can think of them as
+atoms to the React component molecule. Everything outside of basic rendering
+can be done with hooks.
+
+In this workshop, we'll learn how to use hooks to manage state, synchronize
+side-effects, generate unique ids, and more. There's a lot to hooks and we'll
+get into more advanced use cases in a future workshop. In this one you'll get
+a solid understanding of the basic hooks and how to use them.
+
+So let's get started!

kcdshop/.diffignore

@@ -0,0 +1 @@
+tsconfig.json