Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Sign In Start Free Trial

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying Learn React with TypeScript
  • Table Of Contents Toc
Learn React with TypeScript

Learn React with TypeScript - Second Edition

By : Carl Rippon
4.5 (20)
Buy this Book
close
close
Learn React with TypeScript

Learn React with TypeScript

4.5 (20)
By: Carl Rippon
Buy this Book

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.
Table of Contents (19 chapters)
close
close
close
Preface
Icon
Preface
Icon
Who this book is for
Icon
What this book covers
Icon
To get the most out of this book
Icon
Download the example code files
Icon
Download the color images
Icon
Conventions used
Icon
Get in touch
Icon
Share Your Thoughts
Icon
Download a free PDF copy of this book
1
Part 1: Introduction
Icon
Part 1: Introduction
Lock Free Chapter
2
Chapter 1: Introducing React
Icon
Chapter 1: Introducing React
Icon
Technical requirements
Icon
Understanding the benefits of React
Icon
Understanding JSX
Icon
Creating a component
Icon
Understanding imports and exports
Icon
Using props
Icon
Using state
Icon
Using events
Icon
Summary
Icon
Questions
Icon
Answers
3
Chapter 2: Introducing TypeScript
Icon
Chapter 2: Introducing TypeScript
Icon
Technical requirements
Icon
Understanding the benefits of TypeScript
Icon
Understanding JavaScript types
Icon
Using basic TypeScript types
Icon
Creating TypeScript types
Icon
Using the TypeScript compiler
Icon
Summary
Icon
Questions
Icon
Answers
4
Chapter 3: Setting Up React and TypeScript
Icon
Chapter 3: Setting Up React and TypeScript
Icon
Technical requirements
Icon
Creating a project with webpack
Icon
Creating a project with Create React App
Icon
Creating a React and TypeScript component
Icon
Summary
Icon
Questions
Icon
Answers
5
Chapter 4: Using React Hooks
Icon
Chapter 4: Using React Hooks
Icon
Technical requirements
Icon
Using the effect Hook
Icon
Using state Hooks
Icon
Using the ref Hook
Icon
Using the memo Hook
Icon
Using the callback Hook
Icon
Summary
Icon
Questions
Icon
Answers
6
Part 2: App Fundamentals
Icon
Part 2: App Fundamentals
7
Chapter 5: Approaches to Styling React Frontends
Icon
Chapter 5: Approaches to Styling React Frontends
Icon
Technical requirements
Icon
Using plain CSS
Icon
Using CSS modules
Icon
Using CSS-in-JS
Icon
Using Tailwind CSS
Icon
Using SVGs
Icon
Summary
Icon
Questions
Icon
Answers
8
Chapter 6: Routing with React Router
Icon
Chapter 6: Routing with React Router
Icon
Technical requirements
Icon
Introducing React Router
Icon
Declaring routes
Icon
Creating navigation
Icon
Using nested routes
Icon
Using route parameters
Icon
Creating an error page
Icon
Using index routes
Icon
Using search parameters
Icon
Navigating programmatically
Icon
Using form navigation
Icon
Implementing lazy loading
Icon
Summary
Icon
Questions
Icon
Answers
9
Chapter 7: Working with Forms
Icon
Chapter 7: Working with Forms
Icon
Technical requirements
Icon
Using controlled fields
Icon
Using uncontrolled fields
Icon
Using React Router Form
Icon
Using native validation
Icon
Using React Hook Form
Icon
Summary
Icon
Questions
Icon
Answers
10
Part 3: Data
Icon
Part 3: Data
11
Chapter 8: State Management
Icon
Chapter 8: State Management
Icon
Technical requirements
Icon
Creating the project
Icon
Using prop drilling
Icon
Using React context
Icon
Using Redux
Icon
Summary
Icon
Questions
Icon
Answers
12
Chapter 9: Interacting with RESTful APIs
Icon
Chapter 9: Interacting with RESTful APIs
Icon
Technical requirements
Icon
Creating the project
Icon
Using the effect hook with fetch
Icon
Posting data with fetch
Icon
Using React Router
Icon
Using React Query
Icon
Using React Router with React Query
Icon
Summary
Icon
Questions
Icon
Answers
13
Chapter 10: Interacting with GraphQL APIs
Icon
Chapter 10: Interacting with GraphQL APIs
Icon
Technical requirements
Icon
Understanding the GraphQL syntax
Icon
Setting up the project
Icon
Using React Query with fetch
Icon
Using Apollo Client
Icon
Summary
Icon
Questions
Icon
Answers
14
Part 4: Advanced React
Icon
Part 4: Advanced React
15
Chapter 11: Reusable Components
Icon
Chapter 11: Reusable Components
Icon
Technical requirements
Icon
Creating the project
Icon
Using generic props
Icon
Using props spreading
Icon
Using render props
Icon
Adding checked functionality
Icon
Creating custom hooks
Icon
Allowing the internal state to be controlled
Icon
Summary
Icon
Questions
Icon
Answers
16
Chapter 12: Unit Testing with Jest and React Testing Library
chevron up
Icon
Chapter 12: Unit Testing with Jest and React Testing Library
Icon
Technical requirements
Icon
Testing pure functions
Icon
Testing components
Icon
Simulating user interactions
Icon
Getting code coverage
Icon
Summary
Icon
Questions
Icon
Answers
17
Index
Icon
Index
Icon
Why subscribe?
18
Other Books You May Enjoy
Icon
Other Books You May Enjoy
Icon
Packt is searching for authors like you
Icon
Share Your Thoughts
Icon
Download a free PDF copy of this book

Testing components

Testing components is important because this is what the user interacts with. Having automated tests on components gives us confidence that the app is working correctly and helps prevent regressions when we change code.

In this section, we will learn how to test components with Jest and React Testing Library. Then, we will create some tests on the checklist component we developed in the last chapter.

Understanding React Testing Library

React Testing Library is a popular companion library for testing React components. It provides functions to render components and then select internal elements. Those internal elements can then be checked using special matchers provided by another companion library called jest-dom.

A basic component test

Here’s an example of a component test:

test('should render heading when content specified', () => {
  render(<Heading>Some heading</Heading>);
  const heading =...
CONTINUE READING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 50+ new titles added per month and exclusive early access to books as they are being written.
Learn React with TypeScript
End of Section 16
Next Section
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist download Download options
font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Confirmation

Modal Close icon
claim successful
Order Page Read Now

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon