# React Walkthrough — Learn by Doing

## Step 1: Your First Component

Let's create a simple React component.

**Embed:** https://react.dev/learn/your-first-component

<!-- hint:code language="jsx" highlight="1,3" -->

**Task:** Write a functional component called `Greeting` that accepts a `name` prop and renders "Hello, {name}!".

**Question:** What do you think happens when you pass a prop that the component doesn't use? Would it cause an error?

**Checkpoint:** The user has a working Greeting component and understands that unused props are simply ignored.

---

## Step 2: Adding State — Counter

Now let's make something interactive with `useState`.

**Embed:** https://react.dev/reference/react/useState

<!-- hint:card type="concept" title="useState triggers re-renders — setState causes React to re-run your component" -->

**Task:** Create a `Counter` component with a number state that starts at 0. Add a button that increments it when clicked.

**Question:** When you click the button, what actually triggers the number on screen to change? Trace the flow from click to DOM update in your mind.

**Checkpoint:** The user has a working counter and can explain that `setCount` triggers a re-render with the new value.

---

## Step 3: Counter Refinement

Let's extend the counter.

**Task:** Add a second button that decrements the count. Add a "Reset" button that sets it back to 0. Prevent the count from going below 0.

**Question:** Why might you choose to clamp the value inside the click handler rather than in the render?

**Checkpoint:** The user has increment, decrement, and reset, and understands validation in handlers.

---

## Step 4: useEffect Introduction

**Embed:** https://react.dev/reference/react/useEffect

<!-- hint:diagram mermaid-type="flowchart" topic="React render cycle: render → commit → effect" -->

**Task:** Use `useEffect` to update the browser tab title to show the current count (e.g., "Count: 3").

**Question:** What happens if you omit the dependency array from `useEffect`? What if you use an empty array `[]`?

**Checkpoint:** The user understands dependency arrays — empty = run once, omitted = run every render.

---

## Step 5: Conditional Rendering

**Task:** In your counter, show "Count is zero" when the count is 0, and the normal count display otherwise. Maybe add a celebratory message when count reaches 10.

**Question:** When would you use `&&` vs a ternary for conditional rendering? What are the tradeoffs?

**Checkpoint:** The user can use both patterns and explain when each makes sense.

---

## Step 6: Todo List — Adding Items

**Task:** Build the start of a todo list. Use `useState` with an array of items. Add an input and a button to append a new todo. Render the list with `map`.

**Question:** Why is it important to give each list item a stable `key`? What could go wrong if you use the array index as the key when items can be reordered or deleted?

**Checkpoint:** The user has a list with keys and understands key stability.

---

## Step 7: Todo List — Toggling and Filtering

<!-- hint:celebrate -->

**Task:** Add a checkbox to each todo to mark it complete (strikethrough completed items). Add a filter: "All", "Active", "Completed". Use conditional rendering and `filter()`.

**Question:** Where should the filtered list be computed — in state, or derived at render time? What's the difference?

**Checkpoint:** The user understands derived state vs stored state — filters are typically derived.