React Guide

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.

Features of this guide

• 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.

Foundations — Prerequisites and environment (Ch. 1-3)

#	Chapter	Overview
01	About this book	What this guide aims for and how to work through it
02	JavaScript basics (ES6+)	The ES6+ features you will meet constantly in React
03	Setting up the development environment	Building a Vite + React + TypeScript setup

React basics — Core elements (Ch. 4-11)

#	Chapter	Overview
04	The basics of JSX	The JSX syntax used to describe UI
05	Components	React's basic unit and how to split it up
06	Props	Passing data into a component
07	State (useState)	Managing the state a component holds
08	Event handling	Handling clicks, input, and other events
09	Conditional rendering and lists	Rendering by condition and expanding array data
10	Forms	Handling input values and controlled components
11	Schema validation with Zod	Type inference, React Hook Form, runtime checks on API responses

Hooks in depth — Designing function components (Ch. 12-16)

#	Chapter	Overview
12	useEffect	Handling side effects and cleanup
13	useRef and DOM manipulation	Direct DOM access and holding values
14	useContext	Sharing data across the component tree
15	useReducer	Consolidating complex state logic
16	Custom hooks	Extracting logic into a reusable form

UI and styling — Designing the look (Ch. 17-19)

#	Chapter	Overview
17	Styling overview	The characteristics of each approach and when to use it
18	Tailwind CSS (React integration patterns)	Variant design, clsx / tailwind-merge, shadcn/ui
19	Portals and Modals	Implementing modals with createPortal

State management and data fetching — Preparing to scale up (Ch. 20-22)

#	Chapter	Overview
20	State management (Zustand)	Lightweight global state management
21	Data fetching (TanStack Query)	Caching and syncing server state
22	Routing (React Router)	Designing page transitions in an SPA

Advanced topics — Knowledge useful in practice (Ch. 23-26)

#	Chapter	Overview
23	Performance optimization	Suppressing re-renders and measuring them
24	Debugging	Isolating causes with React Developer Tools
25	Class components	Reading existing code and Error Boundary
26	Introduction to Next.js	Where the full-stack framework fits in

Capstone exercise — An implementation project (Ch. 27)

#	Chapter	Overview
27	Practical project	Building a task management app with what you learned

Full-stack development — Frontend + backend integration (Ch. 28-30)

#	Chapter	Overview
28	Designing SPA authentication	Holding tokens and protecting routes
29	Building a backend with NestJS and Prisma	An API and data layer for the SPA
30	Full-stack practical project	A Trello-like app with React + NestJS + Prisma

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 learning guides fit together

This guide focuses on learning the React framework. The underlying syntax is covered by the JavaScript Guide and the TypeScript Guide, and UI styling by the sister guide, the Tailwind CSS Guide. For which guide covers which stage across the whole site, see the Introduction.

---

Now, let's start with the Introduction.