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

Book Image

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

By : Academind by Maximilian Schwarzmüller

4.8 (9)

Book Image

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

4.8 (9)

By: Academind by Maximilian Schwarzmüller

Overview of this book

**This course is now updated for React 18** Starting with an introduction to React concepts, you will progress through JavaScript refresher modules to solidify your knowledge base before tackling React essentials such as components, JSX, and state management. Each section builds on the previous one, ensuring a structured learning path. You'll delve into practical applications, creating dynamic user interfaces and single-page applications using React Router. The course also covers state management in depth with Redux and the Context API, equipping you with the skills to handle complex application states efficiently. Beyond functional programming, you'll explore class-based components to understand different approaches within React. From setting up your development environment to deploying robust applications, you'll acquire actionable skills that are immediately applicable in professional settings. This course also emphasizes best practices in coding and application architecture, preparing you to write clean and efficient code. Additionally, learn to manage side effects with Hooks, use Redux for state management across large applications, and optimize React apps for performance. By the end of this course, you will have an in-depth understanding of React and its ecosystem, ready to tackle any challenges in modern web development.

Free Chapter

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()

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

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

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

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

Practice Project

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

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

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

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

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

A Introduction to Next.js - Pages 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

More on Static Site Generation

Exploring Server-side Rendering with "getServerSideProps"

Working with Params for SSG Data Fetching

Preparing Paths with "getStaticPaths" & 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 & Preparing Pages

Adding "head" Metadata

Deploying Next.js Projects

Using Fallback Pages & Re-deploying

Animating React Apps with Framer Motion

Module Introduction

Project Setup & Overview

Animating with CSS Transitions

Animating with CSS Animations

Introducing Framer Motion

Framer Motion Basics & Fundamentals

Animating Between Conditional Values

Adding Entry Animations

Animating Element Disappearances / Removal

Making Elements "Pop" With Hover Animations

Reusing Animation States

Nested Animations & Variants

Animating Staggered Lists

Animating Colors & Working with Keyframes

Imperative Animations

Animating Layout Changes

Orchestrating Multi-Element Animations

Combining Animations With Layout Animations

Animating Shared Elements

Re-triggering Animations via Keys

Scroll-based Animations

React Patterns & Best Practices

Module Introduction

Project Overview

Introducing Compound Components

Managing Multi-Component State with the Context API

Grouping Compound Components

Adding Extra Components For Reusability & Configurability

Sharing Cross-Component State When Working With Compound Components

Introducing & Using Render Props

Adding Search To A React App

Implementing a Search Functionality With Help Of Render Props

Handling Keys Dynamically

Working with Debouncing

Testing React Apps

Module Introduction

Understanding Different Kinds Of Tests

What To Test & How To Test

Understanding the Technical Setup & Involved Tools

Running a First Test

Writing Our First Test

Grouping Tests Together With Test Suites

Testing User Interaction & State

Testing Connected Components

Testing Asynchronous Code

Working With Mocks

Summary & Further Resources

React & TypeScript

Module Introduction

Installing & 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

Time to Practice: Removing a Todo

The Context API and TypeScript

Bonus: Exploring tsconfig.json

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

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

Optional: React Summary and Core Feature Walkthrough

Module IntroductionIn this session, we introduce the module and outline the learning objectives to set the stage for React.js newcomers.

What Is React and Why Would You Use It?

React Projects - Requirements

Creating React Projects

Our Starting Project

Understanding How React Works

Building a First Custom Component

Outputting Dynamic Values

Reusing Components

Passing Data to Components with Props

CSS Styling and CSS Modules

Exercise and Another Component

Preparing the App for State Management

Adding Event Listeners

Working with State

Lifting State Up

The Special "children" Prop

State and Conditional Content

Adding a Shared Header and More State Management

Adding Form Buttons

Handling Form Submission

Updating State Based on Previous State

Outputting List Data

Adding a Backend to the React SPA

Sending a POST HTTP Request

Handling Side Effects with useEffect()

Handle Loading State

Understanding and Adding Routing

Working with Layout Routes

Refactoring Route Components and More Nesting

Linking and Navigating

Data Fetching through loader()s

Submitting Data with action()s

Course Roundup

Customer Reviews

4.8 (9)

5 star

88.9%

4 star

0

3 star

11.1%

2 star

0

1 star

0

Chapter 19

Diving into Redux

Content Locked

Section 5

Exploring The Core Redux Concepts

In this session, we explore the core concepts of Redux, including stores, actions, and reducers.