Book Image

Learn React with TypeScript 3

By : Carl Rippon

Book Image

Learn React with TypeScript 3

By: Carl Rippon

Overview of this book

React today is one of the most preferred choices for frontend development. Using React with TypeScript enhances development experience and offers a powerful combination to develop high performing web apps. In this book, you’ll learn how to create well structured and reusable react components that are easy to read and maintain by leveraging modern web development techniques. We will start with learning core TypeScript programming concepts before moving on to building reusable React components. You'll learn how to ensure all your components are type-safe by leveraging TypeScript's capabilities, including the latest on Project references, Tuples in rest parameters, and much more. You'll then be introduced to core features of React such as React Router, managing state with Redux and applying logic in lifecycle methods. Further on, you'll discover the latest features of React such as hooks and suspense which will enable you to create powerful function-based components. You'll get to grips with GraphQL web API using Apollo client to make your app more interactive. Finally, you'll learn how to write robust unit tests for React components using Jest. By the end of the book, you'll be well versed with all you need to develop fully featured web apps with React and TypeScript.

Preface

Who this book is for

What this book covers

To get the most out of this book

Free Chapter

TypeScript Basics

TypeScript Basics

Technical requirements

Understanding the benefits of TypeScript

Understanding basic types

Creating interfaces, types aliases, and classes

Structuring code into modules

Configuring compilation

TypeScript linting

Code formatting

Further reading

What is New in TypeScript 3

What is New in TypeScript 3

Technical requirements

The unknown type

Project references

Default JSX properties

Further reading

Getting Started with React and TypeScript

Getting Started with React and TypeScript

Technical requirements

Creating a React and TypeScript project

Creating a class component

Handling class component events

Class component states

Class component life cycle methods

Creating a function component

Further reading

Routing with React Router

Routing with React Router

Technical requirements

Installing React Router with routing types

Declaring routes

Creating navigation

Route parameters

Handling not found routes

Implementing page redirects

Query parameters

Animated transitions

Lazy loading routes

Further reading

Advanced Types

Technical requirements

Overload signatures

Lookup and mapped types

Further reading

Component Patterns

Component Patterns

Technical requirements

Container and presentational components

Compound components

Render props pattern

Higher-order components

Further reading

Working with Forms

Working with Forms

Technical requirements

Creating a form with controlled components

Reducing boilerplate code with generic components

Validating forms

Form submission

Further reading

React Redux

Technical requirements

Principles and key concepts

Installing Redux

Creating actions

Creating reducers

Creating a store

Connecting our React app to the store

Managing state with useReducer

Further reading

Interacting with RESTful APIs

Interacting with RESTful APIs

Technical requirements

Writing asynchronous code

Using axios with class components

Using axios with function components

Further reading

Interacting with GraphQL APIs

Interacting with GraphQL APIs

Technical requirements

GraphQL query and mutation syntax

Using axios as a GraphQL client

Using Apollo GraphQL client

Working with cached data in Apollo

Further reading

Unit Testing with Jest

Unit Testing with Jest

Technical requirements

Testing pure functions

Testing components

Using Jest snapshot tests

Mocking dependencies

Getting code coverage

Further reading

Answers

Chapter 1: TypeScript Basics

Chapter 2: What is New in TypeScript 3

Chapter 3: Getting Started with React and TypeScript

Chapter 4: Routing with React Router

Chapter 5: Advanced Types

Chapter 6: Component Patterns

Chapter 7: Working with Forms

Chapter 8: React Redux

Chapter 9: Interacting with RESTful APIs

Chapter 10: Interacting with GraphQL APIs

Chapter 11: Unit Testing with Jest

Other Books You May Enjoy

Other Books You May Enjoy

Leave a review - let other readers know what you think

Customer Reviews

5 star

0

4 star

0

3 star

0

2 star

0

1 star

0

Technical requirements

We use the following technologies in this chapter:

Node.js and npm: TypeScript and React are dependent on these. We can install them from https://nodejs.org/en/download/. If we already have these installed, make sure npm is at least at version 5.2.

Visual Studio Code: We'll need an editor to write our React and TypeScript code, which can be installed from https://code.visualstudio.com/. We will also need the TSLint (by egamma) and Prettier (by Estben Petersen) extensions installed within Visual Studio Code.

GitHub: We'll need a GitHub account. We can sign up at the following link if we haven't got an account: https://github.com/join.

GitHub GraphQL API Explorer: We'll use this tool to play with the syntax of GraphQL queries and mutations. The tool is at https://developer.github.com/v4/explorer/.

All the code snippets in this...