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
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

Container and presentational components

Splitting pages up into container and presentational components makes the presentational component easier to reuse. The container component is responsible for how things work, fetching any data from a web API and managing state. The presentational component is responsible for how things look. Presentational components receive data via their properties and also have property event handlers so that their container can manage the user interactions.

We are going use this pattern in our React shop to split the product page into container and presentational components. The ProductPage component will be the container and we'll introduce a new component called Product that will be the presentational component:

  1. Let's start by opening our shop project in Visual Studio Code and entering the following command in a terminal to start the app...
Previous Section
End of Section 3
Next Section