Book Image

Learn React with TypeScript - Second Edition

By : Carl Rippon
4.4 (8)
Book Image

Learn React with TypeScript - Second Edition

4.4 (8)
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.

Related Content you might be interested in

Current Title:

Small book image
Learn React with TypeScript - Second Edition
Carl Rippon
Mar, 2023 | 474 pages
Small book image
Learn React with TypeScript 3
Carl Rippon
Nov, 2018 | 502 pages
Small book image
ASP.NET Core 5 and React
Carl Rippon
Jan, 2021 | 568 pages
Small book image
ASP.NET Core 3 and React
Carl Rippon
Dec, 2019 | 598 pages
Table of Contents (19 chapters)
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
1
Part 1: Introduction
Part 1: Introduction
Free Chapter
2
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
3
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
4
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
5
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
6
Part 2: App Fundamentals
Part 2: App Fundamentals
7
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
8
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
9
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
10
Part 3: Data
Part 3: Data
11
Chapter 8: State Management
Chapter 8: State Management
Technical requirements
Creating the project
Using prop drilling
Using React context
Using Redux
Summary
Questions
Answers
12
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
13
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
14
Part 4: Advanced React
Part 4: Advanced React
15
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
16
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
17
Index
Index
Why subscribe?
18
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

Creating navigation

React Router comes with components called Link and NavLink, which provide navigation. In this section, we will create a navigation bar at the top of the app containing the Link component from React Router. We will then swap Link for the NavLink component and understand the difference between the two components.

Using the Link component

Carry out the following steps to create an app header containing React Router’s Link component:

  1. Start by creating a file for the app header called Header.tsx in the src folder containing the following import statements:
    import { Link } from 'react-router-dom';
    import logo from './logo.svg';

We have imported the Link component from React Router.

We have also imported the React logo because we will include this in the app header with the navigation options.

  1. Create the Header component as follows:
    export function Header() {
      return (
        <header className...
Previous Section
End of Section 5
Next Section