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.

Related Content you might be interested in

No titles found
Table of Contents (14 chapters)
Preface
Preface
Who this book is for
What this book covers
To get the most out of this book
Get in touch
Free Chapter
1
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
Summary
Questions
Further reading
2
What is New in TypeScript 3
What is New in TypeScript 3
Technical requirements
Tuples
The unknown type
Project references
Default JSX properties
Summary
Questions
Further reading
3
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
Summary
Questions
Further reading
4
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
Route prompts
Nested routes
Animated transitions
Lazy loading routes
Summary
Questions
Further reading
5
Advanced Types
Advanced Types
Technical requirements
Union types
Type guards
Generics
Overload signatures
Lookup and mapped types
Summary
Questions
Further reading
6
Component Patterns
Component Patterns
Technical requirements
Container and presentational components
Compound components
Render props pattern
Higher-order components
Summary
Questions
Further reading
7
Working with Forms
Working with Forms
Technical requirements
Creating a form with controlled components
Reducing boilerplate code with generic components
Validating forms
Form submission
Summary
Questions
Further reading
8
React Redux
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
Summary
Questions
Further reading
9
Interacting with RESTful APIs
Interacting with RESTful APIs
Technical requirements
Writing asynchronous code
Using fetch
Using axios with class components
Using axios with function components
Summary
Questions
Further reading
10
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
Summary
Questions
Further reading
11
Unit Testing with Jest
Unit Testing with Jest
Technical requirements
Testing pure functions
Testing components
Using Jest snapshot tests
Mocking dependencies
Getting code coverage
Summary
Questions
Further reading
12
Answers
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
13
Other Books You May Enjoy
Other Books You May Enjoy
Leave a review - let other readers know what you think

Working with cached data in Apollo

We ended the last section with a bit of a mystery. Why aren't we getting the up-to-date number of stars in a repository search after we've started it? The answer is that Apollo caches the repository data after the initial search. When the same query is executed, it gets the results from its cache, rather than getting the data from the GraphQL server.

Let's double-check that this is the case:

  1. Let's go to our app and open Developer tools on the Network tab and clear any previous requests:
  1. Let's do a search. We'll see a couple of requests to the GitHub GraphQL server:
  1. Under the Developer tools, Network tab, let's clear the requests, and then in our app let's click the Search button again. We'll see that no network requests will be made, but the data is rendered. So, the data must be coming from...
Previous Section
End of Section 6
Next Section