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

Current Title:

Small book image
Learn React with TypeScript 3
Carl Rippon
Nov, 2018 | 502 pages
Small book image
Learn React with TypeScript
Carl Rippon
Mar, 2023 | 474 pages
Small book image
ASP.NET Core 3 and React
Carl Rippon | Jason Watmore
Dec, 2019 | 598 pages
Small book image
ASP.NET Core 5 and React
Carl Rippon
Jan, 2021 | 568 pages
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

Questions

Check whether all that information about forms in React and TypeScript has stuck by trying the following implementations:

  1. Extend our generic Field component to include a number editor, using the native number input.
  2. Implement an urgency field on the Contact Us form to indicate how urgent a response is. The field should be numeric.
  3. Implement a new validator function in the generic Form component, which validates whether a number falls between two other numbers.
  1. Implement a validation rule on the urgency field to ensure the input is a number between 1 and 10.
  2. Our validation triggers when a user clicks in and out of a field without typing anything. How can we trigger validation when a field loses focus, but only when it has been changed?
Previous Section
End of Section 8
Next Section