Web dev learners
You already know the basics of web development, but you want to build reactive, fast web apps that feel modern. This course gives you a structured route from “I’ve seen React” to “I can build with it.”
React - The Complete Guide (incl Hooks, React Router, Redux)
Learn React.js from scratch! Learn Reactjs, Redux, React Routing, Animations, NextJS & more!
Course Overview
About This Course
You can write JavaScript, HTML, and CSS—but React still feels like a wall: components everywhere, state that “mysteriously” changes, and apps that get messy the moment you add routing, forms, or authentication. If you’ve tried piecing it together from snippets, you’ve probably ended up with more questions than confidence.
This course gives you a clear, step-by-step path with lots of demos, assignments, and exercises, so you’re not just watching—you’re building and debugging as you go. You can also choose between a full “complete” path and a faster “summary” path, depending on how much time you have.
By the end, you’ll be able to create modern React applications that feel responsive and structured, connect them to backends, and ship them with confidence. You’ll know how to make your UI interactive, handle real user input, and grow an app without it turning into a fragile tangle of code.
What You'll Learn
You’ll cover React’s core UI patterns plus the exact add-ons you need for real apps: state, routing, data fetching, authentication, testing, and a fullstack workflow with Next.js 14+.
Build component-driven UIs
Create React components that pass data via props, bind dynamic values, and respond to user events. You’ll be able to assemble interactive interfaces using lists and conditional rendering without losing clarity.
Master Hooks workflows
Use built-in React Hooks in-depth and write custom Hooks to reuse logic cleanly. You’ll also handle side effects correctly and understand when Hooks run so your app stays predictable.
Handle data and HTTP
Connect React apps to a backend via HTTP requests and manage loading and response states. You’ll know how to debug issues and keep the UI responsive while data is in flight.
Manage complex app state
Choose the right approach for shared state using React’s Context API or React Redux with Redux Toolkit. You’ll structure state so larger apps stay maintainable as features expand.
Add routing and auth
Build multi-page experiences with React Router, including route-related data fetching. Implement user authentication so parts of your app can react to logged-in vs. logged-out users.
Ship with Next.js
Build fullstack React apps with Next.js 14+, including an understanding of React Server Components. You’ll also deploy React apps and add unit tests to protect key behavior.
Ready to get started?
See enrollment optionsPrerequisites
JavaScript, HTML, and CSS fundamentals are required.
ES6+ JavaScript knowledge is helpful but not mandatory.
No prior React (or other JS framework) experience is needed.
Who Is This Course For?
Busy professionals
You want React skills without guessing what to study next or wasting time on scattered resources. The complete vs. summary paths let you match the course to your schedule.
Career-focused builders
You’re trying to level up your portfolio and feel confident applying for React roles or using React in your own projects. You want practice-heavy learning that results in real, finished applications.
Curriculum Overview
Start NowPreview the structure and pacing of this course before you begin.
Getting Started40m
- 01Welcome to the Course1:08 min
- 02What Is React? And Why Would You Use It?2:58 min
- 03ReactJS vs Vanilla JavaScript10:57 min
- 04Editing Our First React App4:22 min
- 05About the Course2:55 min
- 06One Course, Two Paths3:08 min
- 07How To Get The Most Out Of This Course5:24 min
- 08Join Our Online Learning Community0:00 min
- 09How To Create New React Projects7:10 min
- 10Why Do We Need A Special Project Setup?2:51 min
JavaScript Refresher1h 36m
- 01Module Introduction1:49 min
- 02Starting Project1:00 min
- 03Adding JavaScript To A Page & How React Projects Differ6:57 min
- 04React Projects Use a Build Process8:04 min
- 05"import" & "export"12:04 min
- 06Revisiting Variables & Values7:01 min
- 07Revisiting Operators2:33 min
- 08Revisiting Functions & Parameters8:14 min
- 09Arrow Functions2:11 min
- 10Revisiting Objects & Classes6:07 min
- 11Arrays & Array Methods like map()11:10 min
- 12Destructuring5:16 min
- 13The Spread Operator3:13 min
- 14Revisiting Control Structures5:28 min
- 15Manipulating the DOM - Not With React!0:52 min
- 16Using Functions as Values7:22 min
- 17Defining Functions Inside Of Functions1:55 min
- 18Reference vs Primitive Values4:45 min
- 19Next-Gen JavaScript - Summary0:00 min
- 20JS Array Functions0:00 min
React Essentials - Components, JSX, Props, State & More2h 24m
- 01Module Introduction1:48 min
- 02It's All About Components! [Core Concept]6:07 min
- 03Setting Up The Starting Project3:06 min
- 04JSX & React Components [Core Concept]4:42 min
- 05Creating & Using a First Custom Component5:52 min
- 06A Closer Look: Components & File Extensions0:00 min
- 07How React Handles Components & How It Builds A "Component Tree" [Core Concept]8:21 min
- 08Quiz: Components & JSX0:00 min
- 09Using & Outputting Dynamic Values [Core Concept]6:01 min
- 10Setting HTML Attributes Dynamically & Loading Image Files4:42 min
- 11Making Components Reusable with Props [Core Concept]9:06 min
- 12Alternative Props Syntaxes6:44 min
- 13More Prop Syntaxes0:00 min
- 14Quiz: Dynamic Values & Props0:00 min
- 15Best Practice: Storing Components in Files & Using a Good Project Structure6:32 min
- 16Storing Component Style Files Next To Components6:15 min
- 17Component Composition: The special "children" Prop [Core Concept]8:06 min
- 18Reacting to Events [Core Concept]6:45 min
- 19Passing Functions as Values to Props6:43 min
- 20Passing Custom Arguments to Event Functions5:36 min
- 21Quiz: Best Practices & Event Handling0:00 min
- 22How NOT to Update the UI - A Look Behind The Scenes of React [Core Concept]5:30 min
- 23Managing State & Using Hooks [Core Concept]10:28 min
- 24Deriving & Outputting Data Based on State4:50 min
- 25Quiz: State & Computed Values0:00 min
- 26Rendering Content Conditionally8:03 min
- 27CSS Styling & Dynamic Styling5:12 min
- 28Outputting List Data Dynamically7:40 min
- 29Quiz: Conditional Content & Dynamic Lists0:00 min
- 30Module Summary6:05 min
React Essentials - Deep Dive3h 15m
- 01Module Introduction1:26 min
- 02You Don't Have To Use JSX!4:38 min
- 03Working with Fragments5:40 min
- 04When Should You Split Components?3:14 min
- 05Splitting Components By Feature & State6:54 min
- 06Problem: Props Are Not Forwarded To Inner Elements6:44 min
- 07Forwarding Props To Wrapped Elements3:46 min
- 08Working with Multiple JSX Slots8:42 min
- 09Setting Component Types Dynamically8:44 min
- 10Setting Default Prop Values2:09 min
- 11Onwards To The Next Project & Advanced Concepts2:17 min
- 12Closer Look: public/ vs assets/ for Image Storage0:00 min
- 13Not All Content Must Go Into Components5:10 min
- 14New Project: First Steps Towards Our Tic-Tac-Toe Game3:58 min
- 15Concept Repetition: Splitting Components & Building Reusable Components4:14 min
- 16Concept Repetition: Working with State7:57 min
- 17Component Instances Work In Isolation!2:03 min
- 18Conditional Content & A Suboptimal Way Of Updating State4:54 min
- 19Best Practice: Updating State Based On Old State Correctly7:04 min
- 20User Input & Two-Way-Binding7:42 min
- 21Rendering Multi-Dimensional Lists7:41 min
- 22Best Practice: Updating Object State Immutably8:44 min
- 23Lifting State Up [Core Concept]9:39 min
- 24Avoid Intersecting States!5:22 min
- 25Prefer Computed Values & Avoid Unnecessary State Management6:17 min
- 26Deriving State From Props7:22 min
- 27Sharing State Across Components4:12 min
- 28Reducing State Management & Identifying Unnecessary State5:52 min
- 29Disabling Buttons Conditionally2:37 min
- 30Outsourcing Data Into A Separate File4:28 min
- 31Lifting Computed Values Up5:19 min
- 32Deriving Computed Values From Other Computed Values5:29 min
- 33Tic-Tac-Toe Game: The "Game Over" Screen & Checking for a Draw5:40 min
- 34Why Immutability Matters - Always!5:28 min
- 35When NOT To Lift State Up5:20 min
- 36An Alternative To Lifting State Up3:16 min
- 37Final Polishing & Improving Components5:15 min
React Essentials - Practice Project53m
- 01Module Introduction & A Challenge For You!5:09 min
- 02Adding a Header Component4:48 min
- 03Getting Started with a User Input Component5:07 min
- 04Handling Events & Using Two-Way-Binding10:28 min
- 05Lifting State Up8:59 min
- 06Computing Values & Properly Handling Number Values5:41 min
- 07Outputting Results in a List & Deriving More Values9:02 min
- 08Outputting Content Conditionally4:24 min
Styling React Components1h 54m
- 01Module Introduction & Starting Project3:57 min
- 02Splitting CSS Code Across Multiple Files3:22 min
- 03Styling React Apps with Vanilla CSS - Pros & Cons2:32 min
- 04Vanilla CSS Styles Are NOT Scoped To Components!3:31 min
- 05Styling React Apps with Inline Styles6:24 min
- 06Dynamic & Conditional Inline Styles3:27 min
- 07Dynamic & Conditional Styling with CSS Files & CSS Classes5:41 min
- 08Scoping CSS Rules with CSS Modules9:51 min
- 09Introducing "Styled Components" (Third-party Package)8:03 min
- 10Creating Flexible Components with Styled Components4:47 min
- 11Dynamic & Conditional Styling with Styled Components11:07 min
- 12Styled Components: Pseudo Selectors, Nested Rules & Media Queries7:15 min
- 13Creating Reusable Components & Component Combinations9:53 min
- 14Introducing Tailwind CSS For React App Styling11:26 min
- 15Adding & Using Tailwind CSS In A React Project3:39 min
- 16Tailwind: Media Queries & Pseudo Selectors5:22 min
- 17Dynamic & Conditional Styling with Tailwind5:50 min
- 18Migrating The Demo App to Tailwind CSS4:15 min
- 19Tailwind CSS: Pros & Cons4:26 min
Debugging React Apps28m
- 01Module Introduction1:26 min
- 02The Starting Project1:17 min
- 03Understanding React Error Messages8:31 min
- 04Using the Browser Debugger & Breakpoints7:23 min
- 05Understanding React's "Strict Mode"6:19 min
- 06Using the React DevTools (Browser Extension)3:57 min
Working with Refs & Portals1h 24m
- 01Module Introduction & Starting Project3:19 min
- 02Repetition: Managing User Input with State (Two-Way-Binding)5:17 min
- 03Introducing Refs: Connecting & Accessing HTML Elements via Refs6:04 min
- 04Manipulating the DOM via Refs2:14 min
- 05Refs vs State Values4:45 min
- 06Adding Challenges to the Demo Project4:49 min
- 07Setting Timers & Managing State4:56 min
- 08Using Refs for More Than "DOM Element Connections"8:30 min
- 09Adding a Modal Component6:40 min
- 10Forwarding Refs to Custom Components6:28 min
- 11Exposing Component APIs via the useImperativeHandle Hook8:23 min
- 12More Examples: When To Use Refs & State8:50 min
- 13Sharing State Across Components4:58 min
- 14Enhancing the Demo App "Result Modal"2:12 min
- 15Closing the Modal via the ESC (Escape) Key0:00 min
- 16Introducing & Understanding "Portals"6:55 min
And 27 more sections in the full course.
Ready to Get Started?
Choose the option that works best for you.
Single Course
React - The Complete Guide (incl Hooks, React Router, Redux)
One Payment. Lifetime Access.
$99one-time
- One-time payment
- All future updates for this course
- Downloadable resources & code
- Certificate of completion
- Hands-on exercises & projects
- Self-paced learning
- English captions on all videos
- Lifetime access
Most Popular
All-Access Membership
Everything we teach. One subscription.
$25/mo
$4,729+ worth of courses
- Full access to all courses
- All future courses included
- Downloadable resources & code
- Certificates of completion
- Hands-on exercises & projects
- Self-paced learning
- English captions on all videos
- Cancel anytime