on-demand course

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

with Academind by Maximilian Schwarzmüller GmbH

April 2024

Intermediate

64h 48m

English

Packt Publishing

Closed Captioning available in English

Watch now

Unlock full access

Includes

Includes Quizzes

Earns Badge

Course outline

Welcome to the Course
1m 8s
What Is React? And Why Would You Use It?
2m 58s
ReactJS vs Vanilla JavaScript
10m 58s
Editing Our First React App
4m 22s
About the Course
2m 55s
One Course, Two Paths
3m 9s
How To Get The Most Out Of This Course
5m 24s
How To Create New React Projects
7m 11s
Why Do We Need A Special Project Setup?
2m 51s
Module Introduction
1m 52s
Starting Project
1m 3s
Adding JavaScript to a Page and How React Projects Differ
7m 1s
React Projects Use a Build Process
8m 8s
"import" and "export"
12m 7s
Revisiting Variables and Values
7m 4s
Revisiting Operators
2m 35s
Revisiting Functions and Parameters
8m 17s
Arrow Functions
2m 14s
Revisiting Objects and Classes
6m 10s
Arrays and Array Methods like map()
11m 13s
Destructuring
5m 20s
The Spread Operator
3m 16s
Revisiting Control Structures
5m 32s
Manipulating the DOM - Not With React!
55s
Using Functions as Values
7m 24s
Defining Functions Inside Of Functions
1m 58s
Reference vs Primitive Values
4m 48s
Module Introduction
1m 49s
It's All About Components! [Core Concept]
6m 7s
Setting Up The Starting Project
3m 7s
JSX & React Components [Core Concept]
4m 42s
Creating & Using a First Custom Component
5m 52s
How React Handles Components & How It Builds A "Component Tree" [Core Concept]
8m 22s
Using & Outputting Dynamic Values [Core Concept]
6m 1s
Setting HTML Attributes Dynamically & Loading Image Files
4m 42s
Making Components Reusable with Props [Core Concept]
9m 6s
Alternative Props Syntaxes
6m 45s
Best Practice: Storing Components in Files & Using a Good Project Structure
6m 32s
Storing Component Style Files Next To Components
6m 15s
Component Composition: The special "children" Prop [Core Concept]
8m 7s
Reacting to Events [Core Concept]
6m 45s
Passing Functions as Values to Props
6m 44s
Passing Custom Arguments to Event Functions
5m 37s
How NOT to Update the UI - A Look Behind The Scenes of React [Core Concept]
5m 30s
Managing State & Using Hooks [Core Concept]
10m 28s
Deriving & Outputting Data Based on State
4m 50s
Rendering Content Conditionally
8m 3s
CSS Styling & Dynamic Styling
5m 13s
Outputting List Data Dynamically
7m 41s
Module Summary
6m 6s
Module Introduction
1m 26s
You Don't Have To Use JSX!
4m 38s
Working with Fragments
5m 41s
When Should You Split Components?
3m 14s
Splitting Components By Feature & State
6m 54s
Problem: Props Are Not Forwarded To Inner Elements
6m 45s
Forwarding Props To Wrapped Elements
3m 46s
Working with Multiple JSX Slots
8m 42s
Setting Component Types Dynamically
8m 45s
Setting Default Prop Values
2m 9s
Onwards To The Next Project & Advanced Concepts
2m 17s
Not All Content Must Go Into Components
5m 11s
New Project: First Steps Towards Our Tic-Tac-Toe Game
3m 58s
Concept Repetition: Splitting Components & Building Reusable Components
4m 14s
Concept Repetition: Working with State
7m 58s
Component Instances Work In Isolation!
2m 4s
Conditional Content & A Suboptimal Way Of Updating State
4m 55s
Best Practice: Updating State Based On Old State Correctly
7m 4s
User Input & Two-Way-Binding
7m 42s
Rendering Multi-Dimensional Lists
7m 41s
Best Practice: Updating Object State Immutably
8m 44s
Lifting State Up [Core Concept]
9m 39s
Avoid Intersecting States!
5m 23s
Prefer Computed Values & Avoid Unnecessary State Management
6m 17s
Deriving State From Props
7m 22s
Sharing State Across Components
4m 12s
Reducing State Management & Identifying Unnecessary State
5m 53s
Disabling Buttons Conditionally
2m 37s
Outsourcing Data Into A Separate File
4m 28s
Lifting Computed Values Up
5m 19s
Deriving Computed Values From Other Computed Values
5m 30s
Tic-Tac-Toe Game: The "Game Over" Screen & Checking for a Draw
5m 41s
Why Immutability Matters - Always!
5m 28s
When NOT To Lift State Up
5m 20s
An Alternative To Lifting State Up
3m 17s
Final Polishing & Improving Components
5m 16s
Module Introduction & A Challenge For You!
5m 10s
Adding a Header Component
4m 49s
Getting Started with a User Input Component
5m 8s
Handling Events & Using Two-Way-Binding
10m 28s
Lifting State Up
9m 0s
Computing Values & Properly Handling Number Values
5m 41s
Outputting Results in a List & Deriving More Values
9m 2s
Outputting Content Conditionally
4m 24s
Module Introduction & Starting Project
3m 57s
Splitting CSS Code Across Multiple Files
3m 23s
Styling React Apps with Vanilla CSS - Pros & Cons
2m 33s
Vanilla CSS Styles Are NOT Scoped To Components!
3m 32s
Styling React Apps with Inline Styles
6m 25s
Dynamic & Conditional Inline Styles
3m 27s
Dynamic & Conditional Styling with CSS Files & CSS Classes
5m 41s
Scoping CSS Rules with CSS Modules
9m 52s
Introducing "Styled Components" (Third-party Package)
8m 3s
Creating Flexible Components with Styled Components
4m 48s
Dynamic & Conditional Styling with Styled Components
11m 8s
Styled Components: Pseudo Selectors, Nested Rules & Media Queries
7m 16s
Creating Reusable Components & Component Combinations
9m 53s
Introducing Tailwind CSS For React App Styling
11m 27s
Adding & Using Tailwind CSS In A React Project
3m 39s
Tailwind: Media Queries & Pseudo Selectors
5m 23s
Dynamic & Conditional Styling with Tailwind
5m 50s
Migrating The Demo App to Tailwind CSS
4m 15s
Tailwind CSS: Pros & Cons
4m 27s
Module Introduction
1m 27s
The Starting Project
1m 17s
Understanding React Error Messages
8m 31s
Using the Browser Debugger & Breakpoints
7m 23s
Understanding React's "Strict Mode"
6m 19s
Using the React DevTools (Browser Extension)
3m 57s
Module Introduction & Starting Project
3m 19s
Repetition: Managing User Input with State (Two-Way-Binding)
5m 17s
Introducing Refs: Connecting & Accessing HTML Elements via Refs
6m 4s
Manipulating the DOM via Refs
2m 15s
Refs vs State Values
4m 45s
Adding Challenges to the Demo Project
4m 49s
Setting Timers & Managing State
4m 57s
Using Refs for More Than "DOM Element Connections"
8m 30s
Adding a Modal Component
6m 40s
Forwarding Refs to Custom Components
6m 28s
Exposing Component APIs via the useImperativeHandle Hook
8m 23s
More Examples: When To Use Refs & State
8m 51s
Sharing State Across Components
4m 58s
Enhancing the Demo App "Result Modal"
2m 12s
Introducing & Understanding "Portals"
6m 56s
Module Introduction & Starting Project
3m 11s
Adding a "Projects Sidebar" Component
2m 29s
Styling the Sidebar & Button with Tailwind CSS
5m 0s
Adding the "New Project" Component & A Reusable "Input" Component
5m 59s
Styling Buttons & Inputs with Tailwind CSS
7m 4s
Splitting Components to Split JSX & Tailwind Styles (for Higher Reusability)
6m 49s
Managing State to Switch Between Components
8m 19s
Collecting User Input with Refs & Forwarded Refs
13m 34s
Handling Project Creation & Updating the UI
6m 0s
Validating User Input & Showing an Error Modal via useImperativeHandle
11m 25s
Styling the Modal via Tailwind CSS
5m 46s
Making Projects Selectable & Viewing Project Details
15m 23s
Handling Project Deletion
4m 44s
Adding "Project Tasks" & A Tasks Component
5m 51s
Managing Tasks & Understanding Prop Drilling
15m 24s
Clearing Tasks & Fixing Minor Bugs
6m 40s
Module Introduction
1m 55s
Understanding Prop Drilling & Project Overview
5m 59s
Prop Drilling: Component Composition as a Solution
5m 18s
Introducing the Context API
2m 17s
Creating & Providing The Context
8m 30s
Consuming the Context
8m 43s
Linking the Context to State
7m 28s
A Different Way Of Consuming Context
5m 1s
What Happens When Context Values Change?
1m 26s
Migrating the Entire Demo Project to use the Context API
6m 20s
Outsourcing Context & State Into a Separate Provider Component
6m 5s
Introducing the useReducer Hook
10m 7s
Dispatching Actions & Editing State with useReducer
10m 15s

Chapter 1 : Getting Started

Chapter 2 : JavaScript Refresher

Chapter 3 : React Essentials - Components, JSX, Props, State & More

Chapter 4 : React Essentials - Deep Dive

Chapter 5 : React Essentials - Practice Project

Chapter 6 : Styling React Components

Chapter 7 : Debugging React Apps

Chapter 8 : Working with Refs & Portals

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

Chapter 10 : React's Context API & useReducer - Advanced State Management

Chapter 11 : Handling Side Effects & Working with the useEffect() Hook

Chapter 12 : Practice Project: Building a Quiz App

Chapter 13 : A Look Behind The Scenes Of React & Optimization Techniques

Chapter 14 : An Alternative Way Of Building Components: Class-based Components

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

Chapter 16 : Building Custom React Hooks

Chapter 17 : Working with Forms & User Input

Chapter 18 : Handling Forms via Form Actions

Chapter 19 : Practice Project: Building a Food Order App

Chapter 20 : Diving into Redux

Chapter 21 : Advanced Redux

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

Chapter 23 : Adding Authentication To React Apps

Chapter 24 : Deploying React Apps

Chapter 25 : React Query / Tanstack Query: Handling HTTP Requests With Ease

Chapter 26 : A Introduction to NextJS - App Router

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

Chapter 28 : React Server Components (RSC) & Server Actions - A Closer Look

Chapter 29 : Animating React Apps with Framer Motion

Chapter 30 : React Patterns & Best Practices

Chapter 31 : Testing React Apps

Chapter 32 : React & TypeScript

Chapter 33 : Optional: React Hooks Introduction and Summary

Chapter 34 : Optional: React Summary and Core Feature Walkthrough

Chapter 35 : Course Roundup

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

More on useEffect()

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,and much more.

You might also like

Angular - The Complete Guide [2024 Edition]

MCP Complete Guide – Build and Connect Tools for LLMs

React JS Masterclass - Go From Zero To Job Ready

Kubernetes for the Absolute Beginners - Hands-On

Publisher Resources

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.