[LEGACY] React - The Complete Guide (incl Hooks, React Router, Redux)
Dive in and learn React.js from scratch! Learn Reactjs, Hooks, Redux, React Routing, Animations, Next.js and way more!
Watch Promo Enroll in Course
What's this course about?
Learn React or dive deeper into it. Learn the theory, solve assignments, practice in demo projects and build one big application which is improved throughout the course: The Burger Builder!
More details please!
JavaScript is the major driver of modern web applications since it's the only programming language which runs in the browser and hence allows you to provide highly reactive apps. You'll be able to achieve mobile-app like user experiences in the web.
But using JavaScript can be challenging - it quickly becomes overwhelming to create a nice web app with vanilla JavaScript and jQuery only.
React to the rescue!
React is all about components - basically custom HTML elements - with which you can quickly build amazing and powerful web apps. Just build a component once, configure it to your needs, dynamically pass data into it (or listen to your own events!) and re-use it as often as needed.
Need to display a list of users in your app? It's as simple as creating a "User" component and outputting it as often as needed.
This course will start at the very basics and explain what exactly React is and how you may use it (and for which kind of apps). Thereafter, we'll go all the way from basic to advanced. We'll not just scratch the surface but dive deeply into React as well as popular libraries like react-router and Redux.
By the end of the course, you can build amazing React (single page) applications!
A detailed list with the course content can be found below.
Who's teaching you in this course?
My name is Maximilian Schwarzmüller, I'm a freelance web developer and worked with React in many projects. I'm also a 5-star rated instructor here on Udemy. I cover React's most popular alternatives - Vue and Angular - as well as many other topics. I know what I'm talking about and I know where the pain points can be found.
It's my goal to get you started with React as quick as possible and ensure your success. But I don't just focus on students getting started. I want everyone to benefit from my courses, that's why we'll dive deeply into React and why I made sure to also share knowledge that's helpful to advanced React developers.
Is this course for you?
This course is for you if ...
- ...you're just getting started with frontend/ JavaScript development and only got the JS basics set (no prior React or other framework experience is required!)
- ...you're experienced with Angular or Vue but want to dive into React
- ...know the React basics but want to refresh them and/ or dive deeper
- ...already worked quite a bit with React but want to dive deeper and see it all come together in a bigger app
What's inside the course?
- The "What", "Why" and "How"
- React Basics (Base features, syntax and concepts)
- Managing state with class-based components and React Hooks
- How to output lists and conditional content
- Styling of React components
- A deep dive into the internals of React and advanced component features
- How to access Http content from within React apps (AJAX)
- Redux, Redux, Redux ... from basics to advanced!
- Forms and form validation in React apps
- Authentication
- An introduction to unit testing
- An introduction to Next.js
- React app deployment instructions
- ...and much more!
45+
hours
500+
lessons
Course Curriculum
This Course Got Updated!
Available in
days
days
after you enroll
Getting Started
Available in
days
days
after you enroll
-
PreviewIntroduction (1:49)
-
PreviewWhat is React? (2:55)
-
PreviewReal-World SPAs & React Web Apps (1:44)
-
PreviewWriting our First React Code (15:07)
-
PreviewJoin our Online Learning Community
-
PreviewWhy Should we Choose React? (2:03)
-
PreviewReact Alternatives (1:11)
-
PreviewUnderstanding Single Page Applications and Multi Page Applications (3:38)
-
PreviewCourse Outline (7:28)
-
PreviewHow to get the Most out of This Course (2:29)
-
PreviewUseful Resources & Links
Refreshing Next Generation JavaScript (Optional)
Available in
days
days
after you enroll
-
StartModule Introduction (1:35)
-
StartUnderstanding "let" and "const" (3:05)
-
StartArrow Functions (5:27)
-
StartExports and Imports (4:43)
-
StartUnderstanding Classes (4:37)
-
StartClasses, Properties and Methods (3:03)
-
StartThe Spread & Rest Operator (6:30)
-
StartDestructuring (3:13)
-
StartReference and Primitive Types Refresher (4:26)
-
StartRefreshing Array Functions (2:45)
-
StartWrap Up (0:52)
-
StartNext-gen JavaScript Summary
-
StartJavaScript Array Functions
Understanding the Base Features & Syntax
Available in
days
days
after you enroll
-
StartModule Introduction (0:38)
-
StartThe Build Workflow (8:00)
-
StartUsing Create React App (6:09)
-
StartUnderstanding the Folder Structure (8:11)
-
StartUnderstanding Component Basics (5:32)
-
StartUnderstanding JSX (5:38)
-
StartJSX Restrictions (3:09)
-
StartCreating a Functional Component (8:09)
-
StartWorking with Components & Re-Using Them (1:47)
-
StartOutputting Dynamic Content (3:02)
-
StartWorking with Props (4:07)
-
StartUnderstanding the "children" Prop (2:56)
-
StartUnderstanding & Using State (7:17)
-
StartProps & State
-
StartHandling Events with Methods (3:45)
-
StartManipulating the State (5:03)
-
StartUsing the useState() Hook for State Manipulation (13:51)
-
StartStateless vs Stateful Components (3:08)
-
StartPassing Method References Between Components (7:05)
-
StartAdding Two Way Binding (6:51)
-
StartAdding Styling with Stylesheets (5:28)
-
StartWorking with Inline Styles (4:15)
-
StartAssignment: Basics (Problem) (4:35)
-
StartAssignment: Basics (Solution) (22:28)
-
StartUseful Resources & Links
Working with Lists and Conditionals
Available in
days
days
after you enroll
-
StartModule Introduction (1:03)
-
StartRendering Content Conditionally (10:09)
-
StartHandling Dynamic Content "The JavaScript Way" (4:49)
-
StartOutputting Lists (Intro) (1:31)
-
StartOutputting Lists (5:32)
-
StartLists & State (4:12)
-
StartUpdating State Immutably (2:39)
-
StartLists & Keys (4:14)
-
StartFlexible Lists (7:34)
-
StartWrap Up (1:55)
-
StartAssignment: Conditional Content & Lists (Problem) (5:25)
-
StartAssignment: Conditional Content & Lists (Solution) (17:16)
-
StartUseful Resources & Links
Styling React Components & Elements
Available in
days
days
after you enroll
-
StartModule Introduction (1:19)
-
StartOutlining the Problem Set (1:58)
-
StartSetting Styles Dynamically (3:19)
-
StartSetting Class Names Dynamically (7:09)
-
StartAdding and Using Radium (7:00)
-
StartUsing Radium for Media Queries (5:02)
-
StartIntroducing Styled Components (8:16)
-
StartMore on Styled Components (5:51)
-
StartStyled Components & Dynamic Styles (5:27)
-
StartWorking with CSS Modules (15:21)
-
StartCSS Modules & Media Queries (3:15)
-
StartMore on CSS Modules
-
StartUseful Resources & Links
Debugging React Apps
Available in
days
days
after you enroll
Diving Deeper into Components & React Internals
Available in
days
days
after you enroll
-
StartModule Introduction (0:42)
-
StartA Better Project Structure (7:24)
-
StartSplitting an App Into Components (15:54)
-
StartComparing Stateless and Stateful Components (3:46)
-
StartClass-based vs Functional Components (5:15)
-
Startclass Component Lifecycle Overview (5:04)
-
StartComponent Creation Lifecycle in Action (6:46)
-
StartComponent Update Lifecycle (for props Changes) (15:34)
-
StartComponent Update Lifecycle (for state Changes) (3:49)
-
StartUsing useEffect() in Functional Components (3:46)
-
StartControlling the useEffect() Behavior (3:40)
-
StartCleaning up with Lifecycle Hooks & useEffect() (6:48)
-
StartCleanup Work with useEffect() - Example (1:37)
-
StartUsing shouldComponentUpdate for Optimization (6:45)
-
StartOptimizing Functional Components with React.memo() (3:39)
-
StartWhen should you optimize? (2:18)
-
StartPureComponents instead of shouldComponentUpdate (3:35)
-
StartHow React Updates the DOM (4:27)
-
StartRendering Adjacent JSX Elements (9:00)
-
StartMust Read: Windows Users
-
StartUsing React.Fragment (1:29)
-
StartHigher Order Components (HOC) - Introduction (4:20)
-
StartAnother Form of HOCs (5:56)
-
StartPassing Unknown Props (4:58)
-
StartSetting State Correctly (5:13)
-
StartUsing PropTypes (6:53)
-
StartUsing Refs (7:37)
-
StartRefs with React Hooks (4:34)
-
StartUnderstanding Prop Chain Problems (4:56)
-
StartUsing the Context API (10:03)
-
StartcontextType & useContext() (5:33)
-
StartWrap Up (1:21)
-
StartUseful Resources & Links
A Real App: The Burger Builder (Basic Version)
Available in
days
days
after you enroll
-
StartAbout React Hooks
-
StartModule Introduction (0:57)
-
StartPlanning an App in React - Core Steps (2:32)
-
StartPlanning our App - Layout and Component Tree (10:57)
-
StartPlanning the State (4:13)
-
StartSetting up the Project (5:01)
-
StartCreating a Layout Component (10:01)
-
StartStarting Implementation of The Burger Builder Container (5:04)
-
StartAdding a Dynamic Ingredient Component (8:27)
-
StartAdding Prop Type Validation (2:49)
-
StartStarting the Burger Component (6:49)
-
StartOutputting Burger Ingredients Dynamically (9:44)
-
StartCalculating the Ingredient Sum Dynamically (5:10)
-
StartAdding the Build Control Component (7:26)
-
StartOutputting Multiple Build Controls (4:03)
-
StartConnecting State to Build Controls (8:22)
-
StartRemoving Ingredients Safely (7:30)
-
StartDisplaying and Updating the Burger Price (2:28)
-
StartAdding the Order Button (10:39)
-
StartCreating the Order Summary Modal (13:58)
-
StartShowing & Hiding the Modal (with Animation!) (6:59)
-
StartImplementing the Backdrop Component (8:22)
-
StartAdding a Custom Button Component (4:46)
-
StartImplementing the Button Component (4:54)
-
StartAdding the Price to the Order Summary (2:05)
-
StartAdding a Toolbar (9:11)
-
StartUsing a Logo in our Application (6:39)
-
StartAdding Reusable Navigation Items (11:26)
-
StartCreating a Responsive Sidedrawer (7:44)
-
StartWorking on Responsive Adjustments (4:34)
-
StartMore about Responsive Adjustments (7:18)
-
StartReusing the Backdrop (9:11)
-
StartAdding a Sidedrawer Toggle Button (6:27)
-
StartAdding a Hamburger Icon (2:20)
-
StartImproving the App - Introduction (1:11)
-
StartProp Type Validation (1:17)
-
StartImproving Performance (8:48)
-
StartUsing Component Lifecycle Methods (2:00)
-
StartChanging the Folder Structure (4:57)
-
StartWrap Up (1:49)
-
StartUseful Resources & Links
Reaching out to the Web (Http / Ajax)
Available in
days
days
after you enroll
-
StartModule Introduction (1:03)
-
StartUnderstanding Http Requests in React (1:35)
-
StartUnderstanding our Project and Introducing Axios (4:15)
-
StartCreating a Http Request to GET Data (5:29)
-
StartRendering Fetched Data to the Screen (3:46)
-
StartTransforming Data (2:40)
-
StartMaking a Post Selectable (4:01)
-
StartFetching Data on Update (without Creating Infinite Loops) (7:56)
-
StartPOSTing Data to the Server (3:52)
-
StartSending a DELETE Request (2:23)
-
StartFixing a Bug (0:33)
-
StartHandling Errors Locally (3:23)
-
StartAdding Interceptors to Execute Code Globally (6:18)
-
StartSetting a Default Global Configuration for Axios (3:10)
-
StartCreating and Using Axios Instances (5:03)
-
StartWrap Up (0:47)
-
StartUseful Resources & Links
Burger Builder Project: Accessing a Server
Available in
days
days
after you enroll
-
StartModule Introduction (1:52)
-
StartCreating the Firebase Project (3:26)
-
StartCreating the Axios Instance (2:42)
-
StartSending a POST Request (7:46)
-
StartDisplaying a Spinner while Sending a Request (9:20)
-
StartHandling Errors (12:04)
-
StartRetrieving Data from the Backend (11:22)
-
StartRemoving Old Interceptors (8:24)
-
StartUseful Resources & Links
Multi-Page-Feeling in a Single-Page-App: Routing
Available in
days
days
after you enroll
-
StartModule Introduction (0:51)
-
StartRouting and SPAs (2:43)
-
StartSetting Up Links (4:22)
-
StartSetting Up the Router Package (4:46)
-
StartPreparing the Project For Routing (5:13)
-
StartSetting Up and Rendering Routes (5:18)
-
StartRendering Components for Routes (1:57)
-
StartSwitching Between Pages (2:17)
-
StartUsing Links to Switch Pages (4:03)
-
StartUsing Routing-Related Props (3:12)
-
StartThe "withRouter" HOC & Route Props (3:44)
-
StartAbsolute vs Relative Paths (2:34)
-
StartStyling the Active Route (5:55)
-
StartPassing Route Parameters (6:54)
-
StartExtracting Route Parameters (3:03)
-
StartParsing Query Parameters & the Fragment
-
StartUsing Switch to Load a Single Route (3:33)
-
StartNavigating Programmatically (3:25)
-
StartAdditional Information Regarding Active Links (2:22)
-
StartUnderstanding Nested Routes (7:55)
-
StartCreating Dynamic Nested Routes (4:38)
-
StartRedirecting Requests (2:45)
-
StartConditional Redirects (2:47)
-
StartUsing the History Prop to Redirect (Replace) (2:49)
-
StartWorking with Guards (3:46)
-
StartHandling the 404 Case (Unknown Routes) (3:02)
-
StartLoading Routes Lazily (11:49)
-
StartLazy Loading with React Suspense (16.6) (9:47)
-
StartRouting and Server Deployment (4:19)
-
StartAssignment: Routing (Problem) (4:53)
-
StartAssignment: Routing (Solution) (29:11)
-
StartWrap Up (0:49)
-
StartUseful Resources & Links
Adding Routing to our Burger Project
Available in
days
days
after you enroll
-
StartModule Introduction (1:35)
-
StartBuilding the Checkout Container (11:32)
-
StartSetting Up Routing & Routes (4:41)
-
StartNavigating to the Checkout Page (4:50)
-
StartNavigating Back & To Next Page (3:33)
-
StartPassing Ingredients via Query Params (5:27)
-
StartNavigating to the Contact Data Component (9:33)
-
StartOrder Submission & Passing Data Between Pages (11:44)
-
StartAdding an Orders Page (5:34)
-
StartImplementing Navigation Links (5:35)
-
StartFetching Orders (6:03)
-
StartOutputting the Orders (7:34)
-
StartWrap Up (1:07)
-
StartUseful Resources & Links
Forms and Form Validation
Available in
days
days
after you enroll
-
StartModule Introduction (0:49)
-
StartAnalyzing the App (1:49)
-
StartCreating a Custom Dynamic Input Component (11:30)
-
StartSetting Up a JS Config for the Form (7:34)
-
StartDynamically Create Inputs based on JS Config (5:23)
-
StartAdding a Dropdown Component (3:52)
-
StartHandling User Input (7:43)
-
StartHandling Form Submission (4:11)
-
StartAdding Custom Form Validation (8:09)
-
StartFixing a Common Validation Gotcha (1:18)
-
StartAdding Validation Feedback (5:12)
-
StartImproving Visual Feedback (2:18)
-
StartHandling Overall Form Validity (7:35)
-
StartWorking on an Error (1:26)
-
StartFixing a Bug (2:09)
-
StartShowing Error Messages
-
StartUseful Resources & Links
Redux
Available in
days
days
after you enroll
-
StartModule Introduction (1:00)
-
StartUnderstanding State (1:50)
-
StartThe Complexity of Managing State (2:42)
-
StartUnderstanding the Redux Flow (5:17)
-
StartSetting Up Reducer and Store (7:09)
-
StartDispatching Actions (6:44)
-
StartAdding Subscriptions (2:47)
-
StartConnecting React to Redux (3:39)
-
StartConnecting the Store to React (8:19)
-
StartDispatching Actions from within the Component (5:53)
-
StartAssignment: Dispatching Actions (Problem) (1:41)
-
StartAssignment: Dispatching Actions (Solution) (4:15)
-
StartPassing and Retrieving Data with Action (4:06)
-
StartSwitch-Case in the Reducer (3:00)
-
StartUpdating State Immutably (13:20)
-
StartUpdating Arrays Immutably (8:39)
-
StartImmutable Update Patterns
-
StartOutsourcing Action Types (5:19)
-
StartCombining Multiple Reducers (10:18)
-
StartUnderstanding State Types (4:50)
-
StartAssignment: Redux Basics (Problem) (1:45)
-
StartAssignment: Redux Basics (Solution) (14:23)
-
StartCombining Local UI State and Redux (7:39)
-
StartWrap Up (1:42)
-
StartUseful Resources & Links
Adding Redux to our Project
Available in
days
days
after you enroll
-
StartModule Introduction (5:26)
-
StartInstalling Redux and React Redux (4:08)
-
StartBasic Redux Setup (2:10)
-
StartFinishing the Reducer for Ingredients (6:35)
-
StartConnecting the Burger Builder Container to our Store (9:33)
-
StartWorking on the Total Price Calculation (6:05)
-
StartRedux & UI State (4:08)
-
StartAdjusting Checkout and Contact Data (9:10)
-
StartWrap Up (2:38)
-
StartUseful Resources & Links
Redux Advanced
Available in
days
days
after you enroll
-
StartModule Introduction (0:28)
-
StartAdding Middleware (7:47)
-
StartUsing the Redux Devtools (7:32)
-
StartExecuting Asynchronous Code - Introduction (1:52)
-
StartIntroducing Action Creators (4:11)
-
StartAction Creators & Async Code (6:20)
-
StartHandling Asynchronous Code (8:13)
-
StartRestructuring Actions (6:55)
-
StartWhere to Put Data Transforming Logic? (5:42)
-
StartUsing Action Creators and Get State (3:27)
-
StartUsing Utility Functions (7:20)
-
StartA Leaner Switch Case Statement (3:14)
-
StartAn Alternative Folder Structure (2:22)
-
StartDiving Much Deeper (2:07)
-
StartWrap Up (1:00)
-
StartUseful Resources & Links
Redux Advanced: Burger Project
Available in
days
days
after you enroll
-
StartModule Introduction (1:12)
-
StartInstalling the Redux Devtools (2:56)
-
StartPreparing the Folder Structure (3:06)
-
StartCreating Action Creators (6:15)
-
StartExecuting Asynchronous Code (4:05)
-
StartFetching Ingredients Asynchronously (7:50)
-
StartInitializing Ingredients in the BurgerBuilder (5:18)
-
StartChanging the Order of our Ingredients Manually (2:12)
-
StartAdding Order Actions (6:40)
-
StartConnecting Contact Data Container & Actions (4:18)
-
StartThe Order Reducer (5:30)
-
StartWorking on Order Actions (4:28)
-
StartRedirect to Improve UX (3:08)
-
StartCombining Reducers (4:53)
-
StartHandling Purchases & Updating the UI (8:34)
-
StartResetting the Price after Purchases (1:44)
-
StartFetching Orders (via Redux) (13:45)
-
StartChecking our Implemented Functionalities (1:23)
-
StartRefactoring Reducers (8:11)
-
StartRefactoring Reducers Continued (7:55)
-
StartWrap Up (0:57)
-
StartUseful Resources & Links
Adding Authentication to our Burger Project
Available in
days
days
after you enroll
-
StartModule Introduction (1:14)
-
StartUnderstanding Authentication in Single Page Applications (3:01)
-
StartRequired App Adjustments (0:53)
-
StartAdding an Auth Form (13:11)
-
StartAdding Actions (6:28)
-
StartGetting a Token from the Backend (6:59)
-
StartAdding Sign-In (5:30)
-
StartStoring the Token (9:00)
-
StartAdding a Spinner (6:03)
-
StartLogging Users Out (6:50)
-
StartAccessing Protected Resources (11:17)
-
StartUpdating the UI Depending on Auth State (7:32)
-
StartAdding a Logout Link (6:52)
-
StartForwarding Unauthenticated Users (8:18)
-
StartRedirecting the User to the Checkout Page (13:12)
-
StartPersistent Auth State with localStorage (14:36)
-
StartFixing Connect + Routing Errors (6:58)
-
StartEnsuring App Security (2:50)
-
StartGuarding Routes (5:34)
-
StartDisplaying User Specific Orders (8:16)
-
StartWrap Up (0:43)
-
StartUseful Resources & Links
Improving our Burger Project
Available in
days
days
after you enroll
-
StartModule Introduction (0:39)
-
StartFixing the Redirect to the Frontpage (5:48)
-
StartUsing updateObject in the Entire App (6:45)
-
StartSharing the Validation Method (2:16)
-
StartUsing Environment Variables (2:35)
-
StartRemoving console.log()s (3:47)
-
StartAdding Lazy Loading (4:58)
-
StartWrap Up (0:50)
-
StartUseful Resources & Links
Testing
Available in
days
days
after you enroll
-
StartModule Introduction (1:12)
-
StartWhat is Testing? (3:08)
-
StartRequired Testing Tools (2:26)
-
StartWhat To Test? (2:50)
-
StartWriting our First Test (12:34)
-
StartTesting Components Continued (4:05)
-
StartJest and Enzyme Documentations (6:28)
-
StartTesting Components Correctly (2:28)
-
StartTesting Containers (6:50)
-
StartHow to Test Redux (5:09)
-
StartWrap Up (1:27)
-
StartUseful Resources & Links
Deploying the App to the Web
Available in
days
days
after you enroll
Bonus: Working with Webpack
Available in
days
days
after you enroll
-
StartModule Introduction (1:24)
-
StartIntroducing Webpack (1:14)
-
StartHow Webpack works (2:39)
-
StartBasic Workflow Requirements (1:35)
-
StartProject & npm Setup (3:47)
-
StartCreating a Basic Folder & File Structure (3:12)
-
StartCreating the Basic React Application (10:55)
-
StartInstalling Production Dependencies (1:10)
-
StartSetting Up the Basic Webpack Config (6:41)
-
StartAdding File Rules & Babel (7:07)
-
StartLoading CSS Files (5:01)
-
StartLoading Images & Injecting into HTML Page (5:36)
-
StartProduction Workflow & Wrap Up (2:43)
-
StartAdding babel-polyfill
-
StartUseful Resources & Links
Bonus: A Brief Introduction to Redux Saga
Available in
days
days
after you enroll
-
StartModule Introduction (1:29)
-
StartInstalling Redux Saga (2:40)
-
StartCreating our First Saga (6:06)
-
StartHooking the Saga Up (to the Store and Actions) (4:42)
-
StartMoving Logic from the Action Creator to a Saga (5:57)
-
StartMoving More Logic Into Sagas (10:02)
-
StartHandling Authentication with a Saga (11:07)
-
StartHandling Auto-Sign-In with a Saga (5:52)
-
StartMoving the BurgerBuilder Side Effects into a Saga (7:01)
-
StartMoving the Orders Side Effects into Sagas (12:34)
-
StartWhy Sagas can be Helpful (1:17)
-
StartDiving Deeper into Sagas (6:55)
-
StartUseful Resources & Links
React Hooks
Available in
days
days
after you enroll
-
StartIntroduction (0:40)
-
StartWhat are "React Hooks"? (7:08)
-
StartThe Starting Project (4:57)
-
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)
-
StartAssignment: Hooks Basics (Problem) (1:03)
-
StartAssignment: 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)
-
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)
-
StartUseful Resources & Links
Using Hooks in the Burger Builder
Available in
days
days
after you enroll
-
StartIntroduction (1:08)
-
StartConverting the "App" Component (3:28)
-
StartRouting with React.lazy() (3:35)
-
StartConverting the Layout Component (2:39)
-
StartConverting withErrorHandler HOC (5:26)
-
StartAdjusting the Order & Checkout Containers (4:28)
-
StartAdd Hooks to ContactData (5:38)
-
StartConverting the BurgerBuilder Container (4:25)
-
StartAdjusting Auth & Logout Components (6:01)
-
StartUsing React.memo() & More! (4:30)
-
StartAdding a Custom Error Handling Hook (5:40)
-
StartSetting the right useEffect() Dependencies (4:58)
-
StartWorking with useSelector() and useDispatch() (11:33)
-
StartWrap Up (1:03)
-
StartUseful Resources & Links
Bonus: Replacing Redux with React Hooks
Available in
days
days
after you enroll
-
StartModule Introduction (0:48)
-
StartStarting Project & Why You Would Replace Redux (4:19)
-
StartAlternative: Using the Context API (7:13)
-
StartToggling Favorites with the Context API (5:43)
-
StartContext API Summary (and why NOT to use it instead of Redux) (2:30)
-
StartGetting Started with a Custom Hook as a Store (8:11)
-
StartFinishing the Store Hook (5:53)
-
StartCreating a Concrete Store (4:11)
-
StartUsing the Custom Store (5:40)
-
StartCustom Hook Store Summary (3:13)
-
StartOptimizing the Custom Hook Store (4:04)
-
StartBonus: Managing Multiple State Slices with the Custom Store Hook
-
StartWrap Up (2:00)
-
StartUseful Resources & Links
Bonus: Next.js
Available in
days
days
after you enroll
-
StartModule Introduction (1:12)
-
StartUnderstanding Server Side Rendering (3:18)
-
StartSetting Up a Project (6:02)
-
StartUnderstanding the Basics (3:53)
-
StartNext.js & Components & Pages (2:48)
-
StartStyling our App in Next.js (2:47)
-
StartHandling (404) Errors (2:01)
-
StartA Special Lifecycle Hook (9:33)
-
StartDeploying our App (2:59)
-
StartUseful Resources & Links
Bonus: Animations in React Apps
Available in
days
days
after you enroll
-
StartModule Introduction (1:07)
-
StartPreparing the Demo Project (6:12)
-
StartUsing CSS Transitions (4:34)
-
StartUsing CSS Animations (5:32)
-
StartCSS Transition & Animations Limitations (4:04)
-
StartUsing ReactTransitionGroup (12:19)
-
StartUsing the Transition Component (3:24)
-
StartWrapping the Transition Component (3:16)
-
StartAnimation Timings (3:14)
-
StartTransition Events (2:33)
-
StartThe CSSTransition Component (5:23)
-
StartCustomizing CSS Classnames (2:30)
-
StartAnimating Lists (6:53)
-
StartAlternative Animation Packages (4:28)
-
StartWrap Up (1:57)
-
StartUseful Resources & Links
Bonus: Building the Burger CSS
Available in
days
days
after you enroll
Next Steps and Course Roundup
Available in
days
days
after you enroll
-
StartModule Introduction (1:00)
-
StartReact Rocks! Where to find more Examples (1:24)
-
StartMore Inspiration: Real-World Projects Built with React (1:23)
-
StartStatic React Apps with Gatsby.js (2:31)
-
StartIntroducing React Native (2:17)
-
StartComponent Libraries (Example: Material UI) (2:36)
-
StartSmaller Apps with Preact (3:08)
-
StartComparing React with Preact (5:50)
-
StartCongratulations (1:16)
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 10002 happy students!
Single-Course License
Full access to "[LEGACY] React - The Complete Guide (incl Hooks, React Router, Redux)"
$89
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!