Building a Multi-Page SPA with React Router | React - The Complete Guide (Includes Hooks, React Router, and Redux)

Book Overview & Buying
Table Of Contents

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

By : Academind by Maximilian Schwarzmüller GmbH

5 (3)

Buy this Video

React - The Complete Guide (Includes Hooks, React Router, and Redux)

5 (3)

By: Academind by Maximilian Schwarzmüller GmbH

Buy this Video

Overview of this book

*This course is now updated for React 18* This comprehensive React course takes you from beginner to expert, covering essential and advanced concepts to build modern, scalable applications. Starting with React fundamentals, you’ll dive into components, JSX, props, and state, gaining the skills to create dynamic and reusable interfaces. Hands-on exercises solidify your understanding as you move into real-world scenarios. The course covers key topics like Hooks for efficient state and lifecycle management, and React Router for building seamless single-page applications with dynamic routing. Redux and Context API modules teach advanced state management techniques, while sections on Forms and Form Actions simplify handling user inputs, validation, and asynchronous submissions. New content introduces Next.js, where you’ll master server-side rendering, file-based routing, and full-stack app development using React. You’ll also explore animations with Framer Motion, HTTP requests with React Query, and optimization strategies like useMemo and useCallback. Sections on testing, debugging, and deploying React apps prepare you for real-world challenges. Projects include a food order app, quiz app, and project management tool, allowing you to apply concepts to practical applications. By the end, you’ll be ready to excel in React development.

Getting Started

Welcome to the Course

What Is React? And Why Would You Use It?

ReactJS vs Vanilla JavaScript

Editing Our First React App

About the Course

One Course, Two Paths

How To Get The Most Out Of This Course

How To Create New React Projects

Why Do We Need A Special Project Setup?

JavaScript Refresher

Module Introduction

Starting Project

Adding JavaScript to a Page and How React Projects Differ

React Projects Use a Build Process

"import" and "export"

Revisiting Variables and Values

Revisiting Operators

Revisiting Functions and Parameters

Arrow Functions

Revisiting Objects and Classes

Arrays and Array Methods like map()

Destructuring

The Spread Operator

Revisiting Control Structures

Manipulating the DOM - Not With React!

Using Functions as Values

Defining Functions Inside Of Functions

Reference vs Primitive Values

React Essentials - Components, JSX, Props, State & More

Module Introduction

It's All About Components! [Core Concept]

Setting Up The Starting Project

JSX & React Components [Core Concept]

Creating & Using a First Custom Component

How React Handles Components & How It Builds A "Component Tree" [Core Concept]

Using & Outputting Dynamic Values [Core Concept]

Setting HTML Attributes Dynamically & Loading Image Files

Making Components Reusable with Props [Core Concept]

Alternative Props Syntaxes

Best Practice: Storing Components in Files & Using a Good Project Structure

Storing Component Style Files Next To Components

Component Composition: The special "children" Prop [Core Concept]

Reacting to Events [Core Concept]

Passing Functions as Values to Props

Passing Custom Arguments to Event Functions

How NOT to Update the UI - A Look Behind The Scenes of React [Core Concept]

Managing State & Using Hooks [Core Concept]

Deriving & Outputting Data Based on State

Rendering Content Conditionally

CSS Styling & Dynamic Styling

Outputting List Data Dynamically

Module Summary

React Essentials - Deep Dive

Module Introduction

You Don't Have To Use JSX!

Working with Fragments

When Should You Split Components?

Splitting Components By Feature & State

Problem: Props Are Not Forwarded To Inner Elements

Forwarding Props To Wrapped Elements

Working with Multiple JSX Slots

Setting Component Types Dynamically

Setting Default Prop Values

Onwards To The Next Project & Advanced Concepts

Not All Content Must Go Into Components

New Project: First Steps Towards Our Tic-Tac-Toe Game

Concept Repetition: Splitting Components & Building Reusable Components

Concept Repetition: Working with State

Component Instances Work In Isolation!

Conditional Content & A Suboptimal Way Of Updating State

Best Practice: Updating State Based On Old State Correctly

User Input & Two-Way-Binding

Rendering Multi-Dimensional Lists

Best Practice: Updating Object State Immutably

Lifting State Up [Core Concept]

Avoid Intersecting States!

Prefer Computed Values & Avoid Unnecessary State Management

Deriving State From Props

Sharing State Across Components

Reducing State Management & Identifying Unnecessary State

Disabling Buttons Conditionally

Outsourcing Data Into A Separate File

Lifting Computed Values Up

Deriving Computed Values From Other Computed Values

Tic-Tac-Toe Game: The "Game Over" Screen & Checking for a Draw

Why Immutability Matters - Always!

When NOT To Lift State Up

An Alternative To Lifting State Up

Final Polishing & Improving Components

React Essentials - Practice Project

Module Introduction & A Challenge For You!

Adding a Header Component

Getting Started with a User Input Component

Handling Events & Using Two-Way-Binding

Lifting State Up

Computing Values & Properly Handling Number Values

Outputting Results in a List & Deriving More Values

Outputting Content Conditionally

Styling React Components

Module Introduction & Starting Project

Splitting CSS Code Across Multiple Files

Styling React Apps with Vanilla CSS - Pros & Cons

Vanilla CSS Styles Are NOT Scoped To Components!

Styling React Apps with Inline Styles

Dynamic & Conditional Inline Styles

Dynamic & Conditional Styling with CSS Files & CSS Classes

Scoping CSS Rules with CSS Modules

Introducing "Styled Components" (Third-party Package)

Creating Flexible Components with Styled Components

Dynamic & Conditional Styling with Styled Components

Styled Components: Pseudo Selectors, Nested Rules & Media Queries

Creating Reusable Components & Component Combinations

Introducing Tailwind CSS For React App Styling

Adding & Using Tailwind CSS In A React Project

Tailwind: Media Queries & Pseudo Selectors

Dynamic & Conditional Styling with Tailwind

Migrating The Demo App to Tailwind CSS

Tailwind CSS: Pros & Cons

Debugging React Apps

Module Introduction

The Starting Project

Understanding React Error Messages

Using the Browser Debugger & Breakpoints

Understanding React's "Strict Mode"

Using the React DevTools (Browser Extension)

Working with Refs & Portals

Module Introduction & Starting Project

Repetition: Managing User Input with State (Two-Way-Binding)

Introducing Refs: Connecting & Accessing HTML Elements via Refs

Manipulating the DOM via Refs

Refs vs State Values

Adding Challenges to the Demo Project

Setting Timers & Managing State

Using Refs for More Than "DOM Element Connections"

Adding a Modal Component

Forwarding Refs to Custom Components

Exposing Component APIs via the useImperativeHandle Hook

More Examples: When To Use Refs & State

Sharing State Across Components

Enhancing the Demo App "Result Modal"

Introducing & Understanding "Portals"

Practice Project: Project Management App (with Components, State, Refs & More)

Module Introduction & Starting Project

Adding a "Projects Sidebar" Component

Styling the Sidebar & Button with Tailwind CSS

Adding the "New Project" Component & A Reusable "Input" Component

Styling Buttons & Inputs with Tailwind CSS

Splitting Components to Split JSX & Tailwind Styles (for Higher Reusability)

Managing State to Switch Between Components

Collecting User Input with Refs & Forwarded Refs

Handling Project Creation & Updating the UI

Validating User Input & Showing an Error Modal via useImperativeHandle

Styling the Modal via Tailwind CSS

Making Projects Selectable & Viewing Project Details

Handling Project Deletion

Adding "Project Tasks" & A Tasks Component

Managing Tasks & Understanding Prop Drilling

Clearing Tasks & Fixing Minor Bugs

React's Context API & useReducer - Advanced State Management

Module Introduction

Understanding Prop Drilling & Project Overview

Prop Drilling: Component Composition as a Solution

Introducing the Context API

Creating & Providing The Context

Consuming the Context

Linking the Context to State

A Different Way Of Consuming Context

What Happens When Context Values Change?

Migrating the Entire Demo Project to use the Context API

Outsourcing Context & State Into a Separate Provider Component

Introducing the useReducer Hook

Dispatching Actions & Editing State with useReducer

Handling Side Effects & Using useEffect

Module Introduction & Starting Project

What's a "Side Effect"? A Thorough Example

A Potential Problem with Side Effects: An Infinite Loop

Using useEffect for Handling (Some) Side Effects

Not All Side Effects Need useEffect

useEffect Not Needed: Another Example

Preparing Another Use-Case For useEffect

Using useEffect for Syncing With Browser APIs

Understanding Effect Dependencies

Preparing Another Problem That Can Be Fixed with useEffect

Introducing useEffect's Cleanup Function

The Problem with Object & Function Dependencies

The useCallback Hook

useEffect's Cleanup Function: Another Example

Optimizing State Updates

Practice Project: Building a Quiz App

Module Introduction & Starting Project

A First Component & Some State

Deriving Values, Outputting Questions & Registering Answers

Shuffling Answers & Adding Quiz Logic

Adding Question Timers

Working with Effect Dependencies & useCallback

Using Effect Cleanup Functions & Using Keys for Resetting Components

Highlighting Selected Answers & Managing More State

Splitting Components Up To Solve Problems

Moving Logic To Components That Actually Need It ("Moving State Down")

Setting Different Timers Based On The Selected Answer

Outputting Quiz Results

A Look Behind The Scenes Of React & Optimization Techniques

Module Introduction

React Builds A Component Tree / How React Works Behind The Scenes

Analyzing Component Function Executions via React's DevTools Profiler

Avoiding Component Function Executions with memo()

Avoiding Component Function Executions with Clever Structuring

Understanding the useCallback() Hook

Understanding the useMemo() Hook

Introducing the React Compiler

React Uses A Virtual DOM - Time To Explore It!

Why Keys Matter When Managing State!

More Reasons For Why Keys Matter

Using Keys For Resetting Components

State Scheduling & Batching

Optimizing React with MillionJS

An Alternative Way Of Building Components: Class-based Components

Module Introduction

What & Why

Adding a First Class-based Component

Working with State & Events

The Component Lifecycle (Class-based Components Only!)

Lifecycle Methods In Action

Class-based Components & Context

Class-based vs Functional Components: A Summary

Introducing Error Boundaries

Sending Http Requests (e.g. Connecting to a Database)

Module Introduction

How (Not) To Connect To A Database

Starting Project & Dummy Backend API

Preparing the App For Data Fetching

How NOT To Send HTTP Requests (And Why It's Wrong)

Sending HTTP Requests (GET Request) via useEffect

Using async / await

Handling Loading States

Handling HTTP Errors

Transforming Fetched Data

Extracting Code & Improving Code Structure

Sending Data with POST Requests

Using Optimistic Updating

Deleting Data (via DELETE HTTP Requests)

Practice: Fetching Data

Building Custom React Hooks

Module Introduction & Starting Project

Revisiting the "Rules of Hooks" & Why To Use Hooks

Creating a Custom Hook

Custom Hook: Managing State & Returning State Values

Exposing Nested Functions From The Custom Hook

Using A Custom Hook in Multiple Components

Creating Flexible Custom Hooks

Working with Forms & User Input

Module Introduction & Starting Project

What Are Forms & What's Tricky About Them?

Handling Form Submission

Managing & Getting User Input via State & Generic Handlers

Getting User Input via Refs

Getting Values via FormData & Native Browser APIs

Resetting Forms

Validating Input on Every Keystroke via State

Validating Input Upon Lost Focus

Validating Input Upon Form Submission

Validating Input via Built-in Validation Props

Mixing Custom & Built-in Validation Logic

Building & Using a Reusable Input Component

Outsourcing Validation Logic

Creating a Custom useInput Hook

Using Third-Party Form Libraries

Handling Forms via Form Actions

Module Introduction

What are Form Actions?

Adding Validation Checks

Managing Form-dependent State with useActionState()

Using User Input

Moving the Action Function out of the Component

A Demo App: Introduction

Handling Form Submission

Working with Asynchronous Form Actions

Updating the UI with useFormStatus()

Registering Multiple Form Actions

Sending an HTTP Request via a Form Action

Using the "pending" State from useActionState()

Adding Optimistic Updating

Module Summary

Practice Project: Building a Food Order App

Module Introduction & Starting Project

Planning the App & Adding a First Component

Fetching Meals Data

Adding a "MealItem" Component

Formatting & Outputting Numbers as Currency

Creating a Configurable & Flexible Custom Button Component

Getting Started with Cart Context & Reducer

Finishing & Using the Cart Context & Reducer

Adding a Reusable Modal Component with useEffect

Opening the Cart in the Modal via a New Context

Working on the Cart Items

Adding a Custom Input Component & Managing Modal Visibility

Handling Form Submission & Validation

Sending a POST Request with Order Data

Adding a Custom HTTP Hook & Avoiding Common Errors

Handling HTTP Loading & Error States

Finishing Touches

Migrating To Form Actions

Managing Form Status with Form Actions

Diving into Redux

Module Introduction

Another Look At State In React Apps

Redux vs 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 & Introducing Redux Toolkit

Adding State Slices

Connecting Redux Toolkit State

Migrating Everything To Redux Toolkit

Working with Multiple Slices

Reading & Dispatching From A New Slice

Splitting Our Code

Summary

Advanced Redux

Module Introduction

Redux & Side Effects

Refresher / Practice: Part 1/2

Refresher / Practice: Part 2/2

Redux & Async Code

Frontend Code vs Backend Code

Where To Put Our Logic

Using useEffect with Redux

Handling Http States & Feedback with Redux

Using an Action Creator Thunk

Getting Started with Fetching Data

Finalizing the Fetching Logic

Exploring the Redux DevTools

Summary

Building a Multi-Page SPA with React Router

Module Introduction

Routing: Multiple Pages in Single-Page Applications

Project Setup & Installing React Router

Defining Routes

Adding a Second Route

Exploring an Alternative Way of Defining Routes

Navigating between Pages with Links

Layouts & Nested Routes

Showing Error Pages with errorElement

Working with Navigation Links

Navigating Programmatically

Defining & Using Dynamic Routes

Adding Links for Dynamic Routes

Understanding Relative & Absolute Paths

Working with Index Routes

Onwards to a new Project Setup

Time to Practice: Problem

Time to Practice: Solution

Data Fetching with a loader

Using Data From A Loader In The Route Component

More loader Data Usage

Where Should loader Code Be Stored?

When Are loader Functions Executed?

Reflecting The Current Navigation State in the UI

Returning Responses in loader s

Which Kind Of Code Goes Into loader s?

Error Handling with Custom Errors

Extracting Error Data & Throwing Responses

The json Utility Function

Dynamic Routes & loader s

The useRouteLoaderData Hook & Accessing Data From Other Routes

Planning Data Submission

Working with action Functions

Submitting Data Programmatically

Updating the UI State Based on the Submission Status

Validating User Input & Outputting Validation Errors

Reusing Actions via Request Methods

Behind-the-Scenes Work with useFetcher

Deferring Data Fetching with defer

Controlling Which Data Should Be Deferred

Module Summary

Adding Authentication To React Apps

Module Introduction

How Authentication Works

Project Setup & Route Setup

Working with Query Parameters

Implementing the Auth Action

Validating User Input & Outputting Validation Errors

Adding User Login

Attaching Auth Tokens to Outgoing Requests

Adding User Logout

Updating the UI Based on Auth Status

Adding Route Protection

Adding Automatic Logout

Managing the Token Expiration

Deploying React Apps

Module Introduction

Deployment Steps

Understanding Lazy Loading

Adding Lazy Loading

Building the Code For Production

Deployment Example

Server-side Routing & Required Configuration

React Query / Tanstack Query: Handling HTTP Requests With Ease

Module Introduction

Project Setup & Overview

React Query: What & Why?

Installing & Using Tanstack Query - And Seeing Why It's Great!

Understanding & Configuring Query Behaviors - Cache & Stale Data

Dynamic Query Functions & Query Keys

The Query Configuration Object & Aborting Requests

Enabled & Disabled Queries

Changing Data with Mutations

Fetching More Data & Testing the Mutation

Acting on Mutation Success & Invalidating Queries

A Challenge! The Problem

A Challenge! The Solution

Disabling Automatic Refetching After Invalidations

Enhancing the Demo App & Repeating Mutation Concepts

React Query Advantages In Action

Updating Data with Mutations

Optimistic Updating

Using the Query Key As Query Function Input

React Query & React Router

A Introduction to NextJS - App Router

Module Introduction

Creating a NextJS Project

Understanding File-based Routing & React Server Components

Adding Another Route via the Filesystem

Navigating Between Pages

Working with Pages & Layouts

Reserved File Names, Custom Components & How To Organize A NextJS Project

Configuring Dynamic Routes & Using Route Parameters

Onwards to the Main Project: The Foodies App

Exercise: Your Task

Exercise: Solution

Revisiting The Concept Of Layouts

Adding a Custom Component To A Layout

Styling NextJS Project: Your Options & Using CSS Modules

Optimizing Images with the NextJS Image Component

Using More Custom Components

Populating The Starting Page Content

Preparing an Image Slideshow

React Server Components vs Client Components - When To Use What

Using Client Components Efficiently

Outputting Meals Data & Images With Unknown Dimensions

Setting Up A SQLite Database

Fetching Data By Leveraging NextJS & Fullstack Capabilities

Adding A Loading Page

Using Suspense & Streamed Responses For Granular Loading State Management

Handling Errors

Handling "Not Found" States

Loading & Rendering Meal Details via Dynamic Routes & Route Parameters

Throwing Not Found Errors For Individual Meals

Getting Started with the "Share Meal" Form

Getting Started with a Custom Image Picker Input Component

Adding an Image Preview to the Picker

Introducing & Using Server Actions for Handling Form Submissions

Storing Server Actions in Separate Files

Creating a Slug & Sanitizing User Input for XSS Protection

Storing Uploaded Images & Storing Data in the Database

Managing the Form Submission Status with useFormStatus

Adding Server-Side Input Validation

Working with Server Action Responses & useFormState

Building For Production & Understanding NextJS Caching

Triggering Cache Revalidations

Don't Store Files Locally On The Filesystem!

Adding Static Metadata

Adding Dynamic Metadata

Module Summary

A (Pretty Deep Dive) Introduction to Next.js - Page Router

About the NextJS Pages Router

Creating a NextJS Project

Analyzing the Created Project

Adding First Pages

Adding Nested Paths & Pages

Creating Dynamic Pages

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 & Layout Wrapper

Using Programmatic Navigation

Adding Custom Components & CSS Modules

How Pre-rendering Works & Which Problem We Face

Data Fetching for Static Pages

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

By : Academind by Maximilian Schwarzmüller GmbH

React - The Complete Guide (Includes Hooks, React Router, and Redux)

By: Academind by Maximilian Schwarzmüller GmbH

Overview of this book

Confirmation

Buy this book with your credits?

Submit Your Feedback

Create a Free Account To Continue Reading

Sign in to activate your 7-day free access