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%

Answers

Here are the answers to the questions in the preceding section.

The name prop will have the any type.
The firstName state will be given the string type because string will be inferred from the initial value "".
There will be no type error even though firstName is not passed because it is defined as optional.
The inferred type of status is string. An explicit type can be defined for the state using a generic type argument as follows:
```
const [status, setStatus] = useState<'Good' | 'Bad'>('Good');
```
The type for the FruitList component could be as follows:
```
type Props = {
```
```
  fruits: string[];
```
```
}
```

Alternatively, it could be defined using an interface as follows:

interface Props {
  fruits: string[];
}

The email state could be defined as follows:

const [email, setEmail] = useState<string | null>(null);

An explicit type needs to be defined; otherwise, an initial value of null...