About this book
This book is an introduction to learning modern React development systematically from the ground up. From JavaScript basics to advanced React topics, you can build practical skills step by step.
Why React?
React is a UI library that Facebook released in 2013, and it remains one of the most popular frontend frameworks in the world today.
Features of React
| Feature | Description |
|---|---|
| Component-based | Build the UI as reusable parts (components) |
| Declarative UI | You only describe "how it should look," and React manages the updates |
| Virtual DOM | High performance through efficient DOM updates |
| Huge ecosystem | A wealth of libraries and community support |
| React Native | Develop mobile apps with the same knowledge |
What you can learn in this book
This book is organized into the following eight groups, progressing from the basics to real-world practice.
Foundations (Chapters 1-3)
- An overview of this book and how to study it
- A review of the essential JavaScript (ES6+) knowledge
- Setting up the Vite + React + TypeScript development environment
React basics (Chapters 4-10)
- The basics of JSX and how it works internally
- Creating and splitting components
- Passing data with Props and defining TypeScript types
- State management with State
- Event handling
- Conditional rendering and lists
- Building and controlling forms
Hooks in depth (Chapters 11-15)
- Managing side effects with useEffect
- useRef and DOM manipulation
- Global state with useContext
- Managing complex state with useReducer
- Creating custom hooks
UI and styling (Chapters 16-18)
- Comparing CSS styling approaches
- Utility-first CSS with Tailwind CSS
- Implementing modals with createPortal
State management and data fetching (Chapters 19-21)
- Global state management with Zustand
- Server state management with TanStack Query
- Routing with React Router
Advanced topics (Chapters 22-25)
- Performance optimization (automatic memoization with the React Compiler, memo, useMemo, useCallback)
- Debugging and React Developer Tools
- Class components and Error Boundary
- Introduction to Next.js
Capstone exercise (Chapter 26)
- A practical project that puts what you've learned to use
Full-stack development (Chapters 27-29)
- SPA authentication (JWT + HttpOnly Cookie)
- Building a backend with NestJS + Prisma
- A full-stack hands-on project (a Trello-style task management app)
The modern React development stack
This book adopts the technologies that have become the de facto standard in today's React ecosystem. Versions are based on the stable releases at the time of writing.
Frontend
| Category | Technology | Version | Why we chose it |
|---|---|---|---|
| UI library | React | 19.2+ | New APIs such as Actions, the use hook, and ref as a prop |
| Optimizing compiler | React Compiler | 1.0+ | Reduces manual useMemo/useCallback through automatic memoization |
| Build tool | Vite | 8.x | Fast builds with Rolldown, HMR, simple configuration |
| Language | TypeScript | 6.0+ | Type safety, IDE support, more efficient team development |
| Styling | Tailwind CSS | 4.x | CSS-first configuration, the @tailwindcss/vite plugin |
| State management | Zustand | 5.x | Lightweight, a simple API, minimal boilerplate |
| Data fetching | TanStack Query | 5.x | Suspense integration, useSuspenseQuery, separation of server state |
| Routing | React Router | 7.x | Data Router (loader/action), support for three modes |
| Forms | React Hook Form + Zod | 7.x + 4.x | Lightweight, type-safe validation |
| SSR framework | Next.js | 16.x | App Router, Server Components, Turbopack stable |
Backend (used in the full-stack development part)
| Category | Technology | Version | Why we chose it |
|---|---|---|---|
| Framework | NestJS | 11.x | Module structure, DI, TypeScript-first |
| ORM | Prisma | 7.x | Type-safe queries, schema-first, migrations |
Who this book is for
- People who understand the basic syntax of JavaScript
- People who want to start learning React
- People who want to migrate to React from another framework
- People who want to learn modern frontend development
Prerequisites
The following knowledge will help you progress more smoothly.
Required
- The basics of HTML/CSS
- The basic syntax of JavaScript (variables, functions, arrays, objects)
Nice to have
- ES6+ syntax (reviewed in Chapter 2)
- Basic command-line operations
- Basic Git/GitHub operations
This book explains the TypeScript knowledge you need along the way. Even if you have no TypeScript experience, you can follow along.
How to study
1. Learn by doing
Be sure to actually type in and run the code in this book. Rather than copying and pasting, typing it yourself deepens your understanding.
2. Don't fear errors
In programming, errors are inevitable. Get into the habit of reading error messages. This book also covers debugging methods in Chapter 23.
3. Dig into your questions
When something is unclear, refer to the official documentation or MDN Web Docs.
4. Progress step by step
Each chapter builds on the knowledge of the previous ones. If something is unclear, we recommend going back to an earlier chapter to review.
Icons used in this book
This book uses the following message blocks.
Indicates supplementary information or useful tips.
Indicates points that require caution or common mistakes.
Details
Additional information that expands when clicked. It contains content for readers who want to deepen their understanding.
About the sample code
The sample code in this book is designed so you can learn by doing.
// You can type in code blocks like this and run them to check the behavior
const App = () => {
return <h1>Hello, React!</h1>
}
Next steps
Now, in Chapter 2 let's review the JavaScript (ES6+) knowledge you need for React development, then in Chapter 3 set up the development environment and step into the world of React!