Introduction to React
About this guide
This is a 30-chapter guide that teaches modern React development (Vite + TypeScript + Tailwind CSS) systematically from the ground up. You can learn in a continuous flow, from the JavaScript prerequisites all the way to a full-stack implementation.
- Step by step: Starting from the JavaScript ES6+ prerequisites, you learn in this order: JSX → components → Hooks → state management → advanced topics → full stack
- Tech stack: Vite + TypeScript + Tailwind CSS + Zustand + TanStack Query + React Router
- Code-focused: Each chapter offers plenty of implementation examples and explanations of "why you do it this way"
- Exercises and notes: Collapsible
<details>blocks provide detailed explanations and supplementary information
Structure of the guide
How the learning path is organized
The guide is organized into eight groups, progressing from the basics to real-world practice.
| Group | Theme | Chapters | Overview |
|---|---|---|---|
| Foundations | Prerequisites and environment | 3 | Introduction / JavaScript ES6+ / dev environment (Vite + TS) |
| React basics | Core elements | 8 | JSX / components / Props / State / events / conditional rendering / forms / Zod |
| Hooks in depth | Designing function components | 5 | useEffect / useRef / useContext / useReducer / custom hooks |
| UI and styling | Designing the look | 3 | Styling overview / Tailwind CSS / Portal and Modal |
| State management and data fetching | Preparing to scale up | 3 | Zustand / TanStack Query / React Router |
| Advanced topics | Knowledge useful in practice | 4 | Performance / debugging / class components / introduction to Next.js |
| Capstone exercise | An implementation project | 1 | A real-world project (a task management app) |
| Full-stack development | Frontend + backend integration | 3 | SPA authentication / NestJS + Prisma / full-stack project |
How to read this guide
- Beginners: Read from the top in order, running the code in each chapter as you go
- Experienced readers: It is fine to skim from the Hooks in depth or state management groups
- Want to dig into a specific topic: Open the relevant chapter directly from the table above
- Just want the patterns you use at work: Tailwind / state management + data fetching / performance + debugging are the core ones
How the four learning guides fit together
This site has four structured learning guides. This guide focuses on learning the React framework. If you want to dig into UI and styling with Tailwind, see the sister guide, the Tailwind CSS Guide (18 chapters).
| Axis | Introduction to React (this guide) | TypeScript Master Guide | Tailwind CSS Guide | Clean Code |
|---|---|---|---|---|
| Focus | Framework | Language spec | CSS styling | Design standards |
| Level | Beginner to intermediate | Beginner to intermediate | Beginner to intermediate | Intermediate and up |
| Prerequisite | TS + JS | JS basics | HTML/CSS basics | Any language |
| Example | "The dependency array of useEffect" | "How to use mapped types" | "Adding colors with @theme" | "Replace any with unknown + type guards" |
The four guides are complementary. Solidify your types with the TypeScript Master Guide and assemble your UI with Introduction to React. Polish your styling with the Tailwind CSS Guide and raise your code quality with Clean Code. That is the intended learning path.
Now, let's start with the Introduction.