React - The Complete Guide (incl Hooks, React Router, Redux)

Getting Started

Introduction

What is React?

Join our Online Learning Community

Real-World SPAs & React Web Apps

Writing our First React Code

Why Should we Choose React?

React Alternatives

Understanding Single Page Applications and Multi Page Applications

Course Outline

How to get the Most out of This Course

Useful Resources & Links

Refreshing Next Generation JavaScript (Optional)

Module Introduction

Understanding "let" and "const"

Arrow Functions

Exports and Imports

Understanding Classes

Classes, Properties and Methods

The Spread & Rest Operator

Destructuring

Reference and Primitive Types Refresher

Refreshing Array Functions

Wrap Up

Next-Gen JavaScript - Summary

JS Array Functions

Understanding the Base Features & Syntax

Module Introduction

The Build Workflow

Using Create React App

Understanding the Folder Structure

Understanding Component Basics

Understanding JSX

JSX Restrictions

Creating a Functional Component

Components & JSX Cheat Sheet

Working with Components & Re-Using Them

Outputting Dynamic Content

Working with Props

Understanding the "children" Prop

Understanding & Using State

Props & State

Handling Events with Methods

To Which Events Can You Listen?

Manipulating the State

Function Components Naming

Using the useState() Hook for State Manipulation

Stateless vs Stateful Components

Passing Method References Between Components

Adding Two Way Binding

Adding Styling with Stylesheets

Working with Inline Styles

[OPTIONAL] Assignment Solution

Useful Resources & Links

Working with Lists and Conditionals

Module Introduction

Rendering Content Conditionally

Handling Dynamic Content "The JavaScript Way"

Outputting Lists (Intro)

Outputting Lists

Lists & State

Updating State Immutably

Lists & Keys

Flexible Lists

Wrap Up

[OPTIONAL] Assignment Solution

Useful Resources & Links

Styling React Components & Elements

Module Introduction

Outlining the Problem Set

Setting Styles Dynamically

Setting Class Names Dynamically

Adding and Using Radium

Using Radium for Media Queries

Introducing Styled Components

More on Styled Components

Styled Components & Dynamic Styles

Working with CSS Modules

CSS Modules & Media Queries

More on CSS Modules

Useful Resources & Links

Debugging React Apps

Module Introduction

Understanding Error Messages

Finding Logical Errors by using Dev Tools & Sourcemaps

Working with the React Developer Tools

Using Error Boundaries (React 16+)

Wrap Up

Useful Resources & Links

Diving Deeper into Components & React Internals

Module Introduction

A Better Project Structure

Splitting an App Into Components

Comparing Stateless and Stateful Components

Class-based vs Functional Components

class Component Lifecycle Overview

Component Creation Lifecycle in Action

Component Update Lifecycle (for props Changes)

Component Update Lifecycle (for state Changes)

Using useEffect() in Functional Components

Controlling the useEffect() Behavior

Cleaning up with Lifecycle Hooks & useEffect()

Cleanup Work with useEffect() - Example

Using shouldComponentUpdate for Optimization

Optimizing Functional Components with React.memo()

When should you optimize?

PureComponents instead of shouldComponentUpdate

How React Updates the DOM

Rendering Adjacent JSX Elements

Windows Users Must Read

Using React.Fragment

Higher Order Components (HOC) - Introduction

Another Form of HOCs

Passing Unknown Props

Setting State Correctly

Using PropTypes

Using Refs

Refs with React Hooks

Understanding Prop Chain Problems

Using the Context API

contextType & useContext()

Wrap Up

Useful Resources & Links

MUST READ: Legacy Lectures

[LEGACY] Splitting an App Into Components

[LEGACY] Comparing Stateless and Stateful Components

[LEGACY] Understanding the Component Lifecycle

[LEGACY] Converting Stateless to Stateful Components

[LEGACY] Component Creation Lifecycle in Action

[LEGACY] componentWillUnmount()

[LEGACY] Component Updating Lifecycle Hooks

[LEGACY] Component Updating Lifecycle in Action

[LEGACY] Updating Lifecycle Hooks (Triggered by State Changes)

[LEGACY] Performance Gains with PureComponents

[LEGACY] How React Updates the App & Component Tree

[LEGACY] Understanding React's DOM Updating Strategy

[LEGACY] Windows Users Must Read - File Downloads

[LEGACY] Returning Adjacent Elements (React 16+)

[LEGACY] React 16.2 Feature: Fragments

[LEGACY] Understanding Higher Order Components (HOCs)

[LEGACY] A Different Approach to HOCs

[LEGACY] Passing Unknown Props

[LEGACY] Using setState Correctly

[LEGACY] Validating Props

[LEGACY] Available PropTypes

[LEGACY] Using References ("ref")

[LEGACY] More on the React ref API (16.3)

[LEGACY] The Context API (React 16.3)

[LEGACY] More on the Context API (16.6)

[LEGACY] Updated Lifecycle Hooks (React 16.3)

[LEGACY] The "memo" Method (16.4)

[LEGACY] Wrap Up

[LEGACY] Useful Resources & Links

A Real App: The Burger Builder (Basic Version)

About React Hooks

Module Introduction

Planning an App in React - Core Steps

Planning our App - Layout and Component Tree

Planning the State

MUST READ: Enabling CSS Modules

Setting up the Project

Creating a Layout Component

Starting Implementation of The Burger Builder Container

Adding a Dynamic Ingredient Component

Adding Prop Type Validation

Starting the Burger Component

Outputting Burger Ingredients Dynamically

Calculating the Ingredient Sum Dynamically

Adding the Build Control Component

Outputting Multiple Build Controls

Connecting State to Build Controls

Removing Ingredients Safely

Displaying and Updating the Burger Price

Adding the Order Button

Creating the Order Summary Modal

Showing & Hiding the Modal (with Animation!)

Implementing the Backdrop Component

Adding a Custom Button Component

Implementing the Button Component

Adding the Price to the Order Summary

Adding a Toolbar

Using a Logo in our Application

Adding Reusable Navigation Items

Creating a Responsive Sidedrawer

Working on Responsive Adjustments

More about Responsive Adjustments

Reusing the Backdrop

Adding a Sidedrawer Toggle Button

Adding a Hamburger Icon

Improving the App - Introduction

Prop Type Validation

Improving Performance

Using Component Lifecycle Methods

Changing the Folder Structure

Wrap Up

Useful Resources & Links

Reaching out to the Web (Http / Ajax)

Module Introduction

Understanding Http Requests in React

Understanding our Project and Introducing Axios

Creating a Http Request to GET Data

Rendering Fetched Data to the Screen

Transforming Data

Making a Post Selectable

Fetching Data on Update (without Creating Infinite Loops)

POSTing Data to the Server

Sending a DELETE Request

Fixing a Bug

Handling Errors Locally

Adding Interceptors to Execute Code Globally

Removing Interceptors

Setting a Default Global Configuration for Axios

Creating and Using Axios Instances

Wrap Up

Useful Resources & Links

Burger Builder Project: Accessing a Server

Module Introduction

Firebase & The Right Database

Creating the Firebase Project

Creating the Axios Instance

Sending a POST Request

Displaying a Spinner while Sending a Request

Handling Errors

Retrieving Data from the Backend

Removing Old Interceptors

Useful Resources & Links

Multi-Page-Feeling in a Single-Page-App: Routing

Module Introduction

Routing and SPAs

Setting Up Links

Setting Up the Router Package

react-router vs react-router-dom

Preparing the Project For Routing

Setting Up and Rendering Routes

Rendering Components for Routes

Switching Between Pages

Using Links to Switch Pages

Using Routing-Related Props

The "withRouter" HOC & Route Props

Absolute vs Relative Paths

Absolute vs Relative Paths (Article)

Styling the Active Route

Passing Route Parameters

Extracting Route Parameters

Parsing Query Parameters & the Fragment

Using Switch to Load a Single Route

Navigating Programmatically

Additional Information Regarding Active Links

Understanding Nested Routes

Creating Dynamic Nested Routes

Redirecting Requests

Conditional Redirects

Using the History Prop to Redirect (Replace)

Working with Guards

Handling the 404 Case (Unknown Routes)

Loading Routes Lazily

Lazy Loading with React Suspense (16.6)

Routing and Server Deployment

Wrap Up

Useful Resources & Links

Adding Routing to our Burger Project

Module Introduction

Building the Checkout Container

Setting Up Routing & Routes

Navigating to the Checkout Page

Navigating Back & To Next Page

Passing Ingredients via Query Params

Navigating to the Contact Data Component

Order Submission & Passing Data Between Pages

Adding an Orders Page

Implementing Navigation Links

Fetching Orders

Outputting the Orders

Wrap Up

Useful Resources & Links

Forms and Form Validation

Module Introduction

Analyzing the App

Creating a Custom Dynamic Input Component

Setting Up a JS Config for the Form

Dynamically Create Inputs based on JS Config

Adding a Dropdown Component

Handling User Input

Handling Form Submission

Adding Custom Form Validation

Fixing a Common Validation Gotcha

Adding Validation Feedback

Improving Visual Feedback

Showing Error Messages

Handling Overall Form Validity

Working on an Error

Fixing a Bug

Useful Resources & Links

Redux

Module Introduction

Understanding State

The Complexity of Managing State

Understanding the Redux Flow

Setting Up Reducer and Store

Dispatching Actions

Adding Subscriptions

Connecting React to Redux

Connecting the Store to React

Dispatching Actions from within the Component

Passing and Retrieving Data with Action

Switch-Case in the Reducer

Updating State Immutably

Updating Arrays Immutably

Immutable Update Patterns

Outsourcing Action Types

Combining Multiple Reducers

Understanding State Types

[OPTIONAL] Assignment Solution

Combining Local UI State and Redux

Wrap Up

Useful Resources & Links

Adding Redux to our Project

Module Introduction

Installing Redux and React Redux

Basic Redux Setup

Finishing the Reducer for Ingredients

Connecting the Burger Builder Container to our Store

Working on the Total Price Calculation

Redux & UI State

Adjusting Checkout and Contact Data

Wrap Up

Useful Resources & Links

Redux Advanced

Module Introduction

Adding Middleware

Using the Redux Devtools

Executing Asynchronous Code - Introduction

Introducing Action Creators

Action Creators & Async Code

Handling Asynchronous Code

Restructuring Actions

Where to Put Data Transforming Logic?

Using Action Creators and Get State

Using Utility Functions

A Leaner Switch Case Statement

An Alternative Folder Structure

Diving Much Deeper

Wrap Up

Useful Resources & Links

Redux Advanced: Burger Project

Module Introduction

Installing the Redux Devtools

Preparing the Folder Structure

Creating Action Creators

Executing Asynchronous Code

Fetching Ingredients Asynchronously

Initializing Ingredients in the BurgerBuilder

Changing the Order of our Ingredients Manually

Adding Order Actions

Connecting Contact Data Container & Actions

The Order Reducer

Working on Order Actions

Redirect to Improve UX

Combining Reducers

Handling Purchases & Updating the UI

Resetting the Price after Purchases

Fetching Orders (via Redux)

Checking our Implemented Functionalities

Refactoring Reducers

Refactoring Reducers Continued

Wrap Up

Useful Resources & Links

Adding Authentication to our Burger Project

Module Introduction

Understanding Authentication in Single Page Applications

Required App Adjustments

Adding an Auth Form

Adding Actions

Getting a Token from the Backend

Adding Sign-In

Storing the Token

Adding a Spinner

Logging Users Out

Accessing Protected Resources

Updating the UI Depending on Auth State

Adding a Logout Link

Forwarding Unauthenticated Users

Redirecting the User to the Checkout Page

Persistent Auth State with localStorage

Fixing Connect + Routing Errors

Ensuring App Security

Guarding Routes

Displaying User Specific Orders

Wrap Up

Useful Resources & Links

Improving our Burger Project

Module Introduction

Fixing the Redirect to the Frontpage

Using updateObject in the Entire App

Sharing the Validation Method

Using Environment Variables

Removing console.log()s

Adding Lazy Loading

Wrap Up

Useful Resources & Links

Testing

Module Introduction

What is Testing?

Required Testing Tools

What To Test?

Writing our First Test

Testing Components Continued

Jest and Enzyme Documentations

Testing Components Correctly

Testing Containers

How to Test Redux

Wrap Up

Useful Resources & Links

Deploying the App to the Web

Module Introduction

Deployment Steps

Building the Project

Example: Deploying on Firebase

Wrap Up

Useful Resources & Links

Bonus: Working with Webpack

Module Introduction

Introducing Webpack

How Webpack works

Basic Workflow Requirements

Project & npm Setup

Creating a Basic Folder & File Structure

Creating the Basic React Application

Installing Production Dependencies

Setting Up the Basic Webpack Config

Adding File Rules & Babel

Loading CSS Files

Loading Images & Injecting into HTML Page

Production Workflow & Wrap Up

Adding babel-polyfill

Useful Resources & Links

Bonus: Next.js

Module Introduction

Understanding Server Side Rendering

Setting Up a Project

Understanding the Basics

Next.js & Components & Pages

Styling our App in Next.js

Handling (404) Errors

A Special Lifecycle Hook

Deploying our App

Useful Resources & Links

Bonus: Animations in React Apps

Module Introduction

Preparing the Demo Project

Using CSS Transitions

Using CSS Animations

CSS Transition & 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

Useful Resources & Links

Bonus: A Brief Introduction to Redux Saga

Module Introduction

Installing Redux Saga

Creating our First Saga

Hooking the Saga Up (to the Store and Actions)

Moving Logic from the Action Creator to a Saga

Moving More Logic Into Sagas

Handling Authentication with a Saga

Handling Auto-Sign-In with a Saga

Moving the BurgerBuilder Side Effects into a Saga

Moving the Orders Side Effects into Sagas

Why Sagas can be Helpful

Diving Deeper into Sagas

Useful Resources & Links

React Hooks

Introduction

What are "React Hooks"?

The Starting Project

Getting Started with useState()

More on useState() & State Updating

Array Destructuring

Multiple States

Rules of Hooks

Passing State Data Across Components

Sending Http Requests

useEffect() & Loading Data

Understanding useEffect() Dependencies

More on useEffect()

What's useCallback()?

Working with Refs & useRef()

Cleaning Up with useEffect()

Deleting Ingredients

Loading Errors & State Batching

More on State Batching & State Updates

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

Using the Custom Hook

Wrap Up

What's [LEGACY]?

[LEGACY] What are Hooks?

[LEGACY] Enabling Hooks

[LEGACY] The useState() Hook

[LEGACY] Adding Array Destructuring

[LEGACY] Using Multiple State

[LEGACY] Using One State Instead

[LEGACY] The "Rules of Hooks"

[LEGACY] Sending Data via Http

[LEGACY] The useEffect() Hook

[LEGACY] Controlling Effect Execution

[LEGACY] Effect Cleanup

[LEGACY] Converting the "App" Component

[LEGACY] The useContext() Hook

[LEGACY] State and Effects Gotchas

[LEGACY] The useReducer() Hook

[LEGACY] useReducer() vs useState()

[LEGACY] Working with References and useRef()

[LEGACY] Preparing & Optimizing

[LEGACY] Avoiding Unnecessary Re-Rendering

[LEGACY] How to think about Functional Components with Hooks

[LEGACY] Creating a Custom Hook

[LEGACY] Wrap Up

Using Hooks in the Burger Builder

Introduction

Converting <App>

Routing with React.lazy()

Converting the Layout Component

Converting withErrorHandler HOC

Adjusting the Order & Checkout Containers

Add Hooks to ContactData

Converting the BurgerBuilder Container

Adjusting Auth & Logout Components

Using React.memo() & More!

Adding a Custom Error Handling Hook

Setting the right useEffect() Dependencies

Working with useSelector() and useDispatch()

Wrap Up

Useful Resources & Links

Bonus: Replacing Redux with React Hooks

Module Introduction

Starting Project & Why You Would Replace Redux

Alternative: Using the Context API

Toggling Favorites with the Context API

Context API Summary (and why NOT to use it instead of Redux)

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

Bonus: Managing Multiple State Slices with the Custom Store Hook

Wrap Up

Useful Resources & Links

Bonus: Building the Burger CSS

Building the Burger CSS Code

Next Steps and Course Roundup

Module Introduction

React Rocks! Where to find more Examples

More Inspiration: Real-World Projects Built with React

Static React Apps with Gatsby.js

Introducing React Native

Component Libraries (Example: Material UI)

Smaller Apps with Preact

Comparing React with Preact

Congratulations

Bonus: More Content!