Learn react with typescript : a beginner's guide to reactive web development with react 18 and typescript / Carl Rippon.

Format:

Book

Author/Creator:

Rippon, Carl, author.

Language:

English

Subjects (All):

TypeScript (Computer program language).

Web site development.

Application software--Development.

Application software.

Physical Description:

1 online resource (474 pages)

Edition:

Second edition.

Place of Publication:

Birmingham, England ; Mumbai : Packt Publishing, [2023]

Biography/History:

Rippon Carl: Carl Rippon has been in the software industry for over 20 years developing a complex lines of business applications in various sectors. He has spent the last 8 years building single-page applications using a wide range of JavaScript technologies including Angular, ReactJS, and TypeScript. Carl has also written over 100 blog posts on various technologies.

Summary:

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.

Contents:

Intro

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

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

Chapter 3: Setting Up React and TypeScript

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

Chapter 4: Using React Hooks

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

Understanding the memo Hook

Using the callback Hook

Understanding the callback Hook

Understanding when a component is re-rendered

Part 2: App Fundamentals

Chapter 5: Approaches to Styling React Frontends

Using plain CSS

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 SVGs

Understanding how to use SVGs in React

Adding SVGs to the alert component

Chapter 6: Routing with React Router

Introducing React Router

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

Chapter 7: Working with Forms

Using controlled fields

Creating a contact form

Using uncontrolled fields

Using React Router Form

Using native validation

Using React Hook Form

Understanding React Hook Form

Adding validation

Part 3: Data

Chapter 8: State Management

Using prop drilling

Using React context

Understanding React context

Using Redux

Understanding Redux

Installing Redux

Chapter 9: Interacting with RESTful APIs

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

Chapter 10: Interacting with GraphQL APIs

Understanding the GraphQL syntax

Returning flat data

Returning hierarchical data

Specifying query parameters

GraphQL mutations

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

Part 4: Advanced React

Chapter 11: Reusable Components

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

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

Index

Other Books You May Enjoy.

Notes:

Includes index.

Description based on print version record.

ISBN:

9781804611050

1804611050

OCLC:

1372557205