React - The Complete Guide (incl Hooks, React Router, Redux)
Learn React.js from scratch! Learn Reactjs, Redux, React Routing, Animations, NextJS & more!
60h+
Video
500+
Lectures
All
Levels
About This Course
Welcome to "React - The Complete Guide"!
This course is completely up-to-date with the very latest version of React with all the core, modern features you need to know & teaches you React in a practical, hands-on way!
React.js is THE most popular JavaScript library you can use and learn these days to build modern, reactive user interfaces for the web. This course teaches you React in-depth, from the ground up, step by step by diving into all the core basics, exploring tons of examples and also introducing you to advanced concepts as well.
You'll get all the theory, tons of examples and demos, assignments and exercises and tons of important knowledge that is skipped by most other resources - after all, there is a reason why this course is that huge! This really is the "Complete Guide" - promised!
My goal with this course is to ensure that you feel confident working with React, so that you can apply for React jobs, use it in your own projects or simply enhance your portfolio as a developer - whatever your goal is: This course gets you there!
A Course For Busy Customers & Business Professionals!
This course comes with two paths which you can take: The "complete" path (full >40h course) and the "summary" (fast-track) path (~4h summary module) - you can choose the path that best fits your time requirements!
What's in This Course?
This is a huge course because it really covers EVERYTHING you need to know and learn to become a React.js developer!
React Fundamentals
A thorough introduction to React.js, all the core basics, building components, props, dynamic data binding, and how React works under the hood.
React Hooks In-Depth
Master working with built-in Hooks and building custom Hooks. Learn state management, user events, and creating interactive applications.
Styling & UI
Style React apps with "Styled Components" and "CSS Modules". Work with Fragments, Portals, lists, conditional content, and animations.
State Management
Deep dive into Redux & Redux Toolkit for managing complex application state efficiently and predictably.
Beyond the Basics
This course goes far beyond fundamentals - you'll learn everything needed to build production-ready React applications.
Core Concepts
Master these essential React skills:
- Components, props & dynamic data binding
- User events and state management
- Lists and conditional content
- Handling forms and user input (incl. validation)
- Dealing with side effects
- Debugging React apps
Advanced Topics
Take your skills to the next level:
- Routing with React Router
- Sending Http requests & handling responses
- Implementing Authentication
- An in-depth introduction into Next.js
- Combining React with TypeScript
- Unit Tests & Deploying React Apps
Practice What You Learn!
This course includes tons of examples and demo projects so that you can apply all the things you learned in real projects. You'll get assignments, exercises, and hands-on practice throughout the entire course!
No Prior React Knowledge Needed!
Complete Beginners
This course starts with zero React knowledge assumed - just basic
web development and JavaScript knowledge required
JavaScript Developers
Includes a brief JavaScript refresher to ensure we're all on the
same page
Existing React Developers
Already got some basic React knowledge? You'll still get tons of
useful information and advanced concepts!
See The Course In Action
Curriculum
Getting Started
Available in
days
days
after you enroll
- Welcome to the Course (1:08)
- What Is React? And Why Would You Use It? (2:58)
- ReactJS vs Vanilla JavaScript (10:57)
- Editing Our First React App (4:22)
- About the Course (2:55)
- One Course, Two Paths (3:08)
- How To Get The Most Out Of This Course (5:24)
- Join Our Online Learning Community
- How To Create New React Projects (7:10)
- Why Do We Need A Special Project Setup? (2:51)
JavaScript Refresher
Available in
days
days
after you enroll
- Module Introduction (1:49)
- Starting Project (1:00)
- Adding JavaScript To A Page & How React Projects Differ (6:57)
- React Projects Use a Build Process (8:04)
- "import" & "export" (12:04)
- Revisiting Variables & Values (7:01)
- Revisiting Operators (2:33)
- Revisiting Functions & Parameters (8:14)
- Arrow Functions (2:11)
- Revisiting Objects & Classes (6:07)
- Arrays & Array Methods like map() (11:10)
- Destructuring (5:16)
- The Spread Operator (3:13)
- Revisiting Control Structures (5:28)
- Manipulating the DOM - Not With React! (0:52)
- Using Functions as Values (7:22)
- Defining Functions Inside Of Functions (1:55)
- Reference vs Primitive Values (4:45)
- Next-Gen JavaScript - Summary
- JS Array Functions
React Essentials - Components, JSX, Props, State & More
Available in
days
days
after you enroll
- Module Introduction (1:48)
- It's All About Components! [Core Concept] (6:07)
- Setting Up The Starting Project (3:06)
- JSX & React Components [Core Concept] (4:42)
- Creating & Using a First Custom Component (5:52)
- A Closer Look: Components & File Extensions
- How React Handles Components & How It Builds A "Component Tree" [Core Concept] (8:21)
- Quiz: Components & JSX
- Using & Outputting Dynamic Values [Core Concept] (6:01)
- Setting HTML Attributes Dynamically & Loading Image Files (4:42)
- Making Components Reusable with Props [Core Concept] (9:06)
- Alternative Props Syntaxes (6:44)
- More Prop Syntaxes
- Quiz: Dynamic Values & Props
- Best Practice: Storing Components in Files & Using a Good Project Structure (6:32)
- Storing Component Style Files Next To Components (6:15)
- Component Composition: The special "children" Prop [Core Concept] (8:06)
- Reacting to Events [Core Concept] (6:45)
- Passing Functions as Values to Props (6:43)
- Passing Custom Arguments to Event Functions (5:36)
- Quiz: Best Practices & Event Handling
- How NOT to Update the UI - A Look Behind The Scenes of React [Core Concept] (5:30)
- Managing State & Using Hooks [Core Concept] (10:28)
- Deriving & Outputting Data Based on State (4:50)
- Quiz: State & Computed Values
- Rendering Content Conditionally (8:03)
- CSS Styling & Dynamic Styling (5:12)
- Outputting List Data Dynamically (7:40)
- Quiz: Conditional Content & Dynamic Lists
- Module Summary (6:05)
React Essentials - Deep Dive
Available in
days
days
after you enroll
- Module Introduction (1:26)
- You Don't Have To Use JSX! (4:38)
- Working with Fragments (5:40)
- When Should You Split Components? (3:14)
- Splitting Components By Feature & State (6:54)
- Problem: Props Are Not Forwarded To Inner Elements (6:44)
- Forwarding Props To Wrapped Elements (3:46)
- Working with Multiple JSX Slots (8:42)
- Setting Component Types Dynamically (8:44)
- Setting Default Prop Values (2:09)
- Onwards To The Next Project & Advanced Concepts (2:17)
- Not All Content Must Go Into Components (5:10)
- Closer Look: public/ vs assets/ for Image Storage
- New Project: First Steps Towards Our Tic-Tac-Toe Game (3:58)
- Concept Repetition: Splitting Components & Building Reusable Components (4:14)
- Concept Repetition: Working with State (7:57)
- Component Instances Work In Isolation! (2:03)
- Conditional Content & A Suboptimal Way Of Updating State (4:54)
- Best Practice: Updating State Based On Old State Correctly (7:04)
- User Input & Two-Way-Binding (7:42)
- Rendering Multi-Dimensional Lists (7:41)
- Best Practice: Updating Object State Immutably (8:44)
- Lifting State Up [Core Concept] (9:39)
- Avoid Intersecting States! (5:22)
- Prefer Computed Values & Avoid Unnecessary State Management (6:17)
- Deriving State From Props (7:22)
- Sharing State Across Components (4:12)
- Reducing State Management & Identifying Unnecessary State (5:52)
- Disabling Buttons Conditionally (2:37)
- Outsourcing Data Into A Separate File (4:28)
- Lifting Computed Values Up (5:19)
- Deriving Computed Values From Other Computed Values (5:29)
- Tic-Tac-Toe Game: The "Game Over" Screen & Checking for a Draw (5:40)
- Why Immutability Matters - Always! (5:28)
- When NOT To Lift State Up (5:20)
- An Alternative To Lifting State Up (3:16)
- Final Polishing & Improving Components (5:15)
React Essentials - Practice Project
Available in
days
days
after you enroll
- Module Introduction & A Challenge For You! (5:09)
- Adding a Header Component (4:48)
- Getting Started with a User Input Component (5:07)
- Handling Events & Using Two-Way-Binding (10:28)
- Lifting State Up (8:59)
- Computing Values & Properly Handling Number Values (5:41)
- Outputting Results in a List & Deriving More Values (9:02)
- Outputting Content Conditionally (4:24)
Styling React Components
Available in
days
days
after you enroll
- Module Introduction & Starting Project (3:57)
- Splitting CSS Code Across Multiple Files (3:22)
- Styling React Apps with Vanilla CSS - Pros & Cons (2:32)
- Vanilla CSS Styles Are NOT Scoped To Components! (3:31)
- Styling React Apps with Inline Styles (6:24)
- Dynamic & Conditional Inline Styles (3:27)
- Dynamic & Conditional Styling with CSS Files & CSS Classes (5:41)
- Scoping CSS Rules with CSS Modules (9:51)
- Introducing "Styled Components" (Third-party Package) (8:03)
- Creating Flexible Components with Styled Components (4:47)
- Dynamic & Conditional Styling with Styled Components (11:07)
- Styled Components: Pseudo Selectors, Nested Rules & Media Queries (7:15)
- Creating Reusable Components & Component Combinations (9:53)
- Introducing Tailwind CSS For React App Styling (11:26)
- Adding & Using Tailwind CSS In A React Project (3:39)
- Tailwind: Media Queries & Pseudo Selectors (5:22)
- Dynamic & Conditional Styling with Tailwind (5:50)
- Migrating The Demo App to Tailwind CSS (4:15)
- Tailwind CSS: Pros & Cons (4:26)
Debugging React Apps
Available in
days
days
after you enroll
Working with Refs & Portals
Available in
days
days
after you enroll
- Module Introduction & Starting Project (3:19)
- Repetition: Managing User Input with State (Two-Way-Binding) (5:17)
- Introducing Refs: Connecting & Accessing HTML Elements via Refs (6:04)
- Manipulating the DOM via Refs (2:14)
- Refs vs State Values (4:45)
- Adding Challenges to the Demo Project (4:49)
- Setting Timers & Managing State (4:56)
- Using Refs for More Than "DOM Element Connections" (8:30)
- Adding a Modal Component (6:40)
- Forwarding Refs to Custom Components (6:28)
- Exposing Component APIs via the useImperativeHandle Hook (8:23)
- More Examples: When To Use Refs & State (8:50)
- Sharing State Across Components (4:58)
- Enhancing the Demo App "Result Modal" (2:12)
- Closing the Modal via the ESC (Escape) Key
- Introducing & Understanding "Portals" (6:55)
Practice Project: Project Management App (with Components, State, Refs & More)
Available in
days
days
after you enroll
- Module Introduction & Starting Project (3:11)
- Adding a "Projects Sidebar" Component (2:29)
- Styling the Sidebar & Button with Tailwind CSS (5:00)
- Adding the "New Project" Component & A Reusable "Input" Component (5:58)
- Styling Buttons & Inputs with Tailwind CSS (7:04)
- Splitting Components to Split JSX & Tailwind Styles (for Higher Reusability) (6:49)
- Managing State to Switch Between Components (8:19)
- Collecting User Input with Refs & Forwarded Refs (13:33)
- Handling Project Creation & Updating the UI (6:00)
- Validating User Input & Showing an Error Modal via useImperativeHandle (11:25)
- Styling the Modal via Tailwind CSS (5:46)
- Making Projects Selectable & Viewing Project Details (15:22)
- Handling Project Deletion (4:44)
- Adding "Project Tasks" & A Tasks Component (5:51)
- Managing Tasks & Understanding Prop Drilling (15:23)
- Clearing Tasks & Fixing Minor Bugs (6:40)
React's Context API & useReducer - Advanced State Management
Available in
days
days
after you enroll
- Module Introduction (1:54)
- Understanding Prop Drilling & Project Overview (5:58)
- Prop Drilling: Component Composition as a Solution (5:17)
- Introducing the Context API (2:17)
- Creating & Providing The Context (8:30)
- Consuming the Context (8:43)
- Linking the Context to State (7:27)
- A Different Way Of Consuming Context (5:01)
- What Happens When Context Values Change? (1:25)
- Migrating the Entire Demo Project to use the Context API (6:20)
- Outsourcing Context & State Into a Separate Provider Component (6:05)
- Introducing the useReducer Hook (10:06)
- Dispatching Actions & Editing State with useReducer (10:14)
Handling Side Effects & Using useEffect
Available in
days
days
after you enroll
- Module Introduction & Starting Project (4:03)
- What's a "Side Effect"? A Thorough Example (7:23)
- A Potential Problem with Side Effects: An Infinite Loop (2:48)
- Using useEffect for Handling (Some) Side Effects (5:31)
- Not All Side Effects Need useEffect (7:58)
- useEffect Not Needed: Another Example (8:30)
- Preparing Another Use-Case For useEffect (4:11)
- Using useEffect for Syncing With Browser APIs (4:09)
- Understanding Effect Dependencies (3:00)
- Fixing a Small Bug
- Preparing Another Problem That Can Be Fixed with useEffect (4:54)
- Introducing useEffect's Cleanup Function (4:49)
- The Problem with Object & Function Dependencies (8:09)
- The useCallback Hook (3:48)
- useEffect's Cleanup Function: Another Example (7:31)
- Optimizing State Updates (3:44)
Practice Project: Building a Quiz App
Available in
days
days
after you enroll
- Module Introduction & Starting Project (2:21)
- A First Component & Some State (7:03)
- Deriving Values, Outputting Questions & Registering Answers (12:53)
- Shuffling Answers & Adding Quiz Logic (6:57)
- Adding Question Timers (11:40)
- Working with Effect Dependencies & useCallback (7:14)
- Using Effect Cleanup Functions & Using Keys for Resetting Components (7:53)
- Highlighting Selected Answers & Managing More State (11:34)
- Splitting Components Up To Solve Problems (17:43)
- Moving Logic To Components That Actually Need It ("Moving State Down") (12:46)
- Setting Different Timers Based On The Selected Answer (8:07)
- Outputting Quiz Results (15:09)
A Look Behind The Scenes Of React & Optimization Techniques
Available in
days
days
after you enroll
- Module Introduction (1:16)
- React Builds A Component Tree / How React Works Behind The Scenes (8:41)
- Analyzing Component Function Executions via React's DevTools Profiler (5:57)
- Avoiding Component Function Executions with memo() (8:04)
- Avoiding Component Function Executions with Clever Structuring (6:06)
- Understanding the useCallback() Hook (7:05)
- Understanding the useMemo() Hook (5:58)
- Introducing the React Compiler (10:04)
- React Uses A Virtual DOM - Time To Explore It! (7:15)
- Why Keys Matter When Managing State! (11:56)
- More Reasons For Why Keys Matter (2:54)
- Using Keys For Resetting Components (5:22)
- State Scheduling & Batching (5:49)
- Optimizing React with MillionJS (4:45)
An Alternative Way Of Building Components: Class-based Components
Available in
days
days
after you enroll
- Module Introduction (2:10)
- What & Why (4:53)
- Adding a First Class-based Component (6:54)
- Working with State & Events (11:38)
- The Component Lifecycle (Class-based Components Only!) (5:20)
- Lifecycle Methods In Action (11:46)
- Class-based Components & Context (4:53)
- Class-based vs Functional Components: A Summary (2:42)
- Introducing Error Boundaries (9:52)
- Module Resources
Sending Http Requests (e.g. Connecting to a Database)
Available in
days
days
after you enroll
- Module Introduction (2:53)
- How (Not) To Connect To A Database (6:20)
- Starting Project & Dummy Backend API (3:25)
- Preparing the App For Data Fetching (5:47)
- How NOT To Send HTTP Requests (And Why It's Wrong) (6:24)
- Sending HTTP Requests (GET Request) via useEffect (3:59)
- Using async / await (2:26)
- Handling Loading States (5:27)
- Handling HTTP Errors (9:16)
- Transforming Fetched Data (5:31)
- Extracting Code & Improving Code Structure (2:53)
- Sending Data with POST Requests (12:00)
- Using Optimistic Updating (7:33)
- Deleting Data (via DELETE HTTP Requests) (3:43)
- Practice: Fetching Data (7:13)
Building Custom React Hooks
Available in
days
days
after you enroll
- Module Introduction & Starting Project (2:07)
- Revisiting the "Rules of Hooks" & Why To Use Hooks (6:11)
- Creating a Custom Hook (5:32)
- Custom Hook: Managing State & Returning State Values (10:51)
- Exposing Nested Functions From The Custom Hook (6:03)
- Using A Custom Hook in Multiple Components (4:25)
- Creating Flexible Custom Hooks (4:59)
Working with Forms & User Input
Available in
days
days
after you enroll
- Module Introduction & Starting Project (2:04)
- What Are Forms & What's Tricky About Them? (3:59)
- Handling Form Submission (11:31)
- Managing & Getting User Input via State & Generic Handlers (11:12)
- Getting User Input via Refs (4:35)
- Getting Values via FormData & Native Browser APIs (9:03)
- Resetting Forms (4:38)
- Validating Input on Every Keystroke via State (6:58)
- Validating Input Upon Lost Focus (Blur) (7:53)
- Validating Input Upon Form Submission (7:54)
- Validating Input via Built-in Validation Props (4:59)
- Mixing Custom & Built-in Validation Logic (4:28)
- Building & Using a Reusable Input Component (10:06)
- Outsourcing Validation Logic (3:22)
- Creating a Custom useInput Hook (15:11)
- Using Third-Party Form Libraries (1:31)
Handling Forms via Form Actions
Available in
days
days
after you enroll
- What are Form Actions? (6:47)
- Module Introduction (2:48)
- Adding Validation Checks (7:50)
- Managing Form-dependent State with useActionState() (12:21)
- Using User Input (10:04)
- Moving the Action Function out of the Component (2:34)
- A Demo App: Introduction (3:26)
- Handling Form Submission (9:40)
- Working with Asynchronous Form Actions (6:23)
- Updating the UI with useFormStatus() (5:06)
- Registering Multiple Form Actions (4:32)
- Sending an HTTP Request via a Form Action (5:26)
- Using the "pending" State from useActionState() (3:47)
- Adding Optimistic Updating (9:47)
- Module Summary (2:57)
Practice Project: Building a Food Order App
Available in
days
days
after you enroll
- Module Introduction & Starting Project (4:14)
- Planning the App & Adding a First Component (6:40)
- Fetching Meals Data (GET HTTP Request) (12:00)
- Adding a "MealItem" Component (7:39)
- Formatting & Outputting Numbers as Currency (2:51)
- Creating a Configurable & Flexible Custom Button Component (8:02)
- Getting Started with Cart Context & Reducer (20:59)
- Finishing & Using the Cart Context & Reducer (17:21)
- Adding a Reusable Modal Component with useEffect (7:29)
- Opening the Cart in the Modal via a New Context (19:32)
- Working on the Cart Items (8:01)
- Adding a Custom Input Component & Managing Modal Visibility (19:31)
- Handling Form Submission & Validation (6:50)
- Sending a POST Request with Order Data (7:35)
- Adding a Custom HTTP Hook & Avoiding Common Errors (26:23)
- Handling HTTP Loading & Error States (3:12)
- Finishing Touches (14:08)
- Migrating To Form Actions (3:13)
- Managing Form Status with Form Actions (5:08)
Diving into Redux (An Alternative To The Context API)
Available in
days
days
after you enroll
- Module Introduction (1:05)
- Another Look At State In React Apps (5:14)
- Redux vs React Context (6:19)
- How Redux Works (5:48)
- Important: createStore() is (Not) Deprecated
- Exploring The Core Redux Concepts (15:14)
- More Redux Basics (3:04)
- Preparing a new Project (1:59)
- Creating a Redux Store for React (4:54)
- Providing the Store (3:13)
- Using Redux Data in React Components (5:08)
- Dispatching Actions From Inside Components (3:33)
- Redux with Class-based Components (10:20)
- Attaching Payloads to Actions (4:15)
- Working with Multiple State Properties (6:19)
- How To Work With Redux State Correctly (5:07)
- Redux Challenges & Introducing Redux Toolkit (5:27)
- Adding State Slices (8:11)
- Connecting Redux Toolkit State (4:47)
- Migrating Everything To Redux Toolkit (6:19)
- Working with Multiple Slices (11:50)
- Reading & Dispatching From A New Slice (6:56)
- Splitting Our Code (5:03)
- Summary (3:53)
- Module Resources
Advanced Redux
Available in
days
days
after you enroll
- Module Introduction (0:39)
- Redux & Side Effects (and Asynchronous Code) (3:27)
- Refresher / Practice: Part 1/2 (20:12)
- Refresher / Practice: Part 2/2 (18:00)
- Redux & Async Code (4:09)
- Frontend Code vs Backend Code (5:40)
- Where To Put Our Logic (8:59)
- Using useEffect with Redux (6:00)
- A Problem with useEffect()
- Handling Http States & Feedback with Redux (12:49)
- Using an Action Creator Thunk (12:07)
- Getting Started with Fetching Data (8:39)
- Finalizing the Fetching Logic (5:16)
- Exploring the Redux DevTools (5:37)
- Summary (1:53)
- Module Resources
Building a Multi-Page SPA with React Router
Available in
days
days
after you enroll
- Module Introduction (3:21)
- Routing: Multiple Pages in Single-Page Applications (3:15)
- Project Setup & Installing React Router (3:06)
- Defining Routes (7:42)
- Adding a Second Route (2:07)
- Exploring an Alternative Way of Defining Routes (3:01)
- Navigating between Pages with Links (4:36)
- Layouts & Nested Routes (8:24)
- Showing Error Pages with errorElement (3:58)
- Working with Navigation Links (NavLink) (6:37)
- Navigating Programmatically (2:41)
- Defining & Using Dynamic Routes (7:44)
- Adding Links for Dynamic Routes (3:22)
- Understanding Relative & Absolute Paths (10:38)
- Working with Index Routes (1:56)
- Onwards to a new Project Setup (3:16)
- Time to Practice: Problem (1:25)
- Time to Practice: Solution (23:16)
- Data Fetching with a loader() (7:35)
- Using Data From A Loader In The Route Component (2:51)
- More loader() Data Usage (3:17)
- Where Should loader() Code Be Stored? (2:18)
- When Are loader() Functions Executed? (2:48)
- Reflecting The Current Navigation State in the UI (2:53)
- Returning Responses in loader()s (4:01)
- Which Kind Of Code Goes Into loader()s? (1:14)
- Error Handling with Custom Errors (4:56)
- Extracting Error Data & Throwing Responses (6:24)
- The json() Utility Function (2:07)
- Dynamic Routes & loader()s (7:32)
- The useRouteLoaderData() Hook & Accessing Data From Other Routes (7:41)
- Planning Data Submission (2:22)
- Working with action() Functions (9:08)
- Submitting Data Programmatically (9:06)
- Updating the UI State Based on the Submission Status (4:02)
- Validating User Input & Outputting Validation Errors (6:57)
- Reusing Actions via Request Methods (7:55)
- Behind-the-Scenes Work with useFetcher() (9:11)
- Deferring Data Fetching with defer() (9:07)
- json() and defer() with React Router v7
- Controlling Which Data Should Be Deferred (7:22)
- Module Summary (2:57)
Adding Authentication To React Apps
Available in
days
days
after you enroll
- Module Introduction (1:10)
- How Authentication Works (9:08)
- Project Setup & Route Setup (3:46)
- Working with Query Parameters (7:35)
- Implementing the Auth Action (11:40)
- Validating User Input & Outputting Validation Errors (4:18)
- Adding User Login (1:55)
- Attaching Auth Tokens to Outgoing Requests (6:32)
- Adding User Logout (4:21)
- Updating the UI Based on Auth Status (6:05)
- Adding Route Protection (2:46)
- Adding Automatic Logout (5:10)
- Managing the Token Expiratoin (7:28)
Deploying React Apps
Available in
days
days
after you enroll
React Query / Tanstack Query: Handling HTTP Requests With Ease
Available in
days
days
after you enroll
- Module Introduction (1:46)
- Project Setup & Overview (4:08)
- React Query: What & Why? (5:59)
- Installing & Using Tanstack Query - And Seeing Why It's Great! (16:32)
- Understanding & Configuring Query Behaviors - Cache & Stale Data (7:43)
- Dynamic Query Functions & Query Keys (13:05)
- The Query Configuration Object & Aborting Requests (5:27)
- Enabled & Disabled Queries (6:55)
- Changing Data with Mutations (11:29)
- Fetching More Data & Testing the Mutation (6:39)
- Acting on Mutation Success & Invalidating Queries (8:50)
- A Challenge! The Problem (2:14)
- A Challenge! The Solution (16:37)
- Disabling Automatic Refetching After Invalidations (2:42)
- Enhancing the Demo App & Repeating Mutation Concepts (9:18)
- React Query Advantages In Action (8:57)
- Updating Data with Mutations (4:49)
- Optimistic Updating (13:06)
- Using the Query Key As Query Function Input (7:47)
- React Query & React Router (20:26)
A (Pretty Deep Dive) Introduction to NextJS - App Router
Available in
days
days
after you enroll
- Module Introduction (2:01)
- Creating a NextJS Project (4:17)
- Understanding File-based Routing & React Server Components (2:45)
- Adding Another Route via the Filesystem (3:06)
- Navigating Between Pages (4:12)
- Working with Pages & Layouts (3:22)
- Reserved File Names, Custom Components & How To Organize A NextJS Project (6:31)
- Reserved Filenames
- Configuring Dynamic Routes & Using Route Parameters (6:17)
- Onwards to the Main Project: The Foodies App (1:24)
- Exercise: Your Task (2:03)
- Exercise: Solution (8:19)
- Revisiting The Concept Of Layouts (3:50)
- Adding a Custom Component To A Layout (5:58)
- Styling NextJS Project: Your Options & Using CSS Modules (6:00)
- Optimizing Images with the NextJS Image Component (4:57)
- Using More Custom Components (3:48)
- Populating The Starting Page Content (4:18)
- Preparing an Image Slideshow (3:25)
- React Server Components vs Client Components - When To Use What (8:15)
- Using Client Components Efficiently (11:07)
- Outputting Meals Data & Images With Unknown Dimensions (10:31)
- Setting Up A SQLite Database (3:11)
- Fetching Data By Leveraging NextJS & Fullstack Capabilities (7:17)
- Adding A Loading Page (4:00)
- Using Suspense & Streamed Responses For Granular Loading State Management (5:54)
- Handling Errors (5:22)
- Handling "Not Found" States (1:57)
- Loading & Rendering Meal Details via Dynamic Routes & Route Parameters (11:04)
- Throwing Not Found Errors For Individual Meals (2:03)
- Getting Started with the "Share Meal" Form (1:53)
- Getting Started with a Custom Image Picker Input Component (8:28)
- Adding an Image Preview to the Picker (6:00)
- Improving the Image Picker Component
- Introducing & Using Server Actions for Handling Form Submissions (9:02)
- Storing Server Actions in Separate Files (3:45)
- Creating a Slug & Sanitizing User Input for XSS Protection (3:20)
- Storing Uploaded Images & Storing Data in the Database (12:56)
- Managing the Form Submission Status with useFormStatus (5:30)
- Adding Server-Side Input Validation (5:54)
- Working with Server Action Responses & useFormState (8:05)
- Building For Production & Understanding NextJS Caching (6:06)
- Triggering Cache Revalidations (3:57)
- Don't Store Files Locally On The Filesystem! (2:13)
- Bonus: Storing Uploaded Images In The Cloud (AWS S3)
- Adding Static Metadata (3:47)
- Adding Dynamic Metadata (2:20)
- Module Summary (4:25)
A (Pretty Deep Dive) Introduction to Next.js - Pages Router
Available in
days
days
after you enroll
- About the NextJS Pages Router (2:55)
- Creating a NextJS Project (2:07)
- Analyzing the Created Project (2:52)
- Adding First Pages (6:05)
- Adding Nested Paths & Pages (Nested Routes) (3:47)
- Creating Dynamic Pages (with Parameters) (3:36)
- Extracting Dynamic Parameter Values (4:07)
- Linking Between Pages (7:13)
- Onwards to a bigger Project! (3:32)
- Preparing the Project Pages (3:42)
- Outputting a List of Meetups (5:03)
- Adding the New Meetup Form (3:54)
- The "_app.js" File & Layout Wrapper (6:17)
- Using Programmatic (Imperative) Navigation (3:47)
- Adding Custom Components & CSS Modules (10:00)
- How Pre-rendering Works & Which Problem We Face (5:52)
- Data Fetching for Static Pages (8:56)
- More on Static Site Generation (SSG) (5:44)
- Exploring Server-side Rendering (SSR) with "getServerSideProps" (6:27)
- Working with Params for SSG Data Fetching (5:14)
- Preparing Paths with "getStaticPaths" & Working With Fallback Pages (7:16)
- Introducing API Routes (6:20)
- Working with MongoDB (9:32)
- Sending Http Requests To Our API Routes (6:49)
- Getting Data From The Database (7:09)
- Getting Meetup Details Data & Preparing Pages (9:41)
- Adding "head" Metadata (9:19)
- Deploying Next.js Projects (12:26)
- Using Fallback Pages & Re-deploying (4:13)
- Summary (2:15)
- Module Resources
React Server Components (RSC) & Server Actions - A Closer Look
Available in
days
days
after you enroll
- Module Introduction (1:48)
- Why We Need A Special Project Setup (4:14)
- Understanding React Server Components (7:16)
- Changing Server to Client Components (5:46)
- Combining Server and Client Components (5:52)
- Fetching Data with RSCs (3:39)
- Submitting Data with Server Actions (7:06)
- Using the use() Hook for Promises & Data Fetching (7:19)
- The use() Hook In Action (5:31)
- Handling Errors (3:48)
- Theory Wrap Up (1:03)
Animating React Apps with Framer Motion
Available in
days
days
after you enroll
- Module Introduction (3:05)
- Project Setup & Overview (1:42)
- Animating with CSS Transitions (7:41)
- Animating with CSS Animations (5:38)
- Introducing Framer Motion (3:48)
- Framer Motion Basics & Fundamentals (8:29)
- Animating Between Conditional Values (4:13)
- Adding Entry Animations (4:28)
- Animating Element Disappearances / Removal (3:51)
- Making Elements "Pop" With Hover Animations (4:13)
- Reusing Animation States (3:28)
- Nested Animations & Variants (7:46)
- Animating Staggered Lists (4:29)
- Animating Colors & Working with Keyframes (4:04)
- Imperative Animations (7:28)
- Animating Layout Changes (3:34)
- Orchestrating Multi-Element Animations (10:05)
- Combining Animations With Layout Animations (3:55)
- Animating Shared Elements (4:15)
- Re-triggering Animations via Keys (4:52)
- Scroll-based Animations (15:44)
React Patterns & Best Practices
Available in
days
days
after you enroll
- Module Introduction (0:55)
- Project Overview (0:50)
- Introducing Compound Components (11:04)
- Managing Multi-Component State with the Context API (10:57)
- Grouping Compound Components (6:29)
- Adding Extra Components For Reusability & Configurability (8:36)
- Sharing Cross-Component State When Working With Compound Components (6:07)
- Introducing & Using Render Props (6:14)
- Adding Search To A React App (4:18)
- Implementing a Search Functionality With Help Of Render Props (4:18)
- Handling Keys Dynamically (2:42)
- Working with Debouncing (7:10)
Testing React Apps (Unit Tests)
Available in
days
days
after you enroll
- Module Introduction (1:23)
- What & Why? (3:24)
- Understanding Different Kinds Of Tests (4:04)
- What To Test & How To Test (1:29)
- Understanding the Technical Setup & Involved Tools (2:39)
- Running a First Test (7:16)
- Writing Our First Test (10:14)
- Grouping Tests Together With Test Suites (2:14)
- Testing User Interaction & State (14:00)
- Testing Connected Components (3:19)
- Testing Asynchronous Code (9:11)
- Working With Mocks (8:30)
- Summary & Further Resources (3:47)
- Module Resources
React & TypeScript
Available in
days
days
after you enroll
- Module Introduction (1:26)
- What & Why? (6:34)
- Installing & Using TypeScript (6:38)
- Exploring the Base Types (3:55)
- Working with Array & Object Types (5:33)
- Understanding Type Inference (2:47)
- Using Union Types (2:48)
- Understanding Type Aliases (2:42)
- Functions & Function Types (5:19)
- Diving Into Generics (8:01)
- A Closer Look At Generics
- Creating a React + TypeScript Project (8:34)
- Working with Components & TypeScript (5:41)
- Working with Props & TypeScript (14:20)
- Adding a Data Model (9:09)
- Time to Practice: Exercise Time! (7:02)
- Form Submissions In TypeScript Projects (5:21)
- Working with refs & useRef (10:56)
- Working with "Function Props" (7:26)
- Managing State & TypeScript (5:13)
- Adding Styling (2:19)
- Time to Practice: Removing a Todo (9:27)
- The Context API & TypeScript (13:55)
- Summary (2:18)
- Bonus: Exploring tsconfig.json (5:46)
- Module Resources
Optional: React Hooks Introduction & Summary
Available in
days
days
after you enroll
- Module Introduction (2:10)
- What Are React Hooks? (4:56)
- The Starting Project (4:51)
- Getting Started with useState() (9:20)
- More on useState() & State Updating (11:54)
- Array Destructuring (2:34)
- Multiple States (3:47)
- Rules of Hooks (2:20)
- Passing State Data Across Components (7:56)
- Time to Practice: Hooks Basics - Problem (1:03)
- Time to Practice: Hooks Basics - Solution (2:55)
- Sending Http Requests (7:16)
- useEffect() & Loading Data (8:06)
- Understanding useEffect() Dependencies (2:21)
- More on useEffect() (9:37)
- What's useCallback()? (5:28)
- Working with Refs & useRef() (5:21)
- Cleaning Up with useEffect() (3:20)
- Deleting Ingredients (2:28)
- Loading Errors & State Batching (8:48)
- More on State Batching & State Updates
- Understanding useReducer() (9:43)
- Using useReducer() for the Http State (10:40)
- Working with useContext() (8:27)
- Performance Optimizations with useMemo() (10:30)
- Getting Started with Custom Hooks (13:45)
- Sharing Data Between Custom Hooks & Components (14:58)
- Using the Custom Hook (8:11)
- Wrap Up (3:05)
- Module Resources
Optional: React Summary & Core Feature Walkthrough
Available in
days
days
after you enroll
- Module Introduction (1:08)
- What Is React & Why Would You Use It? (5:37)
- React Projects - Requirements (2:09)
- Creating React Projects (3:27)
- Our Starting Project (3:28)
- Understanding How React Works (7:46)
- Building A First Custom Component (11:15)
- Outputting Dynamic Values (5:03)
- Reusing Components (6:00)
- Passing Data to Components with Props (6:15)
- CSS Styling & CSS Modules (10:07)
- Exercise & Another Component (6:31)
- Preparing the App For State Management (3:46)
- Adding Event Listeners (7:52)
- Working with State (10:00)
- Lifting State Up (9:08)
- The Special "children" Prop (7:21)
- State & Conditional Content (8:59)
- Adding a Shared Header & More State Management (7:51)
- Adding Form Buttons (3:34)
- Handling Form Submission (6:18)
- Updating State Based On Previous State (5:30)
- Outputting List Data (6:39)
- Adding a Backend to the React SPA (6:10)
- Sending a POST HTTP Request (4:12)
- Handling Side Effects with useEffect() (9:06)
- Handle Loading State (4:23)
- Understanding & Adding Routing (3:55)
- Adding Routes (5:36)
- Working with Layout Routes (4:08)
- Refactoring Route Components & More Nesting (5:35)
- Linking & Navigating (8:09)
- Data Fetching via loader()s (9:07)
- Submitting Data with action()s (11:08)
- Dynamic Routes (8:41)
- Module Summary (1:25)
Course Roundup
Available in
days
days
after you enroll
Course Prerequisites
Here's what you need to get the most out of this course
Required
- Basic JavaScript knowledge.
Good News!
- NO React knowledge is required at all.
All pre-requisites are covered by courses in our "Academind Pro" Membership.
Your Instructor
Maximilian Schwarzmüller
Founder & Instructor
Self-taught developer with 3,500,000+ students and 900,000 YouTube subscribers. I co-founded Academind with Manuel Lorenz to help people master new skills and build amazing projects.
Join 2923 happy students!
Choose the plan that works best for you
Single-Course License
Full access to "React - The Complete Guide (incl Hooks, React Router, Redux)"
$99
one-time
This is a one-time payment that grants access to this course only, not to any other courses.
Most Popular
Academind Pro Membership
Unlimited access to this and all other current & future courses!
$25
/month
This is a recurring payment. You can cancel anytime from your profile. For more info, contact Academind.
Continue Your Learning Journey
Expand your skills with these hand-picked courses that complement what you'll learn here.
