React - The Complete Guide (includes Hooks, React Router, and Redux) - Second Edition

Table of Contents

Chapter 1 : Getting Started

Welcome to the Course!

What is React.js?

Why React Instead of Just JavaScript?

Building Single-Page Applications (SPAs) with React

Exploring React.js Alternatives (Angular/Vue)

About This Course and Course Outline

The Two Ways (Paths) of Taking This Course

Getting the Most Out of This Course

Setting Up the Course Dev Environment

Chapter 2 : Optional: JavaScript Refresher

Module Introduction

Understanding “let” and “const”

Arrow Functions

Exports and Imports

Understanding Classes

Classes, Properties, and Methods

The Spread and Rest Operator

Destructuring

Reference and Primitive Types Refresher

Refreshing Array Functions

Wrap Up

Chapter 3 : React Basics and Working with Components

Module Introduction

What are Components? And Why is React All About Them?

React Code is Written in a Declarative Way

Creating a New React Project

Analyzing a Standard React Project

Introducing JSX

How React Works

Building a First Custom Component

Writing More Complex JSX Code

Adding Basic CSS Styling

Outputting Dynamic Data and Working with Expressions in JSX

Passing Data Via “props”

Adding “normal” JavaScript Logic to Components

Splitting Components into Multiple Components

Time to Practice: React and Component Basics - Problem

Time to Practice: React and Component Basics - Solution

The Concept of “Composition” (“children props”)

A First Summary

A Closer Look at JSX

Organizing Component Files

An Alternative Function Syntax

Chapter 4 : React State and Working with Events

Module Introduction

Listening to Events and Working with Event Handlers

How Component Functions are Executed

Working with “State”

A Closer Look at the “useState” Hook

Adding Form Inputs

Listening to User Input

Working with Multiple States

Using One State Instead (and What’s Better)

Updating State that Depends on the Previous State

Handling Form Submission

Adding Two-Way Binding

Child-to-Parent Component Communication

Lifting the State Up

Time to Practice: Working with Events and State - Problem

Time to Practice: Working with Events and State - Solution

Controlled Versus Uncontrolled Components and Stateless Versus Stateful Components

Chapter 5 : Rendering Lists and Conditional Content

Module Introduction

Rendering Lists of Data

Using Stateful Lists

Understanding “Keys”

Time to Practice: Working with Lists - Problem

Time to Practice: Working with Lists - Solution

Outputting Conditional Content

Adding Conditional Return Statements

Time to Practice: Conditional Content - Problem

Time to Practice: Conditional Content - Solution

Demo App: Adding a Chart

Adding Dynamic Styles

Wrap Up and Next Steps

Chapter 6 : Styling React Components

Module Introduction

Setting Dynamic Inline Styles

Setting CSS Classes Dynamically

Introducing Styled Components

Styled Components and Dynamic Props

Styled Components and Media Queries

Using CSS Modules

Dynamic Styles with CSS Modules

Chapter 7 : Debugging React Apps

Module Introduction

Understanding React Error Messages

Analyzing Code Flow and Warnings

Working with Breakpoints

Using the React DevTools

Chapter 8 : Time to Practice: A Complete Practice Project

Module Introduction

Adding a “User” Component

Adding a Reusable “Card” Component

Adding a Reusable “Button” Component

Managing the User Input State

Adding Validation and Resetting Logic

Adding a User List Component

Managing a List of Users Through State

Adding the “ErrorModal” Component

Managing the Error State

Chapter 9 : Diving Deeper: Working with Fragments, Portals, and “Refs”

Module Introduction

JSX Limitations and Workarounds

Creating a Wrapper Component

React Fragments

Introducing React Portals

Working with Portals

Working with “refs”

Controlled Versus Uncontrolled Components

Chapter 10 : Advanced: Handling Side Effects, Using Reducers, and Using the Context API

Module Introduction

What are “Side Effects” and Introducing useEffect()

Using the useEffect() Hook

useEffect() and Dependencies

Using the useEffect() Cleanup Function

useEffect() Summary

Introducing useReducer() and Reducers in General

Using the useReducer() Hook

useReducer() and useEffect()

useReducer() Versus useState() for State Management

Introducing React Context

Using the React Context API

Tapping into Context with the useContext() Hook

Making Context Dynamic

Building and Using a Custom Context Provider Component

React Context Limitations

Learning the “Rules of Hooks”

Refactoring an Input Component

Diving into “Forward Refs”

Chapter 11 : Practice Project: Building a Food Order App

Module Introduction

Starting Setup

Adding a “Header” Component

Adding the “Cart” Button Component

Adding a “Meals” Component

Adding Individual Meal Items and Displaying Them

Adding a Form

Working on the “Shopping Cart” Component

Adding a Modal via a React Portal

Managing Cart and Modal State

Adding a Cart Context

Using the Context

Adding a Cart Reducer

Working with Refs and Forward Refs

Outputting Cart Items

Working on a More Complex Reducer Logic

Making Items Removable

Using the useEffect() Hook

Chapter 12 : A Look Behind the Scenes of React and Optimization Techniques

Module Introduction

How React Really Works

Component Updates in Action

A Closer Look at Child Component Re-Evaluation

Preventing Unnecessary Re-Evaluations with React.memo()

Preventing Function Recreation with useCallback()

useCallback() and its Dependencies

A First Summary

A Closer Look at State and Components

Understanding State Scheduling and Batching

Optimizing with useMemo()

Chapter 13 : An Alternative Way of Building Components: Class-Based Components

Module Introduction

What and Why

Adding the First Class-Based Component

Working with State and Events

The Component Lifecycle (Class-Based Components Only)

Lifecycle Methods in Action

Class-Based Components and Context

Class-based versus Functional Components: A Summary

Introducing Error Boundaries

Chapter 14 : Sending HTTP Requests

Module Introduction

How to Connect to a Database

Our Starting App and Backend

Sending a GET Request

Using async/await

Handling Loading and Data States

Handling HTTP Errors

Using useEffect() for Requests

Preparing the Project for the Next Steps

Sending a POST Request

Wrap Up

Chapter 15 : Building Custom React Hooks

Module Introduction

What are “Custom Hooks”?

Creating a Custom React Hook Function

Using Custom Hooks

Configuring Custom Hooks

Onwards to a More Realistic Example

Building a Custom HTTP Hook

Using the Custom HTTP Hook

Adjusting the Custom Hook Logic

Using the Custom Hook in More Components

Chapter 16 : Working with Forms and User Input

Module Introduction

Our Starting Setup

What’s so Complex about Forms?

Dealing with Form Submission and Getting User Input Values

Adding Basic Validation

Providing Validation Feedback

Handling the “was touched” State

React to Lost Focus

Refactoring and Deriving States

Managing the Overall Form Validity

Time to Practice: Forms - Problem

Time to Practice: Forms - Solution

Adding a Custom Input Hook

Reusing the Custom Hook

A Challenge for You!

Applying Our Hook and Knowledge to a New Form

Summary

Bonus: Using useReducer()

Chapter 17 : Practice Project: Adding HTTP and Forms to the Food Order App

Module Introduction

Moving “Meals” Data to the Backend

Fetching Meals via HTTP

Handling the Loading State

Handling Errors

Adding A Checkout Form

Reading Form Values

Adding Form Validation

Submitting and Sending Cart Data

Adding Better User Feedback

Summary

Chapter 18 : Diving into Redux

Module Introduction

Another Look at State in React Apps

Redux versus React Context

How Redux Works

Exploring the Core Redux Concepts

More Redux Basics

Preparing a New Project

Creating a Redux Store for React

Providing the Store

Using Redux Data in React Components

Dispatching Actions from Inside Components

Redux with Class-Based Components

Attaching Payloads to Actions

Working with Multiple State Properties

How to Work with Redux State Correctly

Redux Challenges and Introducing Redux Toolkit

Adding State Slices

Connecting Redux Toolkit State

Migrating Everything to Redux Toolkit

Working with Multiple Slices

Reading and Dispatching from a New Slice

Splitting Our Code

Summary

Chapter 19 : Advanced Redux

Module Introduction

Redux and Side Effects (and Asynchronous Code)

Refresher/Practice: Part 1

Refresher/Practice: Part 2

Redux and Async Code

Frontend Code Versus Backend Code

Where to Put Our Logic

Using useEffect() with Redux

Handling HTTP States and Feedback with Redux

Using an Action Creator Thunk

Getting Started with Fetching Data

Finalizing the Fetching Logic

Exploring the Redux DevTools

Summary

Chapter 20 : Building a Multi-Page SPA with React Router

Module Introduction

What is Routing and Why?

Installing React Router

Defining and Using Routes

Working with Links

Using NavLinks

Adding Dynamic Routes with Params

Extracting Route Params

Using “Switch” and “exact” for Configuring Routes

Working with Nested Routes

Redirecting the User

Time to Practice: Onwards to a New Project

Practice Redirecting and Extracting Params

Practicing Nested Routes

Adding a Layout Wrapper Component

Adding Dummy Data and More Content

Outputting Data on the “Details” Page

Adding a “Not Found” Page

Implementing Programmatic (Imperative) Navigation

Preventing Possibly Unwanted Route Transitions with the “Prompt” Component

Working with Query Parameters

Getting Creative with Nested Routes

Writing More Flexible Routing Code

Sending and Getting Quote Data via HTTP

Adding the “Comments” Feature

Upgrading to React Router v6

Chapter 21 : Deploying React Apps

Module Introduction

Deployment Steps

Adding Lazy Loading

Building the Code for Production

Getting Started with Deployment (Uploading Files)

Exploring Routing Issues and Finishing Deployment

Chapter 22 : Authentication

Module Introduction

What, How, and Why?

Starting Setup and First Steps

Adding User Signup

Showing Feedback to the User

Adding User Login

Managing the Auth State with Context

Using the Token for Requests to Protected Resources

Redirecting the User

Adding Logout

Protecting Frontend Pages

Persisting the User Authentication Status

Adding Auto-Logout

Finishing Steps

Chapter 23 : An Introduction to Next.js

Module Introduction

What is NextJS?

Key Feature 1: Built-In Server-Side Rendering (Improved SEO)

Key Feature 2: Simplified Routing with File-Based Routing

Key Feature 3: Build Fullstack Apps

Creating a New Next.js Project and App

Analyzing the Created Project

Adding First Pages

Adding Nested Paths and Pages (Nested Routes)

Creating Dynamic Pages (with Parameters)

Extracting Dynamic Parameter Values

Linking Between Pages

Onwards to a Bigger Project

Preparing the Project Pages

Outputting a List of Meetups

Adding the New Meetup Form

The “_app.js” File and Layout Wrapper

Using Programmatic (Imperative) Navigation

Adding Custom Components and CSS Modules

How Pre-Rendering Works and Which Problem We Face

Data Fetching for Static Pages

Static Site Generation (SSG)

Exploring Server-side Rendering (SSR) with “getServerSideProps”

Working with Params for SSG Data Fetching

Preparing Paths with “getStaticPaths” and Working with Fallback Pages

Introducing API Routes

Working with MongoDB

Sending HTTP Requests to Our API Routes

Getting Data from the Database

Getting Meetup Details Data and Preparing Pages

Adding “head” Metadata

Deploying Next.js Projects

Using Fallback Pages and Redeploying

Summary

Chapter 24 : Animating React Apps

Module Introduction

Preparing the Demo Project

Using CSS Transitions

Using CSS Animations

CSS Transition and Animations Limitations

Using ReactTransitionGroup

Using the Transition Component

Wrapping the Transition Component

Animation Timings

Transition Events

The CSSTransition Component

Customizing CSS Classnames

Animating Lists

Alternative Animation Packages

Wrap Up

Chapter 25 : Replacing Redux with React Hooks

Module Introduction

Starting Project and Why You Would Replace Redux

Alternative: Using the Context API

Toggling Favorites with the Context API

Context API Summary

Getting Started with a Custom Hook as a Store

Finishing the Store Hook

Creating a Concrete Store

Using the Custom Store

Custom Hook Store Summary

Optimizing the Custom Hook Store

Wrap Up

Chapter 26 : Testing React Apps

Module Introduction

What and Why?

Understanding Different Kinds of Tests

What to Test and How to Test

Understanding the Technical Setup and Involved Tools

Running the First Test

Writing Our First Test

Grouping Tests Together with Test Suites

Testing User Interaction and State

Testing Connected Components

Testing Asynchronous Code

Working with Mocks

Summary and Further Resources

Chapter 27 : React and TypeScript

Module Introduction

What and Why?

Installing and Using TypeScript

Exploring the Base Types

Working with Array and Object Types

Understanding Type Inference

Using Union Types

Understanding Type Aliases

Functions and Function Types

Diving into Generics

Creating a React + TypeScript Project

Working with Components and TypeScript

Working with Props and TypeScript

Adding a Data Model

Time to Practice: Exercise Time!

Form Submissions in TypeScript Projects

Working with refs and useRef()

Working with “Function Props”

Managing State and TypeScript

Adding Styling

Time to Practice: Removing a Todo

The Context API and TypeScript

Summary

Bonus: Exploring tsconfig.json

Chapter 28 : Optional: React Hooks Introduction and Summary

Module Introduction

What are React Hooks?

The Starting Project

Getting Started with useState()

More on useState() and State Updating

Array Destructuring

Multiple States

Rules of Hooks

Passing State Data Across Components

Time to Practice: Hooks Basics - Problem

Time to Practice: Hooks Basics - Solution

Sending HTTP Requests

useEffect() and Loading Data

Understanding useEffect() Dependencies

More on useEffect()

What’s useCallback()?

Working with Refs and useRef()

Cleaning Up with useEffect()

Deleting Ingredients

Loading Errors and State Batching

Understanding useReducer()

Using useReducer() for the HTTP State

Working with useContext()

Performance Optimizations with useMemo()

Getting Started with Custom Hooks

Sharing Data Between Custom Hooks and Components

Using the Custom Hook

Wrap Up

Chapter 29 : Optional: React Summary and Core Feature Walkthrough

Module Introduction

What is React?

Why React?

Building SPAs (Single-Page Applications)

React Alternatives

Creating a React Project

Setting Up a Code Editor

Diving into the Created Project

How React Works and Understanding Components

More Component Work and Styling with CSS Classes

Building and Reusing Another Component

Working with “props” and Dynamic Content

Handling Events

Adding More Components

Introducing State

Working with “Event Props” (Passing Function as Props)

Adding Routing

Adding Links and Navigation

Styling with CSS Modules

Outputting Lists of Data

Adding More React Components

Building Wrapper Components with props.children

Adding a Form

Getting User Input and Handling Form Submission

Preparing the App for HTTP

Sending a POST Request

Navigating Programmatically

Getting Started with Fetching Data

Using the useEffect() Hook

Introducing React Context

Context Logic and Different Ways of Updating State

Using Context in Components

More Context Usage

Summary

Chapter 30 : Course Roundup

What Now? Next Steps You Could Take!

Explore the React Ecosystem!

Finishing Thoughts