Udemy

Platform

English

Language

Programming Languages

Category

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!

4.65 (118549 reviews)

Students

48 hours

Content

Jun 2021

Last Update
Regular Price

SKILLSHARE
SkillShare
Unlimited access to 30 000 Premium SkillShare courses
30-DAY FREE TRIAL

What you will learn

Build powerful, fast, user-friendly and reactive web apps

Provide amazing user experiences by leveraging the power of JavaScript with ease

Apply for high-paid jobs or work as a freelancer in one the most-demanded sectors you can find in web dev right now

Learn all about React Hooks and React Components


Description

This course is the most up-to-date, comprehensive and bestselling React course on Udemy!

It was completely updated and re-recorded from the ground up in May 2021 - it teaches the very latest version of React with all the core, modern features you need to know!

---

This course also comes with two paths which you can take: The "complete" path (full >40h course) and the "summary" 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 originally created this course in 2017 and I have kept it updated since that - redoing it from the ground up in 2021. And of course I'm dedicated to keeping this course up-to-date - so that you can rely on this course to learn React in the best possible 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!


Screenshots

React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)

Content

Getting Started

Introduction

What is React?

Join our Online Learning Community

Real-World SPAs & React Web Apps

Writing our First React Code

Why Should we Choose React?

React Alternatives

Understanding Single Page Applications and Multi Page Applications

Course Outline

How to get the Most out of This Course

Useful Resources & Links

Refreshing Next Generation JavaScript (Optional)

Module Introduction

Understanding "let" and "const"

Arrow Functions

Exports and Imports

Understanding Classes

Classes, Properties and Methods

The Spread & Rest Operator

Destructuring

Reference and Primitive Types Refresher

Refreshing Array Functions

Wrap Up

Next-Gen JavaScript - Summary

JS Array Functions

Understanding the Base Features & Syntax

Module Introduction

The Build Workflow

Using Create React App

Understanding the Folder Structure

Understanding Component Basics

Understanding JSX

JSX Restrictions

Creating a Functional Component

Components & JSX Cheat Sheet

Working with Components & Re-Using Them

Outputting Dynamic Content

Working with Props

Understanding the "children" Prop

Understanding & Using State

Props & State

Handling Events with Methods

To Which Events Can You Listen?

Manipulating the State

Function Components Naming

Using the useState() Hook for State Manipulation

Stateless vs Stateful Components

Passing Method References Between Components

Adding Two Way Binding

Adding Styling with Stylesheets

Working with Inline Styles

[OPTIONAL] Assignment Solution

Useful Resources & Links

Working with Lists and Conditionals

Module Introduction

Rendering Content Conditionally

Handling Dynamic Content "The JavaScript Way"

Outputting Lists (Intro)

Outputting Lists

Lists & State

Updating State Immutably

Lists & Keys

Flexible Lists

Wrap Up

[OPTIONAL] Assignment Solution

Useful Resources & Links

Styling React Components & Elements

Module Introduction

Outlining the Problem Set

Setting Styles Dynamically

Setting Class Names Dynamically

Adding and Using Radium

Using Radium for Media Queries

Introducing Styled Components

More on Styled Components

Styled Components & Dynamic Styles

Working with CSS Modules

CSS Modules & Media Queries

More on CSS Modules

Useful Resources & Links

Debugging React Apps

Module Introduction

Understanding Error Messages

Finding Logical Errors by using Dev Tools & Sourcemaps

Working with the React Developer Tools

Using Error Boundaries (React 16+)

Wrap Up

Useful Resources & Links

Diving Deeper into Components & React Internals

Module Introduction

A Better Project Structure

Splitting an App Into Components

Comparing Stateless and Stateful Components

Class-based vs Functional Components

class Component Lifecycle Overview

Component Creation Lifecycle in Action

Component Update Lifecycle (for props Changes)

Component Update Lifecycle (for state Changes)

Using useEffect() in Functional Components

Controlling the useEffect() Behavior

Cleaning up with Lifecycle Hooks & useEffect()

Cleanup Work with useEffect() - Example

Using shouldComponentUpdate for Optimization

Optimizing Functional Components with React.memo()

When should you optimize?

PureComponents instead of shouldComponentUpdate

How React Updates the DOM

Rendering Adjacent JSX Elements

Windows Users Must Read

Using React.Fragment

Higher Order Components (HOC) - Introduction

Another Form of HOCs

Passing Unknown Props

Setting State Correctly

Using PropTypes

Using Refs

Refs with React Hooks

Understanding Prop Chain Problems

Using the Context API

contextType & useContext()

Wrap Up

Useful Resources & Links

MUST READ: Legacy Lectures

[LEGACY] Splitting an App Into Components

[LEGACY] Comparing Stateless and Stateful Components

[LEGACY] Understanding the Component Lifecycle

[LEGACY] Converting Stateless to Stateful Components

[LEGACY] Component Creation Lifecycle in Action

[LEGACY] componentWillUnmount()

[LEGACY] Component Updating Lifecycle Hooks

[LEGACY] Component Updating Lifecycle in Action

[LEGACY] Updating Lifecycle Hooks (Triggered by State Changes)

[LEGACY] Performance Gains with PureComponents

[LEGACY] How React Updates the App & Component Tree

[LEGACY] Understanding React's DOM Updating Strategy

[LEGACY] Windows Users Must Read - File Downloads

[LEGACY] Returning Adjacent Elements (React 16+)

[LEGACY] React 16.2 Feature: Fragments

[LEGACY] Understanding Higher Order Components (HOCs)

[LEGACY] A Different Approach to HOCs

[LEGACY] Passing Unknown Props

[LEGACY] Using setState Correctly

[LEGACY] Validating Props

[LEGACY] Available PropTypes

[LEGACY] Using References ("ref")

[LEGACY] More on the React ref API (16.3)

[LEGACY] The Context API (React 16.3)

[LEGACY] More on the Context API (16.6)

[LEGACY] Updated Lifecycle Hooks (React 16.3)

[LEGACY] The "memo" Method (16.4)

[LEGACY] Wrap Up

[LEGACY] Useful Resources & Links

A Real App: The Burger Builder (Basic Version)

About React Hooks

Module Introduction

Planning an App in React - Core Steps

Planning our App - Layout and Component Tree

Planning the State

MUST READ: Enabling CSS Modules

Setting up the Project

Creating a Layout Component

Starting Implementation of The Burger Builder Container

Adding a Dynamic Ingredient Component

Adding Prop Type Validation

Starting the Burger Component

Outputting Burger Ingredients Dynamically

Calculating the Ingredient Sum Dynamically

Adding the Build Control Component

Outputting Multiple Build Controls

Connecting State to Build Controls

Removing Ingredients Safely

Displaying and Updating the Burger Price

Adding the Order Button

Creating the Order Summary Modal

Showing & Hiding the Modal (with Animation!)

Implementing the Backdrop Component

Adding a Custom Button Component

Implementing the Button Component

Adding the Price to the Order Summary

Adding a Toolbar

Using a Logo in our Application

Adding Reusable Navigation Items

Creating a Responsive Sidedrawer

Working on Responsive Adjustments

More about Responsive Adjustments

Reusing the Backdrop

Adding a Sidedrawer Toggle Button

Adding a Hamburger Icon

Improving the App - Introduction

Prop Type Validation

Improving Performance

Using Component Lifecycle Methods

Changing the Folder Structure

Wrap Up

Useful Resources & Links

Reaching out to the Web (Http / Ajax)

Module Introduction

Understanding Http Requests in React

Understanding our Project and Introducing Axios

Creating a Http Request to GET Data

Rendering Fetched Data to the Screen

Transforming Data

Making a Post Selectable

Fetching Data on Update (without Creating Infinite Loops)

POSTing Data to the Server

Sending a DELETE Request

Fixing a Bug

Handling Errors Locally

Adding Interceptors to Execute Code Globally

Removing Interceptors

Setting a Default Global Configuration for Axios

Creating and Using Axios Instances

Wrap Up

Useful Resources & Links

Burger Builder Project: Accessing a Server

Module Introduction

Firebase & The Right Database

Creating the Firebase Project

Creating the Axios Instance

Sending a POST Request

Displaying a Spinner while Sending a Request

Handling Errors

Retrieving Data from the Backend

Removing Old Interceptors

Useful Resources & Links

Multi-Page-Feeling in a Single-Page-App: Routing

Module Introduction

Routing and SPAs

Setting Up Links

Setting Up the Router Package

react-router vs react-router-dom

Preparing the Project For Routing

Setting Up and Rendering Routes

Rendering Components for Routes

Switching Between Pages

Using Links to Switch Pages

Using Routing-Related Props

The "withRouter" HOC & Route Props

Absolute vs Relative Paths

Absolute vs Relative Paths (Article)

Styling the Active Route

Passing Route Parameters

Extracting Route Parameters

Parsing Query Parameters & the Fragment

Using Switch to Load a Single Route

Navigating Programmatically

Additional Information Regarding Active Links

Understanding Nested Routes

Creating Dynamic Nested Routes

Redirecting Requests

Conditional Redirects

Using the History Prop to Redirect (Replace)

Working with Guards

Handling the 404 Case (Unknown Routes)

Loading Routes Lazily

Lazy Loading with React Suspense (16.6)

Routing and Server Deployment

Wrap Up

Useful Resources & Links

Adding Routing to our Burger Project

Module Introduction

Building the Checkout Container

Setting Up Routing & Routes

Navigating to the Checkout Page

Navigating Back & To Next Page

Passing Ingredients via Query Params

Navigating to the Contact Data Component

Order Submission & Passing Data Between Pages

Adding an Orders Page

Implementing Navigation Links

Fetching Orders

Outputting the Orders

Wrap Up

Useful Resources & Links

Forms and Form Validation

Module Introduction

Analyzing the App

Creating a Custom Dynamic Input Component

Setting Up a JS Config for the Form

Dynamically Create Inputs based on JS Config

Adding a Dropdown Component

Handling User Input

Handling Form Submission

Adding Custom Form Validation

Fixing a Common Validation Gotcha

Adding Validation Feedback

Improving Visual Feedback

Showing Error Messages

Handling Overall Form Validity

Working on an Error

Fixing a Bug

Useful Resources & Links

Redux

Module Introduction

Understanding State

The Complexity of Managing State

Understanding the Redux Flow

Setting Up Reducer and Store

Dispatching Actions

Adding Subscriptions

Connecting React to Redux

Connecting the Store to React

Dispatching Actions from within the Component

Passing and Retrieving Data with Action

Switch-Case in the Reducer

Updating State Immutably

Updating Arrays Immutably

Immutable Update Patterns

Outsourcing Action Types

Combining Multiple Reducers

Understanding State Types

[OPTIONAL] Assignment Solution

Combining Local UI State and Redux

Wrap Up

Useful Resources & Links

Adding Redux to our Project

Module Introduction

Installing Redux and React Redux

Basic Redux Setup

Finishing the Reducer for Ingredients

Connecting the Burger Builder Container to our Store

Working on the Total Price Calculation

Redux & UI State

Adjusting Checkout and Contact Data

Wrap Up

Useful Resources & Links

Redux Advanced

Module Introduction

Adding Middleware

Using the Redux Devtools

Executing Asynchronous Code - Introduction

Introducing Action Creators

Action Creators & Async Code

Handling Asynchronous Code

Restructuring Actions

Where to Put Data Transforming Logic?

Using Action Creators and Get State

Using Utility Functions

A Leaner Switch Case Statement

An Alternative Folder Structure

Diving Much Deeper

Wrap Up

Useful Resources & Links

Redux Advanced: Burger Project

Module Introduction

Installing the Redux Devtools

Preparing the Folder Structure

Creating Action Creators

Executing Asynchronous Code

Fetching Ingredients Asynchronously

Initializing Ingredients in the BurgerBuilder

Changing the Order of our Ingredients Manually

Adding Order Actions

Connecting Contact Data Container & Actions

The Order Reducer

Working on Order Actions

Redirect to Improve UX

Combining Reducers

Handling Purchases & Updating the UI

Resetting the Price after Purchases

Fetching Orders (via Redux)

Checking our Implemented Functionalities

Refactoring Reducers

Refactoring Reducers Continued

Wrap Up

Useful Resources & Links

Adding Authentication to our Burger Project

Module Introduction

Understanding Authentication in Single Page Applications

Required App Adjustments

Adding an Auth Form

Adding Actions

Getting a Token from the Backend

Adding Sign-In

Storing the Token

Adding a Spinner

Logging Users Out

Accessing Protected Resources

Updating the UI Depending on Auth State

Adding a Logout Link

Forwarding Unauthenticated Users

Redirecting the User to the Checkout Page

Persistent Auth State with localStorage

Fixing Connect + Routing Errors

Ensuring App Security

Guarding Routes

Displaying User Specific Orders

Wrap Up

Useful Resources & Links

Improving our Burger Project

Module Introduction

Fixing the Redirect to the Frontpage

Using updateObject in the Entire App

Sharing the Validation Method

Using Environment Variables

Removing console.log()s

Adding Lazy Loading

Wrap Up

Useful Resources & Links

Testing

Module Introduction

What is Testing?

Required Testing Tools

What To Test?

Writing our First Test

Testing Components Continued

Jest and Enzyme Documentations

Testing Components Correctly

Testing Containers

How to Test Redux

Wrap Up

Useful Resources & Links

Deploying the App to the Web

Module Introduction

Deployment Steps

Building the Project

Example: Deploying on Firebase

Wrap Up

Useful Resources & Links

Bonus: Working with Webpack

Module Introduction

Introducing Webpack

How Webpack works

Basic Workflow Requirements

Project & npm Setup

Creating a Basic Folder & File Structure

Creating the Basic React Application

Installing Production Dependencies

Setting Up the Basic Webpack Config

Adding File Rules & Babel

Loading CSS Files

Loading Images & Injecting into HTML Page

Production Workflow & Wrap Up

Adding babel-polyfill

Useful Resources & Links

Bonus: Next.js

Module Introduction

Understanding Server Side Rendering

Setting Up a Project

Understanding the Basics

Next.js & Components & Pages

Styling our App in Next.js

Handling (404) Errors

A Special Lifecycle Hook

Deploying our App

Useful Resources & Links

Bonus: Animations in React Apps

Module Introduction

Preparing the Demo Project

Using CSS Transitions

Using CSS Animations

CSS Transition & Animations Limitations

Using ReactTransitionGroup

Using the Transition Component

Wrapping the Transition Component

Animation Timings

Transition Events

The CSSTransition Component

Customizing CSS Classnames

Animating Lists

Alternative Animation Packages

Wrap Up

Useful Resources & Links

Bonus: A Brief Introduction to Redux Saga

Module Introduction

Installing Redux Saga

Creating our First Saga

Hooking the Saga Up (to the Store and Actions)

Moving Logic from the Action Creator to a Saga

Moving More Logic Into Sagas

Handling Authentication with a Saga

Handling Auto-Sign-In with a Saga

Moving the BurgerBuilder Side Effects into a Saga

Moving the Orders Side Effects into Sagas

Why Sagas can be Helpful

Diving Deeper into Sagas

Useful Resources & Links

React Hooks

Introduction

What are "React Hooks"?

The Starting Project

Getting Started with useState()

More on useState() & State Updating

Array Destructuring

Multiple States

Rules of Hooks

Passing State Data Across Components

Sending Http Requests

useEffect() & Loading Data

Understanding useEffect() Dependencies

More on useEffect()

What's useCallback()?

Working with Refs & useRef()

Cleaning Up with useEffect()

Deleting Ingredients

Loading Errors & State Batching

More on State Batching & State Updates

Understanding useReducer()

Using useReducer() for the Http State

Working with useContext()

Performance Optimizations with useMemo()

Getting Started with Custom Hooks

Sharing Data Between Custom Hooks & Components

Using the Custom Hook

Wrap Up

What's [LEGACY]?

[LEGACY] What are Hooks?

[LEGACY] Enabling Hooks

[LEGACY] The useState() Hook

[LEGACY] Adding Array Destructuring

[LEGACY] Using Multiple State

[LEGACY] Using One State Instead

[LEGACY] The "Rules of Hooks"

[LEGACY] Sending Data via Http

[LEGACY] The useEffect() Hook

[LEGACY] Controlling Effect Execution

[LEGACY] Effect Cleanup

[LEGACY] Converting the "App" Component

[LEGACY] The useContext() Hook

[LEGACY] State and Effects Gotchas

[LEGACY] The useReducer() Hook

[LEGACY] useReducer() vs useState()

[LEGACY] Working with References and useRef()

[LEGACY] Preparing & Optimizing

[LEGACY] Avoiding Unnecessary Re-Rendering

[LEGACY] How to think about Functional Components with Hooks

[LEGACY] Creating a Custom Hook

[LEGACY] Wrap Up

Using Hooks in the Burger Builder

Introduction

Converting <App>

Routing with React.lazy()

Converting the Layout Component

Converting withErrorHandler HOC

Adjusting the Order & Checkout Containers

Add Hooks to ContactData

Converting the BurgerBuilder Container

Adjusting Auth & Logout Components

Using React.memo() & More!

Adding a Custom Error Handling Hook

Setting the right useEffect() Dependencies

Working with useSelector() and useDispatch()

Wrap Up

Useful Resources & Links

Bonus: Replacing Redux with React Hooks

Module Introduction

Starting Project & Why You Would Replace Redux

Alternative: Using the Context API

Toggling Favorites with the Context API

Context API Summary (and why NOT to use it instead of Redux)

Getting Started with a Custom Hook as a Store

Finishing the Store Hook

Creating a Concrete Store

Using the Custom Store

Custom Hook Store Summary

Optimizing the Custom Hook Store

Bonus: Managing Multiple State Slices with the Custom Store Hook

Wrap Up

Useful Resources & Links

Bonus: Building the Burger CSS

Building the Burger CSS Code

Next Steps and Course Roundup

Module Introduction

React Rocks! Where to find more Examples

More Inspiration: Real-World Projects Built with React

Static React Apps with Gatsby.js

Introducing React Native

Component Libraries (Example: Material UI)

Smaller Apps with Preact

Comparing React with Preact

Congratulations

Bonus: More Content!


Reviews

D
Diarmuid9 October 2020

Good course so far. Nice paced intro with the right level of content to keep me interested but also so I don't feel like I'm lost

R
Richard9 October 2020

Probably not awful but the course wanders all over the place. I got to section 7 and lost interest after learning two ways to do the same thing and then being told neither way was going to be used in the course because there was a third way. Huh? Maybe I needed the "Incomplete Guide to React"?

R
Rahul8 October 2020

its a very good explanation so far the IDe they are using is Code Pen and its not free and and its very hard to manage buying it because of the financial problems

N
Nahuel7 October 2020

This course is excelent, im from Argentina and the english speaker is not difficult to me, but im so excited to finish this course and get more experience to apply in futures jobs

C
Coding7 October 2020

Its was an awesome tutorials, i can understand it very easily and the assignments are making it very easy forme to implement so that i will never forget it

L
Lucas26 February 2020

It is very clearly to show me how a simple react app works, for developers easily follow up. But for beginer, I suggest to learn Javascript course first.

A
Alessio25 February 2020

Maximilian sa spiegare davvero bene, consigliatissimo. Inoltre il corso copre davvero tutto ed è continuamente aggiornato.

J
John25 February 2020

So far this course is fantastic. I have some experience with React, but wanted to take a full course to get a unified approach. Max's enthusiasm and presentation skills really make this fun.

A
Amit25 February 2020

I loved Max's pedagogy and that's why I think it was the right decision to choose this course. And I'm really finding it interesting!

M
Martin25 February 2020

Overall a really good course, Max is a good and positive instructor. The only thing i would change is the number of assignments. I would like to have more of them, maybe even some tests to verify you are really on the track. But it may be only my point of view. What i would really suggest to anyone taking this course is - Always pause the video in the beginning and try to code the next part on your own. It is really easy to fall to a "code along" approach without having a time to think about what you write and how things work.

A
Agoume25 February 2020

Oui ce cours correspond largement à mes attentes , tres bien expliqué , Sir Maximillian prends des exemples concrets qui me permette de vite me retrouver et de tres bien prendre la main sur React.Js . Je recommande ce cours.

G
Gabriella24 February 2020

This course is amazing and very beginner friendly - maybe after a bit of JS practise. It helped me so much understanding how React works, I can't wait to start doing my own app. Maximilian is a great teacher, I always found help when I got stuck. The price/value on this course is amazing, I learnt much more than in my expensive coding bootcamp :( Thank you Max for putting so much effort in your videos! Can't wait to start the nodeJS one :)

P
Paweł22 February 2020

That is all right, but unfortunately I haven't enough time recently to fully focus on the all courses and flow after Maximilian:(

D
Dhiren22 February 2020

The method of creating one hook and passing it to ReactDOM.render(..) gives us the same result as the previous method of multiple ReactDOM.render(..) calls . Only this was mentioned. How the method of creating one hook and one ReactDOM(..) functions i.e. the mechanism was not explained . Although it took me half a minute to understand it myself but would have been better if it was explained in the video. But if more complicated concepts are explained like this then our understanding of the unexplained part might be different from the actual working of the concept .

N
Nhialee21 February 2020

Eye opener with React. Never thought much about it since basic HTML with CSS seems to already be getting job done. React is amazing. Max does a great job getting me excited for the course.


Coupons

DateDiscountStatus
5/27/201992% OFFExpired
7/19/201994% OFFExpired
11/11/201993% OFFExpired
11/29/202091% OFFExpired
12/17/202093% OFFExpired
4/14/202192% OFFExpired
4/16/202189% OFFExpired
5/7/202189% OFFExpired
6/29/202189% OFFExpired
7/20/202189% OFFValid

1362070

Udemy ID

9/27/2017

Course created date

5/27/2019

Course Indexed date
Bot
Course Submitted by