Learn React with TypeScript: A beginner’s guide to reactive web development with React 18 and TypeScript, 2nd Edition

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