Sign In Start Free Trial

Book Overview & Buying
Table Of Contents

Learn React with TypeScript - Second Edition

By : Carl Rippon

4.5 (20)

Learn React with TypeScript

4.5 (20)

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

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

Get in touch

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

Using props

Using state

Using events

Summary

Questions

Answers

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

Summary

Questions

Answers

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

Summary

Questions

Answers

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

Summary

Questions

Answers

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

Using SVGs

Summary

Questions

Answers

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

Summary

Questions

Answers

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

Summary

Questions

Answers

Part 3: Data

Part 3: Data

Chapter 8: State Management

Chapter 8: State Management

Technical requirements

Creating the project

Using prop drilling

Using React context

Using Redux

Summary

Questions

Answers

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

Summary

Questions

Answers

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

Summary

Questions

Answers

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

Summary

Questions

Answers

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

Summary

Questions

Answers

Index

Index

Why subscribe?

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

Using state Hooks

We have already learned about the useState Hook in previous chapters, but here we will look at it again and compare it against another state Hook we haven’t covered yet, useReducer. We will expand the PersonScore component we created in the last section to explore these state Hooks.

Using useState

As a reminder, the useState Hook allows state to be defined in a variable. The syntax for useState is as follows:

const [state, setState] = useState(initialState);

We will enhance the PersonScore component we created in the last section to store the person’s name in state. We will also have state for a score that is incremented, decremented, and reset using some buttons in the component. We will also add the loading state to the component, which will show a loading indicator when true.

Carry out the following steps:

Open PersonScore.tsx and add useState to the React import statement:
```
import { useEffect, useState } from 'react&apos...
```

Visually different images

CONTINUE READING

83

Tech Concepts

36

Programming languages

73

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Learn React with TypeScript

Search

Your notes and bookmarks