Book Image

Learn React with TypeScript - Second Edition

By : Carl Rippon

4.4 (8)

Book Image

Learn React with TypeScript - Second Edition

4.4 (8)

By: Carl Rippon

Overview of this book

Reading, navigating, and debugging a large frontend codebase is a major issue faced by frontend developers. This book is designed to help web developers like you learn about ReactJS and TypeScript, both of which power large-scale apps for many organizations. This second edition of Learn React with TypeScript is updated, enhanced, and improved to cover new features of React 18 including hooks, state management libraries, and features of TypeScript 4. The book will enable you to create well-structured and reusable React components that are easy to read and maintain, leveraging modern design patterns. You’ll be able to ensure that all your components are type-safe, making the most of TypeScript features, including some advanced types. You’ll also learn how to manage complex states using Redux and how to interact with a GraphQL web API. Finally, you’ll discover how to write robust unit tests for React components using Jest. By the end of the book, you’ll be well-equipped to use both React and TypeScript.

Preface

Who this book is for

What this book covers

To get the most out of this book

Download the example code files

Download the color images

Conventions used

Share Your Thoughts

Download a free PDF copy of this book

Part 1: Introduction

Part 1: Introduction

Free Chapter

Chapter 1: Introducing React

Chapter 1: Introducing React

Technical requirements

Understanding the benefits of React

Understanding JSX

Creating a component

Understanding imports and exports

Chapter 2: Introducing TypeScript

Chapter 2: Introducing TypeScript

Technical requirements

Understanding the benefits of TypeScript

Understanding JavaScript types

Using basic TypeScript types

Creating TypeScript types

Using the TypeScript compiler

Chapter 3: Setting Up React and TypeScript

Chapter 3: Setting Up React and TypeScript

Technical requirements

Creating a project with webpack

Creating a project with Create React App

Creating a React and TypeScript component

Chapter 4: Using React Hooks

Chapter 4: Using React Hooks

Technical requirements

Using the effect Hook

Using state Hooks

Using the ref Hook

Using the memo Hook

Using the callback Hook

Part 2: App Fundamentals

Part 2: App Fundamentals

Chapter 5: Approaches to Styling React Frontends

Chapter 5: Approaches to Styling React Frontends

Technical requirements

Using plain CSS

Using CSS modules

Using CSS-in-JS

Using Tailwind CSS

Chapter 6: Routing with React Router

Chapter 6: Routing with React Router

Technical requirements

Introducing React Router

Declaring routes

Creating navigation

Using nested routes

Using route parameters

Creating an error page

Using index routes

Using search parameters

Navigating programmatically

Using form navigation

Implementing lazy loading

Chapter 7: Working with Forms

Chapter 7: Working with Forms

Technical requirements

Using controlled fields

Using uncontrolled fields

Using React Router Form

Using native validation

Using React Hook Form

Part 3: Data

Chapter 8: State Management

Chapter 8: State Management

Technical requirements

Creating the project

Using prop drilling

Using React context

Chapter 9: Interacting with RESTful APIs

Chapter 9: Interacting with RESTful APIs

Technical requirements

Creating the project

Using the effect hook with fetch

Posting data with fetch

Using React Router

Using React Query

Using React Router with React Query

Chapter 10: Interacting with GraphQL APIs

Chapter 10: Interacting with GraphQL APIs

Technical requirements

Understanding the GraphQL syntax

Setting up the project

Using React Query with fetch

Using Apollo Client

Part 4: Advanced React

Part 4: Advanced React

Chapter 11: Reusable Components

Chapter 11: Reusable Components

Technical requirements

Creating the project

Using generic props

Using props spreading

Using render props

Adding checked functionality

Creating custom hooks

Allowing the internal state to be controlled

Chapter 12: Unit Testing with Jest and React Testing Library

Chapter 12: Unit Testing with Jest and React Testing Library

Technical requirements

Testing pure functions

Testing components

Simulating user interactions

Getting code coverage

Index

Other Books You May Enjoy

Other Books You May Enjoy

Packt is searching for authors like you

Share Your Thoughts

Download a free PDF copy of this book

Customer Reviews

4.4 (8)

5 star

75%

4 star

12.5%

3 star

0

2 star

0

1 star

12.5%

Technical requirements

We will use the following technologies in this chapter:

Browser: A modern browser such as Google Chrome.
TypeScript Playground: This is a website at https://www.typescriptlang.org/play/ that allows you to play around with and understand the features of TypeScript without installing it.
CodeSandbox: We’ll briefly use this online tool to explore JavaScript’s type system. This can be found at https://codesandbox.io/.
Visual Studio Code: We’ll need an editor to experience TypeScript’s benefits and explore the TypeScript compiler. This one can be installed from https://code.visualstudio.com/. Other editors that could be used can be found at https://github.com/Microsoft/TypeScript/wiki/TypeScript-Editor-Support.
Node.js and npm: TypeScript is dependent on these pieces of software. You can install them from https://nodejs.org/en/download/.

All the code snippets in this chapter can be found online at https...