React---The-Complete-Guide-incl.-Hooks-React-Router-and-Redux-Second-Edition

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 Through "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 Through 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 Through 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

Routing: Multiple Pages in Single-Page Applications

Project Setup and Installing React Router

Defining Routes

Adding a Second Route

Exploring an Alternative Way of Defining Routes

Navigating Between Pages with Links

Layouts and Nested Routes

Showing Error Pages with errorElement

Working with Navigation Links (NavLink)

Navigating Programmatically

Defining and Using Dynamic Routes

Adding Links for Dynamic Routes

Understanding Relative and 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 and Throwing Responses

The json() Utility Function

Dynamic Routes and loader()s

The useRouteLoaderData() Hook and 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 and Outputting Validation Errors

Reusing Actions Through Request Methods

Behind-the-Scenes Work with useFetcher()

Deferring Data Fetching with defer()

Controlling Which Data Should Be Deferred

Module Summary

Chapter 21 : Adding Authentication to React Apps

Module Introduction

How Authentication Works

Project Setup and Route Setup

Working with Query Parameters

Implementing the Auth Action

Validating User Input and 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

Chapter 22 : Deploying React Apps

Module Introduction

Deployment Steps

Understanding Lazy Loading

Adding Lazy Loading

Building the Code for Production

Deployment Example

Server-Side Routing and Required Configuration

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

Onward 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 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

Adding Routes

Working with Layout Routes

Refactoring Route Components and More Nesting

Linking and Navigating

Data Fetching Through loader()s

Submitting Data with action()s

Dynamic Routes

Module Summary

Chapter 30 : Course Roundup

What Now? Next Steps You Could Take!

Explore the React Ecosystem!

Finishing Thoughts