instructions

Author: kentcdodds

exercises/01.use-state/01.problem.initial-state/README.mdx

@@ -1 +1,36 @@
 # Initial State
+
+👨‍💼 Hello! So here's where we're starting out:
+
+```tsx
+import { createRoot } from 'react-dom/client'
+
+function Counter() {
+	const [count, setCount] = useState(0)
+	const increment = () => setCount(count + 1)
+
+	return (
+		<div className="counter">
+			<button onClick={increment}>{count}</button>
+		</div>
+	)
+}
+
+const rootEl = document.createElement('div')
+document.body.append(rootEl)
+const appRoot = createRoot(rootEl)
+appRoot.render(<Counter />)
+```
+
+Pretty simple, except the `useState` function isn't defined and we're not
+allowed to simply import it from React because we're not allowed to directly use
+any React hooks in this workshop!
+
+And because it's not defined, our `Counter` component won't be able to render
+anything (because an error will be thrown).
+
+So let's just get it to the point where the `Counter` component renders
+initially without errors. When you're done, it should render a button with a `0`
+in it.
+
+The emoji should lead the way!

exercises/01.use-state/01.problem.initial-state/index.tsx

@@ -10,6 +10,7 @@ function Counter() {
 	const [count, setCount] = useState(0)
 	// 🦺 you'll get an error for this we'll fix that next
 	const increment = () => setCount(count + 1)
+
 	return (
 		<div className="counter">
 			<button onClick={increment}>{count}</button>

exercises/01.use-state/01.solution.initial-state/README.mdx

@@ -1 +1,4 @@
 # Initial State
+
+👨‍💼 Great work! Now at least we're not just throwing an error. But let's handle
+the state update...

exercises/01.use-state/01.solution.initial-state/index.tsx

@@ -10,6 +10,7 @@ function Counter() {
 	const [count, setCount] = useState(0)
 	// @ts-expect-error we'll fix this soon
 	const increment = () => setCount(count + 1)
+
 	return (
 		<div className="counter">
 			<button onClick={increment}>{count}</button>

exercises/01.use-state/02.problem.update-state/index.tsx

@@ -12,6 +12,7 @@ function Counter() {
 	const [count, setCount] = useState(0)
 	// @ts-expect-error 💣 delete this comment
 	const increment = () => setCount(count + 1)
+
 	return (
 		<div className="counter">
 			<button onClick={increment}>{count}</button>

exercises/01.use-state/02.solution.update-state/index.tsx

@@ -9,6 +9,7 @@ function useState<State>(initialState: State) {
 function Counter() {
 	const [count, setCount] = useState(0)
 	const increment = () => setCount(count + 1)
+
 	return (
 		<div className="counter">
 			<button onClick={increment}>{count}</button>

exercises/01.use-state/03.problem.re-render/index.tsx

@@ -10,6 +10,7 @@ function useState<State>(initialState: State) {
 function Counter() {
 	const [count, setCount] = useState(0)
 	const increment = () => setCount(count + 1)
+
 	return (
 		<div className="counter">
 			<button onClick={increment}>{count}</button>

exercises/01.use-state/03.solution.re-render/index.tsx

@@ -12,6 +12,7 @@ function useState<State>(initialState: State) {
 function Counter() {
 	const [count, setCount] = useState(0)
 	const increment = () => setCount(count + 1)
+
 	return (
 		<div className="counter">
 			<button onClick={increment}>{count}</button>

exercises/01.use-state/04.problem.preserve-state/index.tsx

@@ -21,6 +21,7 @@ function useState<State>(initialState: State) {
 function Counter() {
 	const [count, setCount] = useState(0)
 	const increment = () => setCount(count + 1)
+
 	return (
 		<div className="counter">
 			<button onClick={increment}>{count}</button>

exercises/01.use-state/README.mdx

@@ -1 +1,39 @@
 # useState
+
+The `useState` hook is one of the most common hooks and is a good place for us
+to start because it triggers re-rendering of the component and we can observe
+its effects in the UI.
+
+The goal of this exercise is not to build something super rigourous, but instead
+to hack away until it works.
+
+Here's the basic API that we need to implement in this exercise:
+
+```tsx
+const [state, setState] = useState(initialState)
+
+function handleEvent() {
+	setState(newState)
+}
+```
+
+The `useState` hook accepts an initial value, and returns an array with two
+values:
+
+- `state`: the current value of the state
+- `setState`: a function that updates the state
+
+We will use the `setState` function to update the state of the component. But
+just updating the state is not enough. We need to trigger a re-render of the
+component as well.
+
+Because we're not React, we need to hack away at things a little bit. For
+example, the built-in `useState` hook is _the_ way to trigger re-renders, but
+since we'll be implementing `useState` ourselves, we'll have to be creative on
+how we trigger re-renders.
+
+Another tricky thing will be ensuring we can keep track of the state external to
+our component so when the component gets rendered again we can access the latest
+version of the state.
+
+Let's get into it!