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
-
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)
-
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
-
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)
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
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
Join 2422 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.
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.