Learn React with TypeScript
Description
Key Features
Unlock powerful performance gains with React server components and server functions in Next.js
Manage forms, state, and data fetching with modern tools like Zustand and Next.js
Build reusable, scalable components using proven React and TypeScript design patterns
Purchase of the print or Kindle book includes a free PDF eBook
Book DescriptionReading, navigating, and debugging a large frontend codebase can be challenging. Learn React with TypeScript, 3rd Edition helps you overcome these challenges by teaching you React, TypeScript, and Next.js, which are core technologies for building scalable, high-performance apps. Updated for React 19, this new edition covers new features such as React Server Components, server functions, and powerful modern hooks, including useFormStatus and useActionState. You'll build type-safe components using TypeScript, making this book ideal for React beginners who want to master patterns aligned with real-world frontend and React developer roles. You'll also explore Next.js for RSCs and routing, and learn to use Zustand for global state in React-a lightweight alternative to traditional state managers. The chapters guide you through efficient data-fetching strategies with RSCs in Next.js, as well as in single-page applications (SPAs). The book also covers form handling, reusable architecture, and testing React components with Vitest to ensure robust, production-ready apps. By the end of this book, you'll have the confidence and skills to build maintainable React applications with TypeScript and Next.js, following modern web development best practices.What you will learn
Apply React styling techniques to create stunning and visually engaging UIs
Leverage server components to seamlessly integrate with client components for optimized performance
Fetch and manage data efficiently in React for a smooth, responsive user experience
Build interactive, validated forms with TypeScript and server actions to handle user input
Share state efficiently across components using Zustand
Structure scalable, multi-page applications effortlessly with Next.js
Write unit tests for React apps with Vitest and React Testing Library
Who this book is forThis book is for aspiring React developers, frontend engineers, or full-stack developers looking to build large-scale web applications using React and TypeScript. This guide offers a solid foundation in modern web development practices using React, TypeScript, and Next.js. Intermediate knowledge of HTML, CSS, and JavaScript is required.
All prices
More details
Other editions
New editions
Additional editions
Person
Content
Getting Started with React
Getting Started with TypeScript
Using React Hooks
Approaches to Styling React Frontends
Using React Server and Client Components
Creating a Multi-Page App with Next.js
Server Component Data Fetching and Server Function Mutations
Client Component Data Fetching and Mutations with TanStack Query
Working with Forms
State Management
Reusable Components
Unit Testing with Vitest and the React Testing Library
Preface
React was built by Meta to provide more structure to its code base and allow it to scale much better. React worked so well for Facebook that they eventually made it open source. Today, React is the dominant technology for building frontends; it allows us to build small, isolated, and highly reusable components that can be composed together to create complex frontends. With advancements such as React Server Components, React has further expanded its capabilities, enabling developers to seamlessly combine server-side rendering and client-side interactivity for highly optimized and dynamic applications.
TypeScript was built by Microsoft to help developers more easily develop large JavaScript-based programs. It is a superset of JavaScript that brings a rich type system to it. This type system helps developers catch bugs early and allows tools to be created to navigate and refactor code robustly.
This book will teach you how to use both of these technologies to create large, sophisticated frontends that are easy to maintain, while also exploring modern features such as React Server Components to enhance performance and productivity.
Who this book is for
If you are a developer who wants to create large and complex frontends with React and TypeScript, this book is for you. The book doesn't assume you have any previous knowledge of React or TypeScript - however, basic knowledge of JavaScript, HTML, and CSS will help you get to grips with the concepts covered.
What this book covers
Chapter 1, Getting Started with React, covers creating React projects and the fundamentals of building React components. This includes making a component configurable using props and interactive using state.
Chapter 2, Getting Started with TypeScript, starts with the fundamentals of TypeScript and its type system. This includes using inbuilt types as well as creating new types. The chapter then covers creating a React component with TypeScript types.
Chapter 3, Using React Hooks, details the common React Hooks and their typical use cases. The chapter also covers how to use the Hooks with TypeScript to make them type-safe.
Chapter 4, Approaches to Styling React Frontends, walks through how to style React components using several different approaches. The benefits of each approach are also explored.
Chapter 5, Using React Server and Client Components, covers how and when to use React Server Components and Client Components and also how to compose them together.
Chapter 6, Creating a Multi-Page App with Next.js, covers the fundamentals of building multi-page apps in a popular React framework called Next.js. This includes implementing different pages, links between them, and page parameters.
Chapter 7, Server Component Data Fetching and Server Function Mutations, demonstrates how React Server Components can fetch data from a database. The chapter also includes mutating database data using a React Server Function.
Chapter 8, Client Component Data Fetching and Mutations with TanStack Query, covers how React Client Components can fetch and mutate data from a database using a popular library called TanStack Query.
Chapter 9, Working with Forms, explores how forms can be implemented using several different approaches, including the latest React Hooks and a popular forms library.
Chapter 10, State Management, walks through how React state can be shared between different components. Several approaches are explored along with their benefits.
Chapter 11, Reusable Components, brings in several patterns for making React components highly reusable but still type-safe.
Chapter 12, Unit Testing with Vitest and the React Testing Library, first delves into how functions can be tested with Vitest. The chapter then moves on to how React components can be tested with the help of the React Testing Library.
To get the most out of this book
To follow along with this book, you'll need to have the following technologies installed on your Windows or macOS computer:
- A modern browser, such as Google Chrome, which you can download from https://www.google.com/chrome
- Node.js and npm, available at https://nodejs.org/en/download
- Visual Studio Code, downloadable from https://code.visualstudio.com
Software/hardware covered in the book
React 19 or later
Next.js 15 or later
TypeScript 5 or later
If you are using the digital version of this book, we advise you to type the code yourself or access the code from the book's GitHub repository (a link is available in the next section). Doing so will help you avoid any potential errors related to the copying and pasting of code.
Download the example code files
You can download the example code files for this book from GitHub at https://github.com/PacktPublishing/Learn-React-with-TypeScript-Third-Edition/tree/main/. If there's an update to the code, it will be updated in the GitHub repository.
We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!
Conventions used
There are a number of text conventions used throughout this book.
Code in text: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. Here is an example: "We used the Form component from Next.js to optimize the form submission performance."
A block of code is set as follows:
export default function Home() { return ( <main> </main> ); }When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:
import Form from 'next/form'; export function ContactForm() { return ( <Form ... > ... </Form> ); }Any command-line input or output is written as follows:
npm run devBold: Indicates a new term, an important word, or words that you see onscreen. For instance, words in menus or dialog boxes appear in bold. Here is an example: "In the running app, try clicking the Done button to mark an item as done."
Tips or important notes
Appear like this.
Get in touch
Feedback from our readers is always welcome.
General feedback: If you have questions about any aspect of this book, email us at customercare@packtpub.com and mention the book title in the subject of your message.
Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit www.packtpub.com/support/errata and fill in the form.
Piracy: If you come across any illegal copies of our works in any form on the internet, we would be grateful if you would provide us with the location address or website name. Please contact us at copyright@packt.com with a link to the material.
If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit authors.packtpub.com.
Share Your Thoughts
Once you've read Learn React with TypeScript, Third Edition, we'd love to hear your thoughts! Please click here to go straight to the Amazon review pag for this book and share your feedback.
Your review is important to us and the tech community and will help us make sure we're delivering excellent quality content.
Download a Free PDF Copy of This Book
Thanks for purchasing this book!
Do you like to read on the go but are unable to carry your print books everywhere?
Is your eBook purchase not compatible with the device of your choice?
Don't worry, now with every Packt book you get a DRM-free PDF version of that book at no cost.
Read anywhere, any place, on any device. Search, copy, and paste code...
