React: From Basics to Next.js · TypeScript · Fullstack book cover
Book

React: From Basics to Next.js · TypeScript · Fullstack

React 19 + App Router + TypeScript First — One Book Cover to Cover

In progress 35 chaptersLast updated: May 19, 2026
Start from chapter 1 →

All 35 chapters — Chapters 1 through 34 plus Appendix A — are open on the site as-is. You can start from any chapter; the “Recommended entry points” section below points you to a starting place that matches your background.

What this book covers #

  1. React as it stands in 2026 — function components and hooks only. Class components, componentDidMount, Redux-only, and Pages Router do not appear in the main text. App Router and Server Components are the default model.
  2. TypeScript first — every example carries types alongside the code. Typing for props · hooks · events · forms · API responses is covered from page one.
  3. An unbroken curve from fundamentals to fullstack — JSX through Server Actions, auth, deploy, and observability — the same voice throughout.
  4. No skipping over operations — testing, performance, auth, deploy, and observability are covered at the end of the beginner arc, as the areas you actually need on the job.
  5. Tied together by one fullstack app at the end — the Part 6 capstone shows in 13 steps how every tool from Chapters 1 ~ 33 fits inside a single Todo service.

What this book does not cover #

  • Other meta-frameworks like React Native · Remix · TanStack Start — separate books cover those.
  • Domain applications like design systems · animation · WebGL — separate books cover those.
  • Older styles like class components · componentDidMount · Redux Saga · Pages Router — the old React Basics tutorial (15 parts) stays up as-is. If you are migrating from an older codebase, read Appendix A first.
  • An exhaustive library tour — the main text states one answer. Alternatives go in the appendix or separate posts.

Who this book is for #

  • Anyone learning React for the first time — beginners frustrated that Korean introductory books skip App Router · Server Components · React 19. You start on the modern stack from the very beginning.
  • People who know older React (Pages Router · class components · Redux-only) but not the current flow — those who learned in the 2019 ~ 2022 era and stopped there. Appendix A’s migration guide is the starting point.
  • People coming to React from another framework (Vue · Angular · Svelte) — you can skip past the intro and absorb the core from Parts 3 through 6. The type-hints-first approach lowers the entry barrier.
  • Side-project and one-person fullstack developers — those running both backend and frontend themselves. The RSC + Server Actions model is where this book gives the most value.

This book may not be the right fit if:

  • You already run React 19 + App Router in production — the main text spans beginner through upper-intermediate. If you already have it in your hands, Appendix A’s migration summary is the only piece you may want as reference.
  • You maintain a codebase that needs to stay on the older style in 2026 — if you need to keep Pages Router or class components for a while, the old tutorial series is a better fit.

Structure — six parts, 35 chapters at a glance #

The whole book is 35 chapters: 34 main chapters plus Appendix A. Each part closes with a one-line summary of what should be in your hands.

  • Part 1: Getting Started with React (9 chapters) — JSX · components · props · state · events · forms. You can build a small interactive page on your own.
  • Part 2: Effects, State, Routing (6 chapters) — useEffect · lifting state up · Context · custom hooks · performance · routing. The app scales up to multiple pages.
  • Part 3: React with TypeScript (6 chapters) — typing props · hooks · events · forms · Context · fetch responses. The feel of typing every line becomes natural.
  • Part 4: Modern Next.js (7 chapters) — Why Server Components · App Router · Server vs Client · data fetching and caching · Suspense · Server Actions · React 19 features. You take in the standard model for fullstack React.
  • Part 5: Operations, Testing, Deploy (5 chapters) — Vitest · Playwright · performance and Web Vitals · auth and sessions · deploy and observability. The full toolkit you need before and after launch.
  • Part 6: Capstone (1 chapter) — the fullstack Todo app. Every tool from Chapters 1 ~ 33 lines up across 13 PR-sized steps inside a single service.
  • Appendix A (1 chapter) — migrating old React code. Class → function + hooks, Pages → App Router, Redux-only → RSC + Server Actions, fetch-on-mount → RSC fetch, PropTypes → TS, plus a six-step gradual procedure for large codebases.

Learning paths — where to start #

The recommended entry point depends on your background.

  • Learning React for the first time — Chapter 1 in order. Parts 1 ~ 2 walk you through a small app, then Part 3 writes the same code again with TypeScript. Parts 4 ~ 5 cover the operational side, and the Part 6 capstone closes the loop.
  • You know older React — read Appendix A first, so you can see at a glance how your prior coding style maps to the main text. Then Parts 4 ~ 6 (App Router · RSC · Server Actions · capstone) give you the most value. Skim Parts 1 ~ 3 as review.
  • Coming from another framework — skim Part 1 (JSX · component model) in about an hour, go through Part 3 (TypeScript), then jump straight to Part 4 (Next.js + RSC). When the production tools show up in Parts 5 ~ 6, you can map them to the equivalents in your current framework.

A rough time budget, typing the code by hand:

SectionTime
Parts 1 ~ 2 (intro through routing)~20 ~ 25 hours
Part 3 (TypeScript)~8 ~ 10 hours
Part 4 (App Router + RSC)~12 ~ 15 hours
Part 5 (operations)~8 ~ 10 hours
Part 6 capstone~10 ~ 15 hours (taking it PR-by-PR yourself)
Appendix A~3 ~ 4 hours (reference plus hands-on)
Total~60 ~ 80 hours

At two hours a day, you can finish a pass in a month; with weekend sessions, two months. Many readers take the capstone slower, PR by PR.

Recommended entry points — where to open first #

All 35 chapters are open to you, but if you are unsure where to start, here are three entry points.

  • Chapter 1: What React Is and Why It Was Built — the book’s starting point. It covers what React is and why, in 2026, it is still the standard for the frontend. The first chapter beginners should open.
  • Chapter 28: React 19 Features — a one-page rundown of the React 19 essentials: Actions, useActionState, useOptimistic, use(), ref-as-prop, <form action>. The most direct chapter for readers asking what is new.
  • Appendix A: Migrating Old React Code — class → function, Pages → App Router, Redux-only → RSC + Server Actions, fetch-on-mount → RSC fetch, PropTypes → TS. The chapter that gives former React users the most value.

These three play the role of entry points. Open whichever one calls to you.

The series this book is built from #

This book takes 32 parts of the following series and adds 8 new chapters plus a full revision pass. The series themselves stay up on the site for free.

  • React Basics (15 parts) — the 2019 ~ 2022-era intro series. It keeps class components and Pages Router intact. The flow is similar to Parts 1 ~ 2 of this book, but the perspective on older style is clearly different.
  • TypeScript + React in Practice (6 parts) — the compile source for Part 3. The book rewrites the same topics with React 19 and the migration hints from Appendix A.
  • Modern React + Next.js (6 parts) — the compile source for Part 4. The first pass at App Router · Server Components · Server Actions.
  • Build a Todo App in React (5 parts) — the motif for the Part 6 capstone. You can compare in the book how the simple client Todo turns into a fullstack Todo.

The book reorganizes the series above into one arc from fundamentals to production, adds chapters on testing · performance · auth · deploy · fullstack capstone, and ties them into a single volume. The core is 30%+ new/revised plus the fullstack capstone.

How this book is funded #

This book is funded by site ads (AdSense) and reader support. There is no checkout flow, and all 35 chapters are open on the site as-is.

If the book has helped you, you can support it on Ko-fi. Reader support is what makes the time for the next minor revisions and the next book.

❤️ Support on Ko-fi (from $1)

Frequently asked questions #

What do I need to follow along? #

Node.js 20 or later, pnpm (or npm / yarn), and one code editor. The DB / auth / deploy chapters in Parts 4 ~ 5 use only services that stay inside free tiers (Turso or Cloudflare D1, GitHub OAuth, Vercel, Sentry, PostHog). Nothing in the main text requires a paid step.

Where do I get the code? #

Each chapter’s example code is written directly in the body as code blocks, so we recommend typing it out by hand as you learn. The 13-step capstone completion will be provided in a separate GitHub repository. When ready, the link will be added to this book’s landing page.

Does the book get retired when the next React 19 / Next.js 15 version ships? #

The core model (function + hooks, App Router, RSC + Server Actions, TypeScript first) should hold for at least the next 2 ~ 3 major versions. Cumulative API changes get reflected in minor book revisions (e.g., v1.1), and a major React version (e.g., React 20) is the point we may start a separate v2 line.

Is the book available in languages other than English? #

Korean is the source-of-truth language. Japanese and English alignment is on a separate milestone. All three languages keep the same book structure (35 chapters).

Doesn’t a chapter overlap 70%+ with a single post on the site? #

Some chapters share a topic with compile-source series posts. That said, every book chapter is (1) rewritten to flow with the book, (2) standardized on React 19 + App Router + TypeScript, (3) cross-linked with other chapters in the book, and (4) extended with exercises and one-line summaries — so even when the topic matches, the result reads as a different artifact. Chapters with significant overlap are separated by canonical tags to avoid SEO conflicts.

How do I send feedback or support? #

Feedback is welcome by comments or email through the blog. Per-chapter typo reports, improvement suggestions, and code errors are picked up quickly in the next minor revision. Support is open on Ko-fi — any amount from $1 helps.

Next steps #

All 35 Korean chapters of this book are published. Further updates proceed as follows.

  1. v1 main-text stabilization — for 4 ~ 8 weeks after release, reader feedback is reflected in minor revisions (v1.x) for typos, code errors, and weaker explanations.
  2. Part 6 capstone GitHub repository — the 13-step completion is organized into a separate repository, with the link added to this landing page.
  3. Japanese / English alignment — translated against the same 35-chapter structure. After Korean release, on a separate milestone.
  4. Response to major React / Next.js releases — once minor revisions accumulate, we decide when to begin a v2 line.

New chapters and major revisions can be tracked via the RSS feed.

Contents

Part 1: Getting Started with React 9 Chapter

JSX · components · state · events · forms. The nine topics every beginner needs in muscle memory.

  1. 1. What React Is We lay out what React is and why it was built, then look at why it remains (and how it remains) the frontend standard in 2026. The starting point of this book.
  2. 2. Setting up the environment (Node.js + Vite) Install Node.js and pnpm, create your first React project with Vite, and bring up a dev server. Every example in this book runs on top of this environment.
  3. 3. The essence of JSX What JSX is and how it turns into JavaScript function calls, and the rules around expressions, attributes, and children — all in one place.
  4. 4. Components and props We build function components and look at the basic pattern for flowing data via props. The foundation for the interfaces we solidify with TypeScript in Chapter 17.
  5. 5. State and useState State as React's unit of re-render. The exact model of useState, functional updates, and patterns for updating object state.
  6. 6. Event handling React's synthetic event system, writing event handlers, passing arguments, and the common traps. The foundation for Chapter 19 (typing events) and Chapter 27 (Server Actions).
  7. 7. Conditional rendering Patterns for splitting the UI with if · ternary · && · null returns, plus common traps — especially the trap of the number 0 on the left of `&&`.
  8. 8. Lists and key The pattern of mapping an array to components, the meaning of key, and concrete examples of how things break when you use the index as key.
  9. 9. Handling forms (controlled inputs) Controlled components, the canonical pattern for forms in React. Plus how textarea · select · checkbox · radio all follow the same model.
Part 2: Effects, State, Routing 6 Chapter

useEffect · lifting state up · useContext · custom hooks · performance · routing. From a small page to a multi-page app.

  1. 10. useEffect — when to use it and when to avoid it The definition of side effects, the dependency array, the role of cleanup, and the cases where useEffect should not be used — all in one chapter.
  2. 11. Lifting state up The core pattern for two sibling components sharing the same data. When to lift, when not to, and the natural bridge into Chapter 12 useContext.
  3. 12. useContext — when it fits and when it doesn't The Context API that resolves prop drilling. Three-step usage, value-separation pattern, and the boundary against external state libraries.
  4. 13. Custom hooks The standard tool for reusing logic. What a good hook's interface looks like, the patterns that come up often, and the cases where you should not extract a hook.
  5. 14. Performance optimization (memo · useMemo · useCallback · and the React Compiler) What memo / useMemo / useCallback do, the common misuses, and what changes and what stays the same once the React Compiler lands.
  6. 15. Routing overview (React Router) The concept of SPA routing, the basics of React Router v7, and a comparison with Part 4's Next.js App Router — all in one chapter.
Part 3: React with TypeScript 6 Chapter

Typing props · hooks · events · forms · Context · fetch responses. The feel of putting types on every line.

  1. 16. TypeScript + React Setup Vite + TypeScript setup, the key tsconfig options, and your first .tsx file. The foundation we build Part 3 of this book on.
  2. 17. Typing props and children Patterns for defining prop types, the difference between ReactNode, ReactElement, and JSX.Element, when to reach for PropsWithChildren, and discriminated union props, all in one chapter.
  3. 18. Typing hooks — useState · useReducer · useRef Type inference and when to be explicit with built-in hooks. The discriminated-union action with useReducer, the two flavors of useRef (DOM ref and value box), and React 19 ref-as-prop, all in one chapter.
  4. 19. Typing events and forms ChangeEvent · FormEvent · KeyboardEvent and the types of input handlers, TypeScript patterns for controlled and uncontrolled forms, and the foundation for Chapter 27's Server Actions FormData.
  5. 20. Context and generic components Type-safety patterns for Context (null + wrapper hook), splitting state and dispatch, generic components, and the as prop of polymorphic components, all in one chapter.
  6. 21. Typing fetch and API responses The flow for handling external data safely — fetch is unknown, and zod schemas validate and type in one place. Plus the meaning fetch takes in an RSC environment, bridging into Part 4.
Part 4: Modern Next.js 7 Chapter

App Router · Server Components · data fetching and caching · Suspense · Server Actions · React 19 features. The standard model for fullstack React.

  1. 22. Why Next.js and Server Components The limits of client-side React, the problems Server Components address, and the differences between CSR, SSR, and RSC. The pivot chapter of the whole book.
  2. 23. Starting Next.js and the App Router Create a Next.js 15 project and get the App Router's file-based routing and layout system into your hands. We cover the file conventions (page · layout · loading · error · not-found · route group) in one chapter.
  3. 24. Server Components vs Client Components The differences between the two kinds of components, the precise meaning of the `use client` directive, the patterns for mixing them (server importing client / client receiving server children), and the props serialization constraint.
  4. 25. Data fetching and caching Fetching data directly with `async / await` inside Server Components, the Next.js 15 fetch cache options (`force-cache` / `no-store` / `revalidate`), route-level options, parallel fetching, and `error.tsx`.
  5. 26. Loading with Suspense and use() Build streaming rendering with Suspense boundaries, plus `loading.tsx`, skeleton fallbacks, and the React 19 stable `use()` hook.
  6. 27. Server Actions and forms Handle mutations without API routes via Server Actions, and polish UX with React 19's `useActionState` · `useFormStatus` · `useOptimistic`. Plus the Part 4 closing mini-project (a guestbook).
  7. 28. React 19 features in one place Actions · useActionState · useFormStatus · useOptimistic · use() · React Compiler · ref as prop. The React 19 features scattered across Chapters 22~27 collected in one catalog.
Part 5: Operations, Testing, Deploy 5 Chapter

Vitest · Playwright · performance and Web Vitals · auth and sessions · deploy and observability. The areas you actually need on the job.

  1. 29. Component testing — Vitest + Testing Library Testing components and hooks with Vitest + React Testing Library. render · userEvent · mocking patterns, things to watch in a Next.js setting, and CI integration.
  2. 30. E2E testing — Playwright Automating full scenarios in a real browser with Playwright. Setup, locator rules, auth via storageState, the page object pattern, taming flaky tests, CI integration, and visual regression.
  3. 31. Performance · Bundles · Web Vitals Measuring and improving Core Web Vitals (LCP · INP · CLS). Lighthouse · bundle analysis · code splitting · RSC streaming · next/image · next/font · INP optimization.
  4. 32. Auth and sessions — Auth.js v5 / OAuth / JWT Choosing between JWT and DB session, Auth.js v5 setup, Credentials and OAuth providers, and patterns for reading the session in four places — RSC · Client · Server Action · middleware.
  5. 33. Deploy and observability — Vercel · Cloudflare Pages · Sentry · PostHog Deploying Next.js to Vercel and Cloudflare Pages, preview deploys, environment variables, error tracking with Sentry, product analytics with PostHog. The toolkit for the first four weeks after launch.
Part 6: Capstone 1 Chapter

A fullstack Todo app built with RSC + Server Actions + DB + auth + tests.

  1. 34. Capstone — Build a Fullstack Todo App Tie the patterns from Chapters 1 ~ 33 into one working fullstack service: RSC, Server Actions, DB, auth, and tests.
Appendix 1 Chapter

Guide for moving old React (class · Pages Router · Redux-only) code over to the modern style.

  1. 100. Migrating Old React Code A guide to moving old-style code — Class components, Pages Router, Redux-only, fetch-on-mount — into this book's modern style.
X