book

Learn React with TypeScript - Third Edition

Name: Learn React with TypeScript - Third Edition
Author: Carl Rippon
ISBN: 9781836643173

by Carl Rippon

July 2025

Intermediate to advanced

444 pages

8h 40m

English

Packt Publishing

Read now

Unlock full access

Learn React with TypeScript
Third EditionContributorsAbout the authorAbout the reviewersLearn more on Discord
Preface
Who this book is forWhat this book coversTo get the most out of this bookDownload the example code filesConventions usedGet in touchShare Your ThoughtsFree Benefits with Your Book
Part 1: Introduction
Chapter 1: Getting Started with React
Technical requirementsUnderstanding the benefits of ReactCreating a React projectUnderstanding the project Adding linting to Visual Studio CodeAdding code formattingStarting the app in development modeProducing a production buildUnderstanding the structure of a React app Understanding the React entry pointUnderstanding the React component treeUnderstanding a React componentCreating a component Creating a basic Alert componentAdding Alert to the App componentUsing propsUnderstanding propsAdding props to the Alert componentUsing stateUnderstanding stateImplementing a visible state in the Alert componentAdding a close button to AlertUsing eventsUnderstanding eventsImplementing a close button click handler in the alertImplementing an alert close eventUsing React developer toolsUsing the Components toolUsing the Profiler toolSummaryQuestionsAnswers
Chapter 2: Getting Started with TypeScript
Technical requirementsUnderstanding the benefits of TypeScriptUnderstanding TypeScriptCatching type errors earlyImproving developer experience and productivity with IntelliSenseUnderstanding JavaScript typesUsing basic TypeScript typesUsing type annotationsUsing type inferenceUsing the Date typeUsing the any typeUsing the unknown typeUsing arraysCreating TypeScript typesUsing object types Creating type aliasesCreating union typesUsing the TypeScript compilerCreating a React and TypeScript componentCreating a projectAdding a props typeAdding a state typeSummaryQuestionsAnswers
Chapter 3: Using React Hooks
Technical requirementsUsing the effect HookUnderstanding the effect Hook parametersThe rules of HooksEffect cleanupCreating the projectFetching data using the effect HookUsing state HooksUsing useStateUnderstanding useReducerUsing useReducerUsing the ref HookUnderstanding the ref HookUsing the ref HookUsing the memo HookUnderstanding the memo HookUsing the memo HookUsing the callback HookUnderstanding the callback HookUnderstanding when a component is re-renderedUsing the callback HookOther React HooksuseIduseTransitionuseDeferredValueHooks covered in other chaptersSummaryQuestionsAnswers
Part 2: App Fundamentals
Chapter 4: Approaches to Styling React Frontends
Technical requirementsUsing plain CSSCreating the projectUnderstanding how to reference CSSUsing plain CSS in the alert componentExperiencing CSS clashesUsing CSS modulesUnderstanding CSS modulesUsing CSS modules in the alert componentUsing Tailwind CSSUnderstanding Tailwind CSSInstalling and configuring Tailwind CSSUsing Tailwind CSSUsing SVGsUnderstanding how to use SVGs in ReactAdding SVGs to the alert componentOther styling approachesUsing inline stylesUsing SCSSUsing CSS-in-JSSummaryQuestionsAnswersLearn more on Discord
Chapter 5: Using React Server and Client Components
Technical requirementsUnderstanding SPAs Understanding the SPA problemUnderstanding the benefits of SPAsUnderstanding Server ComponentsUnderstanding what a Server Component isUnderstanding how RSCs address the SPA problemUnderstanding the benefits of Server ComponentsCreating Server ComponentsCreating the projectCreating an RSCUnderstanding how Server Components workExploring Client ComponentsUnderstanding Client ComponentsUnderstanding Client Component renderingSpecifying Client ComponentsCreating Client ComponentsComposing Server and Client ComponentsRSCs versus Client ComponentsUnderstanding when to use an RSC or Client ComponentUnderstanding client boundariesRendering an RSC in ColorModeToggleSummaryFurther readingQuestionsAnswers
Chapter 6: Creating a Multi-Page App with Next.js
Technical requirementsCreating routesCreating the projectUnderstanding routesCreating a posts routeCreating navigationUsing the Link componentUsing useRouterCreating shared layoutUnderstanding layout componentsCreating a headerCreating dynamic routesUnderstanding dynamic routesCreating a blog post dynamic routeUsing search parametersUnderstanding search parametersAdding search functionality to the appSummaryQuestionsAnswers

Part 3:Data
Chapter 7: Server Component Data Fetching and Server Function Mutations
Technical requirementsUnderstanding server-side and client-side data fetchingClient-side data fetchingServer-side data fetchingUnderstanding the benefitsGetting set upCreating the projectSetting up the databaseFetching data using an RSCImplementing query functionsCalling query functions from RSCsAdding type safety to a database queryAdding loading indicators using React SuspenseUnderstanding the need for loading indicatorsAdding a delayUnderstanding React SuspenseImplementing loading indicatorsHandling errors with React error boundariesUnderstanding React error boundariesImplementing error boundariesMutating data using a Server FunctionUnderstanding a Server FunctionCreating a Server FunctionAdding a progress indicatorHandling errors SummaryQuestionsAnswers
Chapter 8: Client Component Data Fetching and Mutations with TanStack Query
Technical requirementsFetching data using TanStack QueryUnderstanding the challenges with useEffect for data fetchingUnderstanding TanStack QuerySetting up the projectFetching blog post dataUsing a Route Handler with TanStack QueryUnderstanding the benefits of Route HandlersUsing Route HandlersAdding type safety to the API response Mutating data using a TanStack Query mutationUnderstanding TanStack Query mutationsUsing useMutationSummaryQuestionsAnswersLearn more on Discord
Chapter 9: Working with Forms
Technical requirementsUsing basic formsCreating the projectCreating a native formUsing a Route Handler for submissionCreating a database mutationCreating a Route HandlerIntegrating the form submission with the Route HandlerUsing a Server Action for submissionUnderstanding Server ActionsUsing a Server Action in ContactForm Adding server validationUsing useFormStatus Understanding useFormStatusUsing useFormStatusUsing useActionStateUnderstanding useActionStateUsing useActionStateUsing React Hook Form Understanding React Hook FormUsing React Hook FormImplementing optimistic updates Understanding useOptimisticUsing useOptimisticSummaryQuestionsAnswers
Part 4:Advanced React
Chapter 10: State Management
Technical requirementsUnderstanding the types of stateServer stateForm stateURL stateLocal stateDerived stateShared stateUsing prop drillingCreating the projectUnderstanding and using prop drillingUsing React contextUnderstanding React contextUsing React contextUsing ZustandUnderstanding ZustandUsing ZustandUsing TanStack Query and URL parametersUsing TanStack QueryUsing URL parametersSummaryQuestionsAnswersLearn more on Discord
Chapter 11: Reusable Components
Technical requirementsCreating the projectUsing generic propsUnderstanding generics Creating a basic list componentUsing prop spreadingUsing render propsUnderstanding the render props patternAdding a renderItem prop Adding checked functionalityCreating custom hooksUnderstanding custom hooksExtracting checked logic into a custom hookAllowing the internal state to be controlledUnderstanding how the internal state can be controlledAllowing checkedIds to be controlledSummaryQuestionsAnswers
Chapter 12: Unit Testing with Vitest and the React Testing Library
Technical requirementsTesting pure functionsUnderstanding a testTesting isCheckedTesting exceptionsRunning testsTesting componentsUnderstanding the React Testing LibraryImplementing checklist component testsUsing test IDsSimulating user interactionsUnderstanding fireEvent and user-eventImplementing checklist tests for checking itemsGetting code coverageInstalling the code coverage toolRunning code coverageUnderstanding the code coverage reportGaining full coverage on the checklist componentIgnoring files in the coverage reportSummaryQuestionsAnswersLearn more on Discord
Chapter 13: Unlock Your Exclusive Benefits
Unlock this Book’s Free Benefits in 3 Easy StepsStep 1
Why Subscribe?
Other Books You May EnjoyShare Your Thoughts
Index

Overview

"Learn React with TypeScript" is your practical guide to building dynamic web applications using React 19 and TypeScript. In this book, you'll explore modern React features such as server components and server functions, while mastering essential tools like Next.js and Zustand. Gain the skills to create scalable and maintainable UIs by leveraging TypeScript's type safety and React's robust architecture.

What this Book will help me do

Understand and apply advanced React concepts such as server components and modern hooks.
Design efficient, scalable web apps using Next.js and TypeScript.
Learn state management techniques with tools like Zustand and TanStack Query.
Write type-safe code and reusable React components for maintainable applications.
Test React applications effectively using the Vitest testing framework.

Author(s)

Carl Rippon is a seasoned software developer and educator with over 15 years of experience building complex web applications. His friendly writing style and deep understanding of TypeScript and React make technical concepts accessible and engaging. Carl focuses on practical, real-world examples to ensure readers can immediately apply their skills to production code.

Who is it for?

This book is aimed at front-end developers, full-stack developers, and aspiring React programmers looking to build production-ready applications using modern tools. It is particularly well-suited for those who already have knowledge of HTML, CSS, and JavaScript, and wish to delve deeper into React with TypeScript.

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Publisher Resources

ISBN: 9781836643173

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills