Reactlings 🦀⚛️

Learn React + TypeScript by fixing small exercises — inspired by rustlings.

Each exercise is a .tsx file with a // TODO stub. Edit it, save, and the web app instantly validates your solution. Exercises must be solved in order — validation stops at the first failure.

---

Getting Started

Prerequisites

• Node.js 18+
• npm 9+

Install and run

cd reactlings2
npm install
npm run dev

Open http://localhost:5173 in your browser.

---

How to Use

1. Open the web app — you'll see the exercise list on the left and a progress bar at the top.
2. Click an exercise in the sidebar to read its instructions and hints.
3. Open the exercise file in your editor:

   src/exercises/<topic>/<exercise>/exercise.tsx
   

4. Replace the // TODO stub with your implementation.
5. Save the file — Vite hot-reloads automatically.
6. Click "▶ Run All" (top-right) or "Re-validate" (inside the exercise panel) to check your solution.
7. A ✅ means you passed. Move on to the next exercise!

Important: Validation runs sequentially. Once an exercise fails, all later exercises are marked as blocked and won't be validated. Solve exercises in order.

---

Project Structure

reactlings2/
├── src/
│   ├── App.tsx                      # Main app shell
│   ├── types.ts                     # Shared TypeScript types
│   ├── utils/validator.ts           # Sequential validation engine
│   ├── components/
│   │   ├── Sidebar.tsx              # Exercise navigation
│   │   ├── ExercisePanel.tsx        # Instructions + validation result
│   │   └── ProgressBar.tsx          # Progress indicator
│   └── exercises/
│       ├── registry.ts              # Master list of all 100 exercises
│       ├── 01_jsx_basics/
│       │   ├── ex01_hello_world/
│       │   │   ├── exercise.tsx     # ← YOU EDIT THIS FILE
│       │   │   └── validate.tsx     # Automated validator (do not edit)
│       │   └── ...
│       └── ... (20 topics)
├── package.json
├── vite.config.ts
└── tsconfig.json

Rule: Only edit exercise.tsx files. The validate.tsx files contain the automated tests.

---

The 20 Topics

#	Topic	What you'll learn
01	JSX Basics	Expressions, attributes, fragments, nesting
02	Components	Function components, composition, children
03	Props	Passing, defaulting, destructuring, spreading
04	useState	Counters, toggles, object/array state
05	useEffect	Mount, cleanup, dependencies, async
06	Event Handling	Click, input, submit, mouse, keyboard
07	Conditional Rendering	Ternary, &&, early return, null
08	Lists and Keys	map, filter, sort, nested lists
09	Forms	Select, checkbox, multi-field, validation, radio
10	TypeScript Types	Interfaces, generics, event types, unions
11	useRef	DOM refs, mutable refs, forwardRef
12	useContext	Creating, providing, consuming, custom hooks
13	useReducer	Basic actions, typed actions, complex state
14	Custom Hooks	useToggle, useCounter, useLocalStorage, useFetch
15	Component Patterns	Compound, render props, HOC, provider
16	Performance	useMemo, useCallback, React.memo, useTransition
17	Error Handling	Error boundaries, async errors, Suspense, recovery
18	Routing	Routes, links, params, nested, protected (react-router-dom)
19	State Management	Lift state, derived state, colocation, key reset
20	Advanced Patterns	Portal, useImperativeHandle, useLayoutEffect, hooks composition

Each topic has 5 exercises (100 total), progressing from beginner to intermediate within the topic.

---

Exercise File Format

Every exercise.tsx follows this structure:

/**
 * Exercise 01-01: Hello World
 *
 * Instructions:
 * Create a React component called HelloWorld that renders
 * a <div> element containing exactly the text "Hello, World!".
 */

// TODO: Implement the HelloWorld component
export default function HelloWorld() {
  return <div>TODO</div>   // ← replace this
}

Replace the stub with your working implementation and save.

---

Validation Status Icons

Icon	Meaning
✅ Green check	Exercise passed
❌ Red X	Exercise failed — fix it to continue
⏳ Spinner	Currently validating
⚪ Grey circle	Blocked — a previous exercise must pass first

---

Tips

• Show hint — click the 💡 hint link in the exercise panel if you're stuck.
• Re-validate — after editing a file, click "Re-validate" or "▶ Run All".
• Start from the top — exercises build on each other. Don't skip ahead.
• Read the error — the red failure message often tells you exactly what's wrong.
• TypeScript errors — if your code has syntax/type errors, the module won't load and the exercise will show an import error.

---

Scripts

Command	Description
npm run dev	Start the development server (hot-reload)
npm run build	Type-check and build for production
npm run preview	Preview the production build locally