React Chapter Index

Introduction

This index lists all 30 chapters in the Hello Code React track, grouped by topic. Use it to jump to a lesson or compare coverage with frontend/gen_article_plan/react.md.

Prerequisites

  • None—this page is a map, not a lesson

Getting Started (01–03)

#Chapter
01What Is React
02Environment and Create React Project
03First React Application and JSX

JSX, State, and Effects (04–06)

#Chapter
04JSX Lists, Keys, and Conditionals
05State: useState and useReducer
06Effects and Strict Mode

Forms and Composition (07–09)

#Chapter
07Forms and Controlled Components
08Composition, Props, and Lifting State
09Children and Compound Components

Context and Hooks (10–11)

#Chapter
10Context API
11Custom Hooks

Style (12)

#Chapter
12Styling React Components

Router (13–14)

#Chapter
13React Router Basics
14Router Guards, Lazy Routes, and Suspense

State and API (15–17)

#Chapter
15Zustand State Management
16Fetching API and CORS
17TypeScript With React

Test, Build, and SSR (18–20)

#Chapter
18Testing React Components
19Build, Preview, and Deploy
20SSR and Next.js Intro (optional)

Performance (21)

#Chapter
21Performance and Best Practices

Projects (22–25)

#Chapter
22Project: Todo With Zustand
23Project: Blog Reader With API
24Project: Admin Dashboard With Auth
25Project: Multi-Step Form (optional)

Operations and Wrap-Up (26–30)

#Chapter
26React Docker and CI (optional)
27React Troubleshooting
28Resources and Book Recommendations
29Learning Paths and Wrap-Up
30React Chapter Index (this page)

Suggested Learning Paths

API-ready SPA: 01 → 03 → 05 → 08 → 13 → 15 → 16 → 23

Systematic: 01–19 → 22–24 → 27–30

Full-stack: React 16, 23, 24 + FastAPI or Django REST + Git CI

From Vue: Vue chapter index → comparison table in gen_article_plan/react.md

Track Metadata

  • Logo: /category-logos/react.png
  • Plan file: frontend/gen_article_plan/react.md
  • Article guidelines: frontend/GEN_ARTICLE_ROLE.md
NeedHello Code track
JavaScriptJavaScript
TypeScriptTypeScript
Sister SPAVue
REST APIFastAPI, Django
DeployNginx

FAQ

Where do I start?

What Is React, then Environment.

Is chapter 20 required?

No—Next.js is optional unless you need SSR.

Is chapter 25 required?

No—multi-step form is optional practice.

Skip Docker (26)?

Yes for frontend-only learning; read before production Compose stacks.

React vs Vue on Hello Code?

Both are full SPA tracks—React emphasizes JSX and Zustand; Vue emphasizes templates and Pinia.

Blog schema alignment?

Blog reader + PostgreSQL blog project.