Introduction
A 30-chapter guide that teaches modern React development (Vite + TypeScript + Tailwind CSS) systematically from the ground up. You can work through it step by step, from JavaScript prerequisites to Hooks, state management, performance, Next.js, and a full-stack implementation.
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.
JavaScript basics (ES6+)
Before learning React, let's review the important features of modern JavaScript (ES6 and later). You use this knowledge frequently in React development.
Setting up the development environment
In this chapter, you set up the Vite + React + TypeScript development environment.
The basics of JSX
In this chapter, you learn JSX, the syntax for describing React's UI.
Components
In this chapter, you learn about components, the basic unit of React.
Props
In this chapter, you learn about Props, the mechanism for passing data to components.
State (useState)
In this chapter, you learn about State, which manages a component's state.
Event handling
In this chapter, you learn about event handling in React.
Conditional rendering and lists
In this chapter, you learn about rendering based on conditions and displaying array data as lists.
Forms
In this chapter, you learn how to handle forms in React.
Schema validation with Zod
Define schemas with Zod and learn type inference, React Hook Form integration, and runtime validation of API responses.
useEffect
In this chapter, you learn about the `useEffect` hook, which handles side effects.
useRef and DOM manipulation
In this chapter, you learn about the `useRef` hook, used for direct DOM access and holding values, and related APIs.
useContext
In this chapter, you learn about the `useContext` hook, used to share data across the entire component tree.
useReducer
In this chapter, you learn about the `useReducer` hook, used to manage complex state logic.
Custom hooks
In this chapter, you learn about custom hooks, which extract logic in a reusable form.
Styling overview
In this chapter, you get an overview of styling approaches in React and learn the characteristics of each approach and how to choose between them.
Tailwind CSS Integration
A chapter for using Tailwind CSS, which has become the de facto standard in React development, practically in React. Setup and basics are left to a separate guide; this chapter covers patterns specific to React integration, such as variant design, the clsx / tailwind-merge / cn utilities, and integration with shadcn/ui.
Portals and Modals
In this chapter, you learn how to implement modals using React's createPortal.
State management (Zustand)
In this chapter, you learn "Zustand," a popular state management library in React development.
TanStack Query
In this chapter, you learn "TanStack Query," the de facto standard for server-state management.
React Router
In this chapter, you learn SPA routing with React Router.
Performance optimization
In this chapter, you learn techniques for optimizing the performance of React applications.
Debugging
In this chapter, you learn debugging techniques for React applications and how to use the React Developer Tools.
Class components
In this chapter, you learn about React class components. Function components are the mainstream in modern React development, but you still need this knowledge to understand existing codebases and to implement Error Boundaries.
Introduction to Next.js
In this chapter, you learn about Next.js, React's full-stack framework.
Practical project
In this chapter, you leverage the knowledge you have learned so far to build a practical task management app.
Designing SPA authentication
In this chapter, you learn about designing and implementing authentication in a single-page application (SPA).
NestJS + Prisma
In this chapter, you build a backend API for a React SPA using NestJS and Prisma.
Full-stack practical project
In this chapter, you integrate all the knowledge you have learned so far and build a project management app (Trello-like) with React + NestJS + Prisma.