React - The Complete Guide (incl Hooks, React Router, Redux)
Learn React.js from scratch! Learn Reactjs, Redux, React Routing, Animations, NextJS & more!
Watch Promo Enroll in Course
This bestselling course has turned more than 750,000 students into ReactJS developers!
Updated January 2024:
Added brand-new content (~3h) on the NextJS App Router
Added a brand-new "Best Practices & Patterns" section
Updated October 2023:
Re-recorded roughly the first half of the course (up to the "Diving into Redux" section, excluding that section)
Updated August 2023:
Added brand-new section on React Query (Tanstack Query)
Added brand-new section on animating React apps with Framer Motion
Updated June 2023:
Add two new practice projects
Added more coding exercises
Added brand-new JS Refresher section
Tons of minor improvements & fixes
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!
A Course For Busy Customers & Business Professionals!
This course also 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!
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! :)
And in case you don't even know why you would want to learn React and you're just here because of some ad or "the algorithm" - no worries: ReactJS is a key technology as a web developer and in this course I will also explain WHY it's that important!
Welcome to "React - The Complete Guide"!
This course will teach you React.js in a practice-oriented way, using all the latest patterns and best practices you need. You will learn all the key fundamentals as well as advanced concepts and related topics to turn you into a React.js developer.
This is a huge course because it really covers EVERYTHING you need to know and learn to become a React.js developer!
No matter if you know nothing about React or if you already got some basic React knowledge (not required but also not a problem), you will get tons of useful information and knowledge out of this course!
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!
I kept this course updated since its initial launch to ensure that you always learn React in the best possible and up-do-date way!
What's in this course?
- A thorough introduction to React.js (What is it and why would you use it?)
- All the core basics: How React works, building components with React & building UIs with React
- Components, props & dynamic data binding
- Working with user events and state to create interactive applications
- A (thorough) look behind the scenes to understand how React works under the hood
- Detailed explanations on how to work with lists and conditional content
- React Hooks (in-depth)!
- Working with built-in Hooks and building custom Hooks
- How to debug React apps
- Styling React apps with "Styled Components" and "CSS Modules"
- Working with "Fragments" & "Portals"
- Dealing with side effects
- Class-based components and functional components
- Sending Http requests & handling transitional states + responses
- Handling forms and user input (incl. validation)
- Redux & Redux Toolkit
- Routing with React Router
- An in-depth introduction into Next.js
- Deploying React Apps
- Implementing Authentication
- Unit Tests
- Combining React with TypeScript
- Adding Animations
- Tons of examples and demo projects so that you can apply all the things you learned in real projects
- And so much more - check out the full curriculum on this page!
This really is the "Complete Guide" - promised!
And best of all?
You don't need any prior React knowledge!
This course starts with zero knowledge assumed! All you need is basic web development and JavaScript knowledge (though the course even includes a brief JavaScript refresher to ensure that we're all on the same page!).
Check out the full curriculum, the free preview videos and join the course risk-free thanks to the 30-day money-back guarantee!
60+
hours
500+
lessons
Course Curriculum
Getting Started
Available in
days
days
after you enroll
-
PreviewWelcome to the Course (1:08)
-
PreviewWhat Is React? And Why Would You Use It? (2:58)
-
PreviewReactJS vs Vanilla JavaScript (10:57)
-
PreviewEditing Our First React App (4:22)
-
PreviewAbout the Course (2:55)
-
PreviewOne Course, Two Paths (3:08)
-
PreviewHow To Get The Most Out Of This Course (5:24)
-
PreviewJoin Our Online Learning Community
-
PreviewHow To Create New React Projects (7:10)
-
PreviewWhy Do We Need A Special Project Setup? (2:51)
JavaScript Refresher
Available in
days
days
after you enroll
-
StartModule Introduction (1:49)
-
StartStarting Project (1:00)
-
StartAdding JavaScript To A Page & How React Projects Differ (6:57)
-
StartReact Projects Use a Build Process (8:04)
-
Start"import" & "export" (12:04)
-
StartRevisiting Variables & Values (7:01)
-
StartRevisiting Operators (2:33)
-
StartRevisiting Functions & Parameters (8:14)
-
StartArrow Functions (2:11)
-
StartRevisiting Objects & Classes (6:07)
-
StartArrays & Array Methods like map() (11:10)
-
StartDestructuring (5:16)
-
StartThe Spread Operator (3:13)
-
StartRevisiting Control Structures (5:28)
-
StartManipulating the DOM - Not With React! (0:52)
-
StartUsing Functions as Values (7:22)
-
StartDefining Functions Inside Of Functions (1:55)
-
StartReference vs Primitive Values (4:45)
-
StartNext-Gen JavaScript - Summary
-
StartJS Array Functions
React Essentials - Components, JSX, Props, State & More
Available in
days
days
after you enroll
-
StartModule Introduction (1:48)
-
StartIt's All About Components! [Core Concept] (6:07)
-
StartSetting Up The Starting Project (3:06)
-
StartJSX & React Components [Core Concept] (4:42)
-
StartCreating & Using a First Custom Component (5:52)
-
StartA Closer Look: Components & File Extensions
-
StartHow React Handles Components & How It Builds A "Component Tree" [Core Concept] (8:21)
-
StartQuiz: Components & JSX
-
StartUsing & Outputting Dynamic Values [Core Concept] (6:01)
-
StartSetting HTML Attributes Dynamically & Loading Image Files (4:42)
-
StartMaking Components Reusable with Props [Core Concept] (9:06)
-
StartAlternative Props Syntaxes (6:44)
-
StartMore Prop Syntaxes
-
StartQuiz: Dynamic Values & Props
-
StartBest Practice: Storing Components in Files & Using a Good Project Structure (6:32)
-
StartStoring Component Style Files Next To Components (6:15)
-
StartComponent Composition: The special "children" Prop [Core Concept] (8:06)
-
StartReacting to Events [Core Concept] (6:45)
-
StartPassing Functions as Values to Props (6:43)
-
StartPassing Custom Arguments to Event Functions (5:36)
-
StartQuiz: Best Practices & Event Handling
-
StartHow NOT to Update the UI - A Look Behind The Scenes of React [Core Concept] (5:30)
-
StartManaging State & Using Hooks [Core Concept] (10:28)
-
StartDeriving & Outputting Data Based on State (4:50)
-
StartQuiz: State & Computed Values
-
StartRendering Content Conditionally (8:03)
-
StartCSS Styling & Dynamic Styling (5:12)
-
StartOutputting List Data Dynamically (7:40)
-
StartQuiz: Conditional Content & Dynamic Lists
-
StartModule Summary (6:05)
React Essentials - Deep Dive
Available in
days
days
after you enroll
-
StartModule Introduction (1:26)
-
StartYou Don't Have To Use JSX! (4:38)
-
StartWorking with Fragments (5:40)
-
StartWhen Should You Split Components? (3:14)
-
StartSplitting Components By Feature & State (6:54)
-
StartProblem: Props Are Not Forwarded To Inner Elements (6:44)
-
StartForwarding Props To Wrapped Elements (3:46)
-
StartWorking with Multiple JSX Slots (8:42)
-
StartSetting Component Types Dynamically (8:44)
-
StartSetting Default Prop Values (2:09)
-
StartOnwards To The Next Project & Advanced Concepts (2:17)
-
StartNot All Content Must Go Into Components (5:10)
-
StartCloser Look: public/ vs assets/ for Image Storage
-
StartNew Project: First Steps Towards Our Tic-Tac-Toe Game (3:58)
-
StartConcept Repetition: Splitting Components & Building Reusable Components (4:14)
-
StartConcept Repetition: Working with State (7:57)
-
StartComponent Instances Work In Isolation! (2:03)
-
StartConditional Content & A Suboptimal Way Of Updating State (4:54)
-
StartBest Practice: Updating State Based On Old State Correctly (7:04)
-
StartUser Input & Two-Way-Binding (7:42)
-
StartRendering Multi-Dimensional Lists (7:41)
-
StartBest Practice: Updating Object State Immutably (8:44)
-
StartLifting State Up [Core Concept] (9:39)
-
StartAvoid Intersecting States! (5:22)
-
StartPrefer Computed Values & Avoid Unnecessary State Management (6:17)
-
StartDeriving State From Props (7:22)
-
StartSharing State Across Components (4:12)
-
StartReducing State Management & Identifying Unnecessary State (5:52)
-
StartDisabling Buttons Conditionally (2:37)
-
StartOutsourcing Data Into A Separate File (4:28)
-
StartLifting Computed Values Up (5:19)
-
StartDeriving Computed Values From Other Computed Values (5:29)
-
StartTic-Tac-Toe Game: The "Game Over" Screen & Checking for a Draw (5:40)
-
StartWhy Immutability Matters - Always! (5:28)
-
StartWhen NOT To Lift State Up (5:20)
-
StartAn Alternative To Lifting State Up (3:16)
-
StartFinal Polishing & Improving Components (5:15)
React Essentials - Practice Project
Available in
days
days
after you enroll
-
StartModule Introduction & A Challenge For You! (5:09)
-
StartAdding a Header Component (4:48)
-
StartGetting Started with a User Input Component (5:07)
-
StartHandling Events & Using Two-Way-Binding (10:28)
-
StartLifting State Up (8:59)
-
StartComputing Values & Properly Handling Number Values (5:41)
-
StartOutputting Results in a List & Deriving More Values (9:02)
-
StartOutputting Content Conditionally (4:24)
Styling React Components
Available in
days
days
after you enroll
-
StartModule Introduction & Starting Project (3:57)
-
StartSplitting CSS Code Across Multiple Files (3:22)
-
StartStyling React Apps with Vanilla CSS - Pros & Cons (2:32)
-
StartVanilla CSS Styles Are NOT Scoped To Components! (3:31)
-
StartStyling React Apps with Inline Styles (6:24)
-
StartDynamic & Conditional Inline Styles (3:27)
-
StartDynamic & Conditional Styling with CSS Files & CSS Classes (5:41)
-
StartScoping CSS Rules with CSS Modules (9:51)
-
StartIntroducing "Styled Components" (Third-party Package) (8:03)
-
StartCreating Flexible Components with Styled Components (4:47)
-
StartDynamic & Conditional Styling with Styled Components (11:07)
-
StartStyled Components: Pseudo Selectors, Nested Rules & Media Queries (7:15)
-
StartCreating Reusable Components & Component Combinations (9:53)
-
StartIntroducing Tailwind CSS For React App Styling (11:26)
-
StartAdding & Using Tailwind CSS In A React Project (3:39)
-
StartTailwind: Media Queries & Pseudo Selectors (5:22)
-
StartDynamic & Conditional Styling with Tailwind (5:50)
-
StartMigrating The Demo App to Tailwind CSS (4:15)
-
StartTailwind 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
-
StartModule Introduction & Starting Project (3:19)
-
StartRepetition: Managing User Input with State (Two-Way-Binding) (5:17)
-
StartIntroducing Refs: Connecting & Accessing HTML Elements via Refs (6:04)
-
StartManipulating the DOM via Refs (2:14)
-
StartRefs vs State Values (4:45)
-
StartAdding Challenges to the Demo Project (4:49)
-
StartSetting Timers & Managing State (4:56)
-
StartUsing Refs for More Than "DOM Element Connections" (8:30)
-
StartAdding a Modal Component (6:40)
-
StartForwarding Refs to Custom Components (6:28)
-
StartExposing Component APIs via the useImperativeHandle Hook (8:23)
-
StartMore Examples: When To Use Refs & State (8:50)
-
StartSharing State Across Components (4:58)
-
StartEnhancing the Demo App "Result Modal" (2:12)
-
StartClosing the Modal via the ESC (Escape) Key
-
StartIntroducing & Understanding "Portals" (6:55)
Practice Project: Project Management App (with Components, State, Refs & More)
Available in
days
days
after you enroll
-
StartModule Introduction & Starting Project (3:11)
-
StartAdding a "Projects Sidebar" Component (2:29)
-
StartStyling the Sidebar & Button with Tailwind CSS (5:00)
-
StartAdding the "New Project" Component & A Reusable "Input" Component (5:58)
-
StartStyling Buttons & Inputs with Tailwind CSS (7:04)
-
StartSplitting Components to Split JSX & Tailwind Styles (for Higher Reusability) (6:49)
-
StartManaging State to Switch Between Components (8:19)
-
StartCollecting User Input with Refs & Forwarded Refs (13:33)
-
StartHandling Project Creation & Updating the UI (6:00)
-
StartValidating User Input & Showing an Error Modal via useImperativeHandle (11:25)
-
StartStyling the Modal via Tailwind CSS (5:46)
-
StartMaking Projects Selectable & Viewing Project Details (15:22)
-
StartHandling Project Deletion (4:44)
-
StartAdding "Project Tasks" & A Tasks Component (5:51)
-
StartManaging Tasks & Understanding Prop Drilling (15:23)
-
StartClearing Tasks & Fixing Minor Bugs (6:40)
React's Context API & useReducer - Advanced State Management
Available in
days
days
after you enroll
-
StartModule Introduction (1:54)
-
StartUnderstanding Prop Drilling & Project Overview (5:58)
-
StartProp Drilling: Component Composition as a Solution (5:17)
-
StartIntroducing the Context API (2:17)
-
StartCreating & Providing The Context (8:30)
-
StartConsuming the Context (8:43)
-
StartLinking the Context to State (7:27)
-
StartA Different Way Of Consuming Context (5:01)
-
StartWhat Happens When Context Values Change? (1:25)
-
StartMigrating the Entire Demo Project to use the Context API (6:20)
-
StartOutsourcing Context & State Into a Separate Provider Component (6:05)
-
StartIntroducing the useReducer Hook (10:06)
-
StartDispatching Actions & Editing State with useReducer (10:14)
Handling Side Effects & Using useEffect
Available in
days
days
after you enroll
-
StartModule Introduction & Starting Project (4:03)
-
StartWhat's a "Side Effect"? A Thorough Example (7:23)
-
StartA Potential Problem with Side Effects: An Infinite Loop (2:48)
-
StartUsing useEffect for Handling (Some) Side Effects (5:31)
-
StartNot All Side Effects Need useEffect (7:58)
-
StartuseEffect Not Needed: Another Example (8:30)
-
StartPreparing Another Use-Case For useEffect (4:11)
-
StartUsing useEffect for Syncing With Browser APIs (4:09)
-
StartUnderstanding Effect Dependencies (3:00)
-
StartFixing a Small Bug
-
StartPreparing Another Problem That Can Be Fixed with useEffect (4:54)
-
StartIntroducing useEffect's Cleanup Function (4:49)
-
StartThe Problem with Object & Function Dependencies (8:09)
-
StartThe useCallback Hook (3:48)
-
StartuseEffect's Cleanup Function: Another Example (7:31)
-
StartOptimizing State Updates (3:44)
Practice Project: Building a Quiz App
Available in
days
days
after you enroll
-
StartModule Introduction & Starting Project (2:21)
-
StartA First Component & Some State (7:03)
-
StartDeriving Values, Outputting Questions & Registering Answers (12:53)
-
StartShuffling Answers & Adding Quiz Logic (6:57)
-
StartAdding Question Timers (11:40)
-
StartWorking with Effect Dependencies & useCallback (7:14)
-
StartUsing Effect Cleanup Functions & Using Keys for Resetting Components (7:53)
-
StartHighlighting Selected Answers & Managing More State (11:34)
-
StartSplitting Components Up To Solve Problems (17:43)
-
StartMoving Logic To Components That Actually Need It ("Moving State Down") (12:46)
-
StartSetting Different Timers Based On The Selected Answer (8:07)
-
StartOutputting Quiz Results (15:09)
A Look Behind The Scenes Of React & Optimization Techniques
Available in
days
days
after you enroll
-
StartModule Introduction (1:16)
-
StartReact Builds A Component Tree / How React Works Behind The Scenes (8:41)
-
StartAnalyzing Component Function Executions via React's DevTools Profiler (5:57)
-
StartAvoiding Component Function Executions with memo() (8:04)
-
StartAvoiding Component Function Executions with Clever Structuring (6:06)
-
StartUnderstanding the useCallback() Hook (7:05)
-
StartUnderstanding the useMemo() Hook (5:58)
-
StartIntroducing the React Compiler (10:04)
-
StartReact Uses A Virtual DOM - Time To Explore It! (7:15)
-
StartWhy Keys Matter When Managing State! (11:56)
-
StartMore Reasons For Why Keys Matter (2:54)
-
StartUsing Keys For Resetting Components (5:22)
-
StartState Scheduling & Batching (5:49)
-
StartOptimizing React with MillionJS (4:45)
An Alternative Way Of Building Components: Class-based Components
Available in
days
days
after you enroll
-
StartModule Introduction (2:10)
-
StartWhat & Why (4:53)
-
StartAdding a First Class-based Component (6:54)
-
StartWorking with State & Events (11:38)
-
StartThe Component Lifecycle (Class-based Components Only!) (5:20)
-
StartLifecycle Methods In Action (11:46)
-
StartClass-based Components & Context (4:53)
-
StartClass-based vs Functional Components: A Summary (2:42)
-
StartIntroducing Error Boundaries (9:52)
-
StartModule Resources
Sending Http Requests (e.g. Connecting to a Database)
Available in
days
days
after you enroll
-
StartModule Introduction (2:53)
-
StartHow (Not) To Connect To A Database (6:20)
-
StartStarting Project & Dummy Backend API (3:25)
-
StartPreparing the App For Data Fetching (5:47)
-
StartHow NOT To Send HTTP Requests (And Why It's Wrong) (6:24)
-
StartSending HTTP Requests (GET Request) via useEffect (3:59)
-
StartUsing async / await (2:26)
-
StartHandling Loading States (5:27)
-
StartHandling HTTP Errors (9:16)
-
StartTransforming Fetched Data (5:31)
-
StartExtracting Code & Improving Code Structure (2:53)
-
StartSending Data with POST Requests (12:00)
-
StartUsing Optimistic Updating (7:33)
-
StartDeleting Data (via DELETE HTTP Requests) (3:43)
-
StartPractice: Fetching Data (7:13)
Building Custom React Hooks
Available in
days
days
after you enroll
-
StartModule Introduction & Starting Project (2:07)
-
StartRevisiting the "Rules of Hooks" & Why To Use Hooks (6:11)
-
StartCreating a Custom Hook (5:32)
-
StartCustom Hook: Managing State & Returning State Values (10:51)
-
StartExposing Nested Functions From The Custom Hook (6:03)
-
StartUsing A Custom Hook in Multiple Components (4:25)
-
StartCreating Flexible Custom Hooks (4:59)
Working with Forms & User Input
Available in
days
days
after you enroll
-
StartModule Introduction & Starting Project (2:04)
-
StartWhat Are Forms & What's Tricky About Them? (3:59)
-
StartHandling Form Submission (11:31)
-
StartManaging & Getting User Input via State & Generic Handlers (11:12)
-
StartGetting User Input via Refs (4:35)
-
StartGetting Values via FormData & Native Browser APIs (9:03)
-
StartResetting Forms (4:38)
-
StartValidating Input on Every Keystroke via State (6:58)
-
StartValidating Input Upon Lost Focus (Blur) (7:53)
-
StartValidating Input Upon Form Submission (7:54)
-
StartValidating Input via Built-in Validation Props (4:59)
-
StartMixing Custom & Built-in Validation Logic (4:28)
-
StartBuilding & Using a Reusable Input Component (10:06)
-
StartOutsourcing Validation Logic (3:22)
-
StartCreating a Custom useInput Hook (15:11)
-
StartUsing Third-Party Form Libraries (1:31)
Handling Forms via Form Actions
Available in
days
days
after you enroll
-
StartWhat are Form Actions? (6:47)
-
StartModule Introduction (2:48)
-
StartAdding Validation Checks (7:50)
-
StartManaging Form-dependent State with useActionState() (12:21)
-
StartUsing User Input (10:04)
-
StartMoving the Action Function out of the Component (2:34)
-
StartA Demo App: Introduction (3:26)
-
StartHandling Form Submission (9:40)
-
StartWorking with Asynchronous Form Actions (6:23)
-
StartUpdating the UI with useFormStatus() (5:06)
-
StartRegistering Multiple Form Actions (4:32)
-
StartSending an HTTP Request via a Form Action (5:26)
-
StartUsing the "pending" State from useActionState() (3:47)
-
StartAdding Optimistic Updating (9:47)
-
StartModule Summary (2:57)
Practice Project: Building a Food Order App
Available in
days
days
after you enroll
-
StartModule Introduction & Starting Project (4:14)
-
StartPlanning the App & Adding a First Component (6:40)
-
StartFetching Meals Data (GET HTTP Request) (12:00)
-
StartAdding a "MealItem" Component (7:39)
-
StartFormatting & Outputting Numbers as Currency (2:51)
-
StartCreating a Configurable & Flexible Custom Button Component (8:02)
-
StartGetting Started with Cart Context & Reducer (20:59)
-
StartFinishing & Using the Cart Context & Reducer (17:21)
-
StartAdding a Reusable Modal Component with useEffect (7:29)
-
StartOpening the Cart in the Modal via a New Context (19:32)
-
StartWorking on the Cart Items (8:01)
-
StartAdding a Custom Input Component & Managing Modal Visibility (19:31)
-
StartHandling Form Submission & Validation (6:50)
-
StartSending a POST Request with Order Data (7:35)
-
StartAdding a Custom HTTP Hook & Avoiding Common Errors (26:23)
-
StartHandling HTTP Loading & Error States (3:12)
-
StartFinishing Touches (14:08)
-
StartMigrating To Form Actions (3:13)
-
StartManaging Form Status with Form Actions (5:08)
Diving into Redux (An Alternative To The Context API)
Available in
days
days
after you enroll
-
StartModule Introduction (1:05)
-
StartAnother Look At State In React Apps (5:14)
-
StartRedux vs React Context (6:19)
-
StartHow Redux Works (5:48)
-
StartImportant: createStore() is (Not) Deprecated
-
StartExploring The Core Redux Concepts (15:14)
-
StartMore Redux Basics (3:04)
-
StartPreparing a new Project (1:59)
-
StartCreating a Redux Store for React (4:54)
-
StartProviding the Store (3:13)
-
StartUsing Redux Data in React Components (5:08)
-
StartDispatching Actions From Inside Components (3:33)
-
StartRedux with Class-based Components (10:20)
-
StartAttaching Payloads to Actions (4:15)
-
StartWorking with Multiple State Properties (6:19)
-
StartHow To Work With Redux State Correctly (5:07)
-
StartRedux Challenges & Introducing Redux Toolkit (5:27)
-
StartAdding State Slices (8:11)
-
StartConnecting Redux Toolkit State (4:47)
-
StartMigrating Everything To Redux Toolkit (6:19)
-
StartWorking with Multiple Slices (11:50)
-
StartReading & Dispatching From A New Slice (6:56)
-
StartSplitting Our Code (5:03)
-
StartSummary (3:53)
-
StartModule Resources
Advanced Redux
Available in
days
days
after you enroll
-
StartModule Introduction (0:39)
-
StartRedux & Side Effects (and Asynchronous Code) (3:27)
-
StartRefresher / Practice: Part 1/2 (20:12)
-
StartRefresher / Practice: Part 2/2 (18:00)
-
StartRedux & Async Code (4:09)
-
StartFrontend Code vs Backend Code (5:40)
-
StartWhere To Put Our Logic (8:59)
-
StartUsing useEffect with Redux (6:00)
-
StartA Problem with useEffect()
-
StartHandling Http States & Feedback with Redux (12:49)
-
StartUsing an Action Creator Thunk (12:07)
-
StartGetting Started with Fetching Data (8:39)
-
StartFinalizing the Fetching Logic (5:16)
-
StartExploring the Redux DevTools (5:37)
-
StartSummary (1:53)
-
StartModule Resources
Building a Multi-Page SPA with React Router
Available in
days
days
after you enroll
-
StartModule Introduction (3:21)
-
StartRouting: Multiple Pages in Single-Page Applications (3:15)
-
StartProject Setup & Installing React Router (3:06)
-
StartDefining Routes (7:42)
-
StartAdding a Second Route (2:07)
-
StartExploring an Alternative Way of Defining Routes (3:01)
-
StartNavigating between Pages with Links (4:36)
-
StartLayouts & Nested Routes (8:24)
-
StartShowing Error Pages with errorElement (3:58)
-
StartWorking with Navigation Links (NavLink) (6:37)
-
StartNavigating Programmatically (2:41)
-
StartDefining & Using Dynamic Routes (7:44)
-
StartAdding Links for Dynamic Routes (3:22)
-
StartUnderstanding Relative & Absolute Paths (10:38)
-
StartWorking with Index Routes (1:56)
-
StartOnwards to a new Project Setup (3:16)
-
StartTime to Practice: Problem (1:25)
-
StartTime to Practice: Solution (23:16)
-
StartData Fetching with a loader() (7:35)
-
StartUsing Data From A Loader In The Route Component (2:51)
-
StartMore loader() Data Usage (3:17)
-
StartWhere Should loader() Code Be Stored? (2:18)
-
StartWhen Are loader() Functions Executed? (2:48)
-
StartReflecting The Current Navigation State in the UI (2:53)
-
StartReturning Responses in loader()s (4:01)
-
StartWhich Kind Of Code Goes Into loader()s? (1:14)
-
StartError Handling with Custom Errors (4:56)
-
StartExtracting Error Data & Throwing Responses (6:24)
-
StartThe json() Utility Function (2:07)
-
StartDynamic Routes & loader()s (7:32)
-
StartThe useRouteLoaderData() Hook & Accessing Data From Other Routes (7:41)
-
StartPlanning Data Submission (2:22)
-
StartWorking with action() Functions (9:08)
-
StartSubmitting Data Programmatically (9:06)
-
StartUpdating the UI State Based on the Submission Status (4:02)
-
StartValidating User Input & Outputting Validation Errors (6:57)
-
StartReusing Actions via Request Methods (7:55)
-
StartBehind-the-Scenes Work with useFetcher() (9:11)
-
StartDeferring Data Fetching with defer() (9:07)
-
Startjson() and defer() with React Router v7
-
StartControlling Which Data Should Be Deferred (7:22)
-
StartModule Summary (2:57)
Adding Authentication To React Apps
Available in
days
days
after you enroll
-
StartModule Introduction (1:10)
-
StartHow Authentication Works (9:08)
-
StartProject Setup & Route Setup (3:46)
-
StartWorking with Query Parameters (7:35)
-
StartImplementing the Auth Action (11:40)
-
StartValidating User Input & Outputting Validation Errors (4:18)
-
StartAdding User Login (1:55)
-
StartAttaching Auth Tokens to Outgoing Requests (6:32)
-
StartAdding User Logout (4:21)
-
StartUpdating the UI Based on Auth Status (6:05)
-
StartAdding Route Protection (2:46)
-
StartAdding Automatic Logout (5:10)
-
StartManaging 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
-
StartModule Introduction (1:46)
-
StartProject Setup & Overview (4:08)
-
StartReact Query: What & Why? (5:59)
-
StartInstalling & Using Tanstack Query - And Seeing Why It's Great! (16:32)
-
StartUnderstanding & Configuring Query Behaviors - Cache & Stale Data (7:43)
-
StartDynamic Query Functions & Query Keys (13:05)
-
StartThe Query Configuration Object & Aborting Requests (5:27)
-
StartEnabled & Disabled Queries (6:55)
-
StartChanging Data with Mutations (11:29)
-
StartFetching More Data & Testing the Mutation (6:39)
-
StartActing on Mutation Success & Invalidating Queries (8:50)
-
StartA Challenge! The Problem (2:14)
-
StartA Challenge! The Solution (16:37)
-
StartDisabling Automatic Refetching After Invalidations (2:42)
-
StartEnhancing the Demo App & Repeating Mutation Concepts (9:18)
-
StartReact Query Advantages In Action (8:57)
-
StartUpdating Data with Mutations (4:49)
-
StartOptimistic Updating (13:06)
-
StartUsing the Query Key As Query Function Input (7:47)
-
StartReact Query & React Router (20:26)
A (Pretty Deep Dive) Introduction to NextJS - App Router
Available in
days
days
after you enroll
-
StartModule Introduction (2:01)
-
StartCreating a NextJS Project (4:17)
-
StartUnderstanding File-based Routing & React Server Components (2:45)
-
StartAdding Another Route via the Filesystem (3:06)
-
StartNavigating Between Pages (4:12)
-
StartWorking with Pages & Layouts (3:22)
-
StartReserved File Names, Custom Components & How To Organize A NextJS Project (6:31)
-
StartReserved Filenames
-
StartConfiguring Dynamic Routes & Using Route Parameters (6:17)
-
StartOnwards to the Main Project: The Foodies App (1:24)
-
StartExercise: Your Task (2:03)
-
StartExercise: Solution (8:19)
-
StartRevisiting The Concept Of Layouts (3:50)
-
StartAdding a Custom Component To A Layout (5:58)
-
StartStyling NextJS Project: Your Options & Using CSS Modules (6:00)
-
StartOptimizing Images with the NextJS Image Component (4:57)
-
StartUsing More Custom Components (3:48)
-
StartPopulating The Starting Page Content (4:18)
-
StartPreparing an Image Slideshow (3:25)
-
StartReact Server Components vs Client Components - When To Use What (8:15)
-
StartUsing Client Components Efficiently (11:07)
-
StartOutputting Meals Data & Images With Unknown Dimensions (10:31)
-
StartSetting Up A SQLite Database (3:11)
-
StartFetching Data By Leveraging NextJS & Fullstack Capabilities (7:17)
-
StartAdding A Loading Page (4:00)
-
StartUsing Suspense & Streamed Responses For Granular Loading State Management (5:54)
-
StartHandling Errors (5:22)
-
StartHandling "Not Found" States (1:57)
-
StartLoading & Rendering Meal Details via Dynamic Routes & Route Parameters (11:04)
-
StartThrowing Not Found Errors For Individual Meals (2:03)
-
StartGetting Started with the "Share Meal" Form (1:53)
-
StartGetting Started with a Custom Image Picker Input Component (8:28)
-
StartAdding an Image Preview to the Picker (6:00)
-
StartImproving the Image Picker Component
-
StartIntroducing & Using Server Actions for Handling Form Submissions (9:02)
-
StartStoring Server Actions in Separate Files (3:45)
-
StartCreating a Slug & Sanitizing User Input for XSS Protection (3:20)
-
StartStoring Uploaded Images & Storing Data in the Database (12:56)
-
StartManaging the Form Submission Status with useFormStatus (5:30)
-
StartAdding Server-Side Input Validation (5:54)
-
StartWorking with Server Action Responses & useFormState (8:05)
-
StartBuilding For Production & Understanding NextJS Caching (6:06)
-
StartTriggering Cache Revalidations (3:57)
-
StartDon't Store Files Locally On The Filesystem! (2:13)
-
StartBonus: Storing Uploaded Images In The Cloud (AWS S3)
-
StartAdding Static Metadata (3:47)
-
StartAdding Dynamic Metadata (2:20)
-
StartModule Summary (4:25)
A (Pretty Deep Dive) Introduction to Next.js - Pages Router
Available in
days
days
after you enroll
-
StartAbout the NextJS Pages Router (2:55)
-
StartCreating a NextJS Project (2:07)
-
StartAnalyzing the Created Project (2:52)
-
StartAdding First Pages (6:05)
-
StartAdding Nested Paths & Pages (Nested Routes) (3:47)
-
StartCreating Dynamic Pages (with Parameters) (3:36)
-
StartExtracting Dynamic Parameter Values (4:07)
-
StartLinking Between Pages (7:13)
-
StartOnwards to a bigger Project! (3:32)
-
StartPreparing the Project Pages (3:42)
-
StartOutputting a List of Meetups (5:03)
-
StartAdding the New Meetup Form (3:54)
-
StartThe "_app.js" File & Layout Wrapper (6:17)
-
StartUsing Programmatic (Imperative) Navigation (3:47)
-
StartAdding Custom Components & CSS Modules (10:00)
-
StartHow Pre-rendering Works & Which Problem We Face (5:52)
-
StartData Fetching for Static Pages (8:56)
-
StartMore on Static Site Generation (SSG) (5:44)
-
StartExploring Server-side Rendering (SSR) with "getServerSideProps" (6:27)
-
StartWorking with Params for SSG Data Fetching (5:14)
-
StartPreparing Paths with "getStaticPaths" & Working With Fallback Pages (7:16)
-
StartIntroducing API Routes (6:20)
-
StartWorking with MongoDB (9:32)
-
StartSending Http Requests To Our API Routes (6:49)
-
StartGetting Data From The Database (7:09)
-
StartGetting Meetup Details Data & Preparing Pages (9:41)
-
StartAdding "head" Metadata (9:19)
-
StartDeploying Next.js Projects (12:26)
-
StartUsing Fallback Pages & Re-deploying (4:13)
-
StartSummary (2:15)
-
StartModule Resources
React Server Components (RSC) & Server Actions - A Closer Look
Available in
days
days
after you enroll
-
StartModule Introduction (1:48)
-
StartWhy We Need A Special Project Setup (4:14)
-
StartUnderstanding React Server Components (7:16)
-
StartChanging Server to Client Components (5:46)
-
StartCombining Server and Client Components (5:52)
-
StartFetching Data with RSCs (3:39)
-
StartSubmitting Data with Server Actions (7:06)
-
StartUsing the use() Hook for Promises & Data Fetching (7:19)
-
StartThe use() Hook In Action (5:31)
-
StartHandling Errors (3:48)
-
StartTheory Wrap Up (1:03)
Animating React Apps with Framer Motion
Available in
days
days
after you enroll
-
StartModule Introduction (3:05)
-
StartProject Setup & Overview (1:42)
-
StartAnimating with CSS Transitions (7:41)
-
StartAnimating with CSS Animations (5:38)
-
StartIntroducing Framer Motion (3:48)
-
StartFramer Motion Basics & Fundamentals (8:29)
-
StartAnimating Between Conditional Values (4:13)
-
StartAdding Entry Animations (4:28)
-
StartAnimating Element Disappearances / Removal (3:51)
-
StartMaking Elements "Pop" With Hover Animations (4:13)
-
StartReusing Animation States (3:28)
-
StartNested Animations & Variants (7:46)
-
StartAnimating Staggered Lists (4:29)
-
StartAnimating Colors & Working with Keyframes (4:04)
-
StartImperative Animations (7:28)
-
StartAnimating Layout Changes (3:34)
-
StartOrchestrating Multi-Element Animations (10:05)
-
StartCombining Animations With Layout Animations (3:55)
-
StartAnimating Shared Elements (4:15)
-
StartRe-triggering Animations via Keys (4:52)
-
StartScroll-based Animations (15:44)
React Patterns & Best Practices
Available in
days
days
after you enroll
-
StartModule Introduction (0:55)
-
StartProject Overview (0:50)
-
StartIntroducing Compound Components (11:04)
-
StartManaging Multi-Component State with the Context API (10:57)
-
StartGrouping Compound Components (6:29)
-
StartAdding Extra Components For Reusability & Configurability (8:36)
-
StartSharing Cross-Component State When Working With Compound Components (6:07)
-
StartIntroducing & Using Render Props (6:14)
-
StartAdding Search To A React App (4:18)
-
StartImplementing a Search Functionality With Help Of Render Props (4:18)
-
StartHandling Keys Dynamically (2:42)
-
StartWorking with Debouncing (7:10)
Testing React Apps (Unit Tests)
Available in
days
days
after you enroll
-
StartModule Introduction (1:23)
-
StartWhat & Why? (3:24)
-
StartUnderstanding Different Kinds Of Tests (4:04)
-
StartWhat To Test & How To Test (1:29)
-
StartUnderstanding the Technical Setup & Involved Tools (2:39)
-
StartRunning a First Test (7:16)
-
StartWriting Our First Test (10:14)
-
StartGrouping Tests Together With Test Suites (2:14)
-
StartTesting User Interaction & State (14:00)
-
StartTesting Connected Components (3:19)
-
StartTesting Asynchronous Code (9:11)
-
StartWorking With Mocks (8:30)
-
StartSummary & Further Resources (3:47)
-
StartModule Resources
React & TypeScript
Available in
days
days
after you enroll
-
StartModule Introduction (1:26)
-
StartWhat & Why? (6:34)
-
StartInstalling & Using TypeScript (6:38)
-
StartExploring the Base Types (3:55)
-
StartWorking with Array & Object Types (5:33)
-
StartUnderstanding Type Inference (2:47)
-
StartUsing Union Types (2:48)
-
StartUnderstanding Type Aliases (2:42)
-
StartFunctions & Function Types (5:19)
-
StartDiving Into Generics (8:01)
-
StartA Closer Look At Generics
-
StartCreating a React + TypeScript Project (8:34)
-
StartWorking with Components & TypeScript (5:41)
-
StartWorking with Props & TypeScript (14:20)
-
StartAdding a Data Model (9:09)
-
StartTime to Practice: Exercise Time! (7:02)
-
StartForm Submissions In TypeScript Projects (5:21)
-
StartWorking with refs & useRef (10:56)
-
StartWorking with "Function Props" (7:26)
-
StartManaging State & TypeScript (5:13)
-
StartAdding Styling (2:19)
-
StartTime to Practice: Removing a Todo (9:27)
-
StartThe Context API & TypeScript (13:55)
-
StartSummary (2:18)
-
StartBonus: Exploring tsconfig.json (5:46)
-
StartModule Resources
Optional: React Hooks Introduction & Summary
Available in
days
days
after you enroll
-
StartModule Introduction (2:10)
-
StartWhat Are React Hooks? (4:56)
-
StartThe Starting Project (4:51)
-
StartGetting Started with useState() (9:20)
-
StartMore on useState() & State Updating (11:54)
-
StartArray Destructuring (2:34)
-
StartMultiple States (3:47)
-
StartRules of Hooks (2:20)
-
StartPassing State Data Across Components (7:56)
-
StartTime to Practice: Hooks Basics - Problem (1:03)
-
StartTime to Practice: Hooks Basics - Solution (2:55)
-
StartSending Http Requests (7:16)
-
StartuseEffect() & Loading Data (8:06)
-
StartUnderstanding useEffect() Dependencies (2:21)
-
StartMore on useEffect() (9:37)
-
StartWhat's useCallback()? (5:28)
-
StartWorking with Refs & useRef() (5:21)
-
StartCleaning Up with useEffect() (3:20)
-
StartDeleting Ingredients (2:28)
-
StartLoading Errors & State Batching (8:48)
-
StartMore on State Batching & State Updates
-
StartUnderstanding useReducer() (9:43)
-
StartUsing useReducer() for the Http State (10:40)
-
StartWorking with useContext() (8:27)
-
StartPerformance Optimizations with useMemo() (10:30)
-
StartGetting Started with Custom Hooks (13:45)
-
StartSharing Data Between Custom Hooks & Components (14:58)
-
StartUsing the Custom Hook (8:11)
-
StartWrap Up (3:05)
-
StartModule Resources
Optional: React Summary & Core Feature Walkthrough
Available in
days
days
after you enroll
-
StartModule Introduction (1:08)
-
StartWhat Is React & Why Would You Use It? (5:37)
-
StartReact Projects - Requirements (2:09)
-
StartCreating React Projects (3:27)
-
StartOur Starting Project (3:28)
-
StartUnderstanding How React Works (7:46)
-
StartBuilding A First Custom Component (11:15)
-
StartOutputting Dynamic Values (5:03)
-
StartReusing Components (6:00)
-
StartPassing Data to Components with Props (6:15)
-
StartCSS Styling & CSS Modules (10:07)
-
StartExercise & Another Component (6:31)
-
StartPreparing the App For State Management (3:46)
-
StartAdding Event Listeners (7:52)
-
StartWorking with State (10:00)
-
StartLifting State Up (9:08)
-
StartThe Special "children" Prop (7:21)
-
StartState & Conditional Content (8:59)
-
StartAdding a Shared Header & More State Management (7:51)
-
StartAdding Form Buttons (3:34)
-
StartHandling Form Submission (6:18)
-
StartUpdating State Based On Previous State (5:30)
-
StartOutputting List Data (6:39)
-
StartAdding a Backend to the React SPA (6:10)
-
StartSending a POST HTTP Request (4:12)
-
StartHandling Side Effects with useEffect() (9:06)
-
StartHandle Loading State (4:23)
-
StartUnderstanding & Adding Routing (3:55)
-
StartAdding Routes (5:36)
-
StartWorking with Layout Routes (4:08)
-
StartRefactoring Route Components & More Nesting (5:35)
-
StartLinking & Navigating (8:09)
-
StartData Fetching via loader()s (9:07)
-
StartSubmitting Data with action()s (11:08)
-
StartDynamic Routes (8:41)
-
StartModule Summary (1:25)
Course Roundup
Available in
days
days
after you enroll
Course Prerequisites
Basic JavaScript knowledge is required
NO React knowledge is required at all
All pre-requisites are covered by courses in our "Academind Pro" Membership.
Don't take my word for it - here's what other students are saying.
Eric Fingal
Very well structured, to the point presentation. Covers all the questions that pop into my mind while I'm watching the videos. Stays on track and does not waste time with unnecessary talk.
Onur Gümüş
Thanks to Max I loved React! Max is a very experienced web developer. He is teaching the React most detailed way possible. I'm learning so many tips and tricks from him besides React. You should definitely try out this course.
Daniel Wang
A comprehensible learning path matters in a good online course. This course is the best example. No detail is missing, nothing is superfluous in the learning path. Features are excellently explained. Top!
30 Day Money Back Guarantee - No Questions Asked!
Our courses helped thousands of students learn something new and improve their lives.
We're so convinced by our course quality that we guarantee your success and provide a full refund within the first 30 days if you're not happy with the course.
Your Instructor
Maximilian Schwarzmüller
As a self-taught professional I really know the hard parts and the difficult topics when learning new or improving on already-known languages. This background and experience enable me to focus on the most relevant key concepts and topics. My track record of many 5-star rated courses, more than 2,500,000 students worldwide as well as a successful YouTube channel with 900.000 subscribers is the best proof for that.
The most rewarding experience for me is to see how people find new, better jobs, build awesome web applications, work on amazing projects or simply enjoy their hobby with the help of my content.
That's why, together with Manuel Lorenz, I founded Academind to offer the best possible learning experience and to share the pleasure of learning with our students.
Frequently Asked Questions
When does the course start and finish?
The course starts now and never ends! It is a completely self-paced online course - you decide when you start and when you finish.
How long do I have access to the course?
How does lifetime access sound? After enrolling, you have unlimited access to this course for as long as you like - across any and all devices you own.
What if I am unhappy with the course?
We would never want you to be unhappy! If you are unsatisfied with your purchase, contact us in the first 30 days and we will give you a full refund.
Join 2482 happy students!
Single-Course License
Full access to "React - The Complete Guide (incl Hooks, React Router, Redux)"
$99
Access to this course only.
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
Cancel Anytime!
This is a recurring payment, charged automatically on a monthly basis. You can cancel anytime from inside your user profile to avoid being charged again once your billing cycle ends. For more information, please contact Academind.