Learn React with TypeScript: A beginner's guide to reactive web development with React 18 and TypeScript,

✍ Scribed by Carl Rippon

• Publisher: Packt Publishing
• Year: 2023
• Tongue: English
• Leaves: 474
• Edition: 2
• Category: Library

✦ Synopsis

Take your first step in building modern-day component-based web apps using the latest features and capabilities of React and TypeScript with this easy-to-follow guide

Key Features

• Learn to use different React hooks with TypeScript
• Explore different styling approaches while building React web apps
• Gain experience in using React Dev Tools to debug components
• Purchase of the print or Kindle book includes a free PDF eBook

Book Description

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.

What you will learn

• Gain first-hand experience of TypeScript and its productivity features
• Understand how to transpile your TypeScript code into JavaScript for running in a browser
• Build a React frontend codebase with hooks
• Interact with REST and GraphQL web APIs
• Design and develop strongly typed reusable components
• Create automated component tests

Who this book is for

This book is for experienced frontend developers looking to build large scale web applications using React and TypeScript. Intermediate knowledge of JavaScript, HTML and CSS is a prerequisite.

Table of Contents

1. Introducing React
2. Introducing TypeScript
3. Setting Up React and TypeScript
4. Using React Hooks
5. Approaches to Styling React Frontends
6. Routing with React Router
7. Working with Forms
8. State Management
9. Interacting with RESTful APIs
10. Interacting with GraphQL APIs
11. Reusable Components
12. Unit Testing with Jest and React Testing Library

✦ Table of Contents

Preface
Part 1: Introduction
Chapter 1: Introducing React
Technical requirements
Understanding the benefits of React
Understanding JSX
Creating a component
Creating a CodeSandbox project
Understanding the React entry point
Understanding the React component tree
Creating a basic alert component
Understanding imports and exports
Understanding the importance of modules
Using export statements
Using import statements
Adding Alert to the App component
Using props
Understanding props
Adding props to the alert component
Using state
Understanding state
Implementing a visible state in the alert component
Adding a close button to Alert
Using events
Understanding events
Implementing a close button click handler in the alert
Implementing an alert close event
Summary
Questions
Answers
Chapter 2: Introducing TypeScript
Technical requirements
Understanding the benefits of TypeScript
Understanding TypeScript
Catching type errors early
Improving developer experience and productivity with IntelliSense
Understanding JavaScript types
Using basic TypeScript types
Using type annotations
Using type inference
Using the Date type
Using the any type
Using the unknown type
Using the void type
Using the never type
Using arrays
Creating TypeScript types
Using object types
Creating type aliases
Creating interfaces
Creating classes
Creating enumerations
Creating union types
Using the TypeScript compiler
Summary
Questions
Answers
Chapter 3: Setting Up React and TypeScript
Technical requirements
Creating a project with webpack
Introducing webpack
Creating the folder structure
Creating package.json
Adding a web page
Adding TypeScript
Adding React
Adding Babel
Adding webpack
Creating a project with Create React App
Using Create React App
Adding linting to Visual Studio Code
Adding code formatting
Starting the app in development mode
Producing a production build
Creating a React and TypeScript component
Adding a props type
Adding a state type
Using React DevTools
Summary
Questions
Answers
Chapter 4: Using React Hooks
Technical requirements
Using the effect Hook
Understanding the effect Hook parameters
The rules of Hooks
Effect cleanup
Creating the project
Fetching data using the effect Hook
Using state Hooks
Using useState
Understanding useReducer
Using useReducer
Using the ref Hook
Understanding the ref Hook
Using the ref Hook
Using the memo Hook
Understanding the memo Hook
Using the memo Hook
Using the callback Hook
Understanding the callback Hook
Understanding when a component is re-rendered
Using the callback Hook
Summary
Questions
Answers
Part 2: App Fundamentals
Chapter 5: Approaches to Styling React Frontends
Technical requirements
Using plain CSS
Creating the project
Understanding how to reference CSS
Using plain CSS in the alert component
Experiencing CSS clashes
Using CSS modules
Understanding CSS modules
Using CSS modules in the alert component
Using CSS-in-JS
Understanding CSS-in-JS
Using Emotion in the alert component
Using Tailwind CSS
Understanding Tailwind CSS
Installing and configuring Tailwind CSS
Using Tailwind CSS
Using SVGs
Understanding how to use SVGs in React
Adding SVGs to the alert component
Summary
Questions
Answers
Chapter 6: Routing with React Router
Technical requirements
Introducing React Router
Creating the project
Understanding React Router
Installing React Router
Declaring routes
Creating the products list page
Understanding React Router’s router
Declaring the products route
Creating navigation
Using the Link component
Using the NavLink component
Using nested routes
Understanding nested routes
Using nested routes in the app
Using route parameters
Understanding route parameters
Using route parameters in the app
Creating an error page
Understanding error pages
Adding an error page
Using index routes
Understanding index routes
Using an index route in the app
Using search parameters
Understanding search parameters
Adding search functionality to the app
Navigating programmatically
Using form navigation
Implementing lazy loading
Understanding React lazy loading
Adding a lazy admin page to the app
Summary
Questions
Answers
Chapter 7: Working with Forms
Technical requirements
Using controlled fields
Creating the project
Creating a contact form
Using uncontrolled fields
Using React Router Form
Using native validation
Using React Hook Form
Understanding React Hook Form
Using React Hook Form
Adding validation
Summary
Questions
Answers
Part 3: Data
Chapter 8: State Management
Technical requirements
Creating the project
Using prop drilling
Using React context
Understanding React context
Using React context
Using Redux
Understanding Redux
Installing Redux
Using Redux
Summary
Questions
Answers
Chapter 9: Interacting with RESTful APIs
Technical requirements
Creating the project
Setting up the project
Understanding the component structure
Creating a REST API
Using the effect hook with fetch
Getting blog posts using fetch
Strongly typing response data
Creating a blog posts list component
Creating a blog posts page component
Posting data with fetch
Creating new blog posts using fetch
Creating a blog post form component
Using React Router
Understanding React Router data loading
Using React Router for data loading
Deferred React Router data fetching
Using React Query
Installing React Query
Adding the React Query provider
Getting data using React Query
Updating data using React Query
Using React Router with React Query
Summary
Questions
Answers
Chapter 10: Interacting with GraphQL APIs
Technical requirements
Understanding the GraphQL syntax
Returning flat data
Returning hierarchical data
Specifying query parameters
GraphQL mutations
Setting up the project
Creating the project
Creating a PAT for the GitHub GraphQL API
Creating environment variables
Using React Query with fetch
Creating the header
Creating the repository page
Using Apollo Client
Understanding Apollo Client
Installing Apollo Client
Refactoring the App component
Refactoring the Header component
Refactoring the repository page
Summary
Questions
Answers
Part 4: Advanced React
Chapter 11: Reusable Components
Technical requirements
Creating the project
Using generic props
Understanding generics
Creating a basic list component
Using props spreading
Using render props
Understanding the render props pattern
Adding a renderItem prop
Adding checked functionality
Creating custom hooks
Understanding custom hooks
Extracting checked logic into a custom hook
Allowing the internal state to be controlled
Understanding how the internal state can be controlled
Allowing checkedIds to be controlled
Summary
Questions
Answers
Chapter 12: Unit Testing with Jest and React Testing Library
Technical requirements
Testing pure functions
Understanding a Jest test
Testing isChecked
Testing exceptions
Running tests
Testing components
Understanding React Testing Library
Implementing checklist component tests
Using test IDs
Simulating user interactions
Understanding fireEvent and user-event
Implementing checklist tests for checking items
Getting code coverage
Running code coverage
Understanding the code coverage report
Gaining full coverage on the checklist component
Ignoring files in the coverage report
Summary
Questions
Answers
Index
Other Books You May Enjoy