From fbaa2b1b7690d0d24e2a4dcfbdb10ade8806340c Mon Sep 17 00:00:00 2001 From: "Kent C. Dodds" Date: Fri, 1 Mar 2024 16:44:27 -0700 Subject: [PATCH] good progress on exercise 1 --- README.md | 10 ++++++---- .../01.problem.use-state/README.mdx | 15 +++++++++++++++ .../01.problem.use-state/index.tsx | 1 - .../01.solution.use-state/README.mdx | 5 +++++ .../01.solution.use-state/index.tsx | 1 - .../02.problem.control/README.mdx | 14 ++++++++++++++ .../02.problem.control/index.tsx | 1 - exercises/01.managing-ui-state/README.mdx | 13 +++++++++---- exercises/README.mdx | 15 +++++++++++++++ kcdshop/.diffignore | 1 + 10 files changed, 65 insertions(+), 11 deletions(-) create mode 100644 kcdshop/.diffignore diff --git a/README.md b/README.md index aee45dafb..6e3d0fad0 100644 --- a/README.md +++ b/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 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 2f1904ce7..18a571671 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 +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 ``. diff --git a/exercises/01.managing-ui-state/01.problem.use-state/index.tsx b/exercises/01.managing-ui-state/01.problem.use-state/index.tsx index 7445eb125..de16aef1a 100644 --- a/exercises/01.managing-ui-state/01.problem.use-state/index.tsx +++ b/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 (
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 2f1904ce7..fb3cfb4cf 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 +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. diff --git a/exercises/01.managing-ui-state/01.solution.use-state/index.tsx b/exercises/01.managing-ui-state/01.solution.use-state/index.tsx index 7d4dcaa9c..c8bc202b4 100644 --- a/exercises/01.managing-ui-state/01.solution.use-state/index.tsx +++ b/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 (
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 67905f3a4..fcfd79389 100644 --- a/exercises/01.managing-ui-state/02.problem.control/README.mdx +++ b/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! diff --git a/exercises/01.managing-ui-state/02.problem.control/index.tsx b/exercises/01.managing-ui-state/02.problem.control/index.tsx index 298a3a9f4..ee98daae6 100644 --- a/exercises/01.managing-ui-state/02.problem.control/index.tsx +++ b/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 diff --git a/exercises/01.managing-ui-state/README.mdx b/exercises/01.managing-ui-state/README.mdx index 744bb376e..f7b0e3357 100644 --- a/exercises/01.managing-ui-state/README.mdx +++ b/exercises/01.managing-ui-state/README.mdx @@ -5,10 +5,10 @@ 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 @@ -16,13 +16,13 @@ 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/) diff --git a/exercises/README.mdx b/exercises/README.mdx index e29cc3af4..8dd4e6143 100644 --- a/exercises/README.mdx +++ b/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! diff --git a/kcdshop/.diffignore b/kcdshop/.diffignore new file mode 100644 index 000000000..15231cfea --- /dev/null +++ b/kcdshop/.diffignore @@ -0,0 +1 @@ +tsconfig.json