React - The Complete Guide (incl Hooks, React Router, Redux)
4.6 (86,261 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
288,619 students enrolled

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.6 (86,261 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
288,619 students enrolled
Last updated 7/2020
English, French [Auto], 6 more
  • German [Auto]
  • Indonesian [Auto]
  • Italian [Auto]
  • Polish [Auto]
  • Portuguese [Auto]
  • Spanish [Auto]
Current price: $132.99 Original price: $189.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 40.5 hours on-demand video
  • 48 articles
  • 223 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Assignments
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll 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 React Hooks & Class-based Components
Course content
Expand all 490 lectures 40:37:31
+ Getting Started
11 lectures 39:38

Welcome to this course! Let me introduce myself and give you a first impression of the course content!

Preview 01:49

Let's dive into the most important question first: What is React? In this lecture, we'll take a closer look.

Preview 02:56

Learning alone is absolutely fine but finding learning partners might be a nice thing, too. Our learning community is a great place to learn and grow together - of course it's 100% free and optional!

Join our Online Learning Community

We learned what React is but it's always more useful to see real-world examples. So let's dive into some web pages that use React or a similar framework/ approach in this lecture.

Preview 02:28

Why React? Why not vanilla JavaScript? What's the advantage of picking a library like React? These answers will get answered in this lecture.

Preview 02:03

React's not the only library you can dive into. Let's take a closer look at some alternatives you have.

Preview 01:11

With React, you frequently create Single Page Applications. Now what does that mean? What is a Single Page Application? This lecture will answer these questions.

Preview 03:38

You now know what React is but what does the course actually offer you? This lecture will answer that question.

Preview 07:28

There's more than one way of taking a course. Let's find out how you can get the most out of this course in this lecture.

Preview 02:29

This lecture contains some useful resources and links. It also holds all the code for the module attached to it.

Preview 00:08
+ Refreshing Next Generation JavaScript (Optional)
13 lectures 44:28

Let me introduce you to this module and to what you're going to learn in it.

Module Introduction

One important next-gen feature you're going to see a lot is the usage of "const" and "let" instead of "var". What's up with these keywords? This lecture answers the question.

Understanding "let" and "const"

Arrow functions are another key next-gen feature we'll heavily use in this course. Let's dive into how to write them and how to use them in this lecture.

Arrow Functions

We'll write modular code in this course. That means, that the code will be split up across multiple files. In order to connect these files correctly, we'll need imports and exports. So let's dive into that feature in this lecture.

Exports and Imports

The "class" keyword is another new feature you'll see quite a bit in this course. Learn what it's about in this lecture.

Understanding Classes

Classes may have properties and methods. There actually are different ways of defining these. Let's dive into the details in this lecture.

Classes, Properties and Methods

React also makes heavy usage of the "Spread" operator. Or React projects do, to be precise. Learn more about that new operator in this lecture.

The Spread & Rest Operator

Time to destructure! It's a new JavaScript feature and it allows you to ... do what? Let's explore the feature in this lecture.


Not next-gen but super important: Knowing the difference between reference and primitive types. This lecture will explore both.

Reference and Primitive Types Refresher

We'll use a lot of array functions in this course. They're not next-gen but you need to feel confident working with them. So let's explore them in this lecture.

Refreshing Array Functions

Let me wrap this module up and summarize what we learned thus far.

Wrap Up

Have a look at this lecture to get a good overview over the various next-gen JS features you'll encounter in this course.

Next-Gen JavaScript - Summary

Here's something we'll also use quite a bit in this course: Some JavaScript array functions.

JS Array Functions
+ Understanding the Base Features & Syntax
27 lectures 02:20:44

Let me introduce you to this module and to what you're going to learn in it.

Module Introduction

When creating React apps, we typically use a lot of modern development features. To use all these features, a modern build workflow is needed, too. Learn more about that in this module.

The Build Workflow

Fortunately, we don't have to set up a build workflow manually - there's a tool for that! Let me introduce you to create-react-app.

Using Create React App

create-react-app allows us to easily create React projects. Let me now walk you through the structure of such a project.

Understanding the Folder Structure

Components are THE core building block of React apps. Time to dive into them and learn more about them.

Understanding Component Basics

JSX is the meat of a component - every component needs to return some JSX (or the alternative shown in this lecture). Let's explore it!

Understanding JSX

When using JSX, we face some restrictions. Let's find out which these are.

JSX Restrictions

We had a look at components already but now it's time to also create our own component. And for that, we'll use a different way of creating it. Learn more about it (and the WHY) in this lecture.

Creating a Functional Component

Time to quickly summarize what components and JSX are about.

Components & JSX Cheat Sheet

Since we compose our app from components, it's of course also crucial to understand how we work with them and how we make sure that they are re-usable.

Working with Components & Re-Using Them

Rarely, you only want to output static content. Learn how to easily output dynamic content in this lecture.

Outputting Dynamic Content

When working with components, you typically also need to pass data around. Props are used for that - learn more about this core concept in this lecture.

Working with Props

There's a special property we can access on our props - the children property. Learn what's up with it in this lecture.

Understanding the "children" Prop
Understanding & Using State

Props and state are crucial elements of React - time for a quick comparison and summary.

Props & State

Obviously, your app is probably also going to involve the user. Handling events is therefore crucial. Learn how to handle events the React way, in this lecture.

Handling Events with Methods

We saw onClick in the last lecture - but to which other events can you actually listen in React apps?

To Which Events Can You Listen?
Manipulating the State
Function Components Naming
Using the useState() Hook for State Manipulation
Stateless vs Stateful Components

What if you want to listen to an event in a child component? Can you still trigger a method in the parent component? Yes, you can - learn more about it in this lecture.

Passing Method References Between Components

When handling user input, two-way-binding is very useful and actually required to both listen to the user input and also reflect the latest state. Learn how to implement it in this lecture.

Adding Two Way Binding

Unstyled components don't look that exciting. Time to learn how to add styling!

Adding Styling with Stylesheets

Using CSS stylesheets is one way of adding styling - a static one though. Learn about a different, more flexible way in this lecture.

Working with Inline Styles
You learned a lot about the base syntax and features of React, now it's time to practice all the things you learned!
Time to Practice - The Base Syntax
1 question
[OPTIONAL] Assignment Solution

This lecture contains some useful resources and links. It also holds all the code for the module attached to it.

Useful Resources & Links
+ Working with Lists and Conditionals
12 lectures 01:00:56

Let me introduce you to this module and outline what we're going to cover.

Module Introduction

Not all content should be visible all the time - let me introduce you to conditional rendering in React apps in this lecture.

Rendering Content Conditionally

In React, everything is JavaScript, that's extremely important to understand. Let's now dive into how that helps you when handling dynamic content.

Handling Dynamic Content "The JavaScript Way"

Outputting lists (arrays) is a core task you'll probably face in any web app you build. Let's have a look at how React supports you in this lecture.

Outputting Lists (Intro)

Time to get our hands dirty and actually output a list in React.

Outputting Lists

Often, you want to connect lists to your app state and also be able to react to events. Learn more about these things in this lecture.

Lists & State

When updating state, you should make sure to not overwrite the original state. Learn more about that in this lecture.

Updating State Immutably

React updates the UI for you and it does so very efficiently. To be able to do that, you need to support it when working with arrays of JSX (=> Lists). Learn how to do that in this lecture.

Lists & Keys

Let's dive deeper into lists and see how we can really create flexible lists in this lecture.

Flexible Lists

Let me wrap this module up and summarize what we learned thus far.

Wrap Up
Lists and conditional content are key features of any web app and it's therefore crucial that you understand how to work with both concepts. Time to practice it!
Time to Practice - Lists & Conditionals
1 question
[OPTIONAL] Assignment Solution

This lecture contains some useful resources and links. It also holds all the code for the module attached to it.

Useful Resources & Links
+ Styling React Components & Elements
13 lectures 01:05:02

Let me introduce you to this module and explain what you're going to learn.

Module Introduction

What's so interesting about styling? Let me outline some potential pain points and where we'd like some help from React

Outlining the Problem Set

Since everything's JavaScript, it would of course be nice to also get some dynamic styling. Let's explore some options in this lecture.

Setting Styles Dynamically

Not only the styles themselves can be dynamic - the classes we assign could also be. Let's dive into that in this lecture.

Setting Class Names Dynamically

We saw that inline styles have some limitations. Let's find out how we can work around them.

Adding and Using Radium

Radium is an interesting package as we saw. Let's explore how we use it together with Media Queries.

Using Radium for Media Queries
Introducing Styled Components
More on Styled Components
Styled Components & Dynamic Styles
Working with CSS Modules
CSS Modules & Media Queries

Want to dive deeper into CSS Modules? This lecture should be very helpful and provide additional insights into that technique.

More on CSS Modules

This lecture contains some useful resources and links. It also holds all the code for the module attached to it.

Useful Resources & Links
+ Debugging React Apps
7 lectures 20:06

Let me introduce you to this module and to what you're going to learn in it.

Module Introduction

Errors can be frustrating but React actually provides some useful error messages. Let's learn how to interpret them.

Understanding Error Messages

Error messages can be annoying but logical errors are way worse. Learn how to use useful browser tools to find such logical errors.

Finding Logical Errors by using Dev Tools & Sourcemaps

React also has its own dev tools which you may use. Learn how to use them in this lecture.

Working with the React Developer Tools

With React 16, a new feature was added: Error Boundaries. Learn more about it in this lecture.

Using Error Boundaries (React 16+)

Let me wrap this module up and summarize what we learned thus far.

Wrap Up

This lecture contains some useful resources and links. It also holds all the code for the module attached to it.

Useful Resources & Links
+ Diving Deeper into Components & React Internals
33 lectures 02:53:34

Let me introduce you to this module and to what you're going to learn in it.

Module Introduction

Thus far, we haven't spent that much time on the project structure. Let's change that now and optimize it.

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
+ A Real App: The Burger Builder (Basic Version)
42 lectures 03:59:40
About React Hooks

Let me introduce you to this module and its content.

Module Introduction
Planning an App in React - Core Steps

Let's start with the layout and the component tree, a crucial part of a React app design process.

Planning our App - Layout and Component Tree

Knowing the required components, is an important first step. But of course, you need a bit more information before you start working on the app. Learn how to plan the app state in this lecture.

Planning the State
MUST READ: Enabling CSS Modules

The app's planned, time to set the project up! Let's do that together, in this lecture.

Setting up the Project
Creating a Layout Component
Starting Implementation of The Burger Builder Container

A burger is of course all about ingredients, so let's make sure we have a fitting component which we can easily re-use.

Adding a Dynamic Ingredient Component
Adding Prop Type Validation

Having ingredients is nice, but of course not enough for a burger. Let's continue our work on the burger component itself therefore.

Starting the Burger Component

We got ingredients, we got a burger component - time to combine both!

Outputting Burger Ingredients Dynamically

For our app to work correctly, we also need to know how many ingredients our burger has. Let me show you how to get that information.

Calculating the Ingredient Sum Dynamically

Right now, the burger exists but can't be edited. Time to change this by adding some Build Controls.

Adding the Build Control Component

We have multiple ingredients, so we should also have multiple controls!

Outputting Multiple Build Controls

Clicking buttons alone doesn't do much - let's connect the controls to the state in this lecture.

Connecting State to Build Controls

Adding ingredients is an important first step, removing them (without breaking the app!) is another one.

Removing Ingredients Safely

As the burger grows, so should the price. Let's find out how to adjust the price dynamically in this lecture.

Displaying and Updating the Burger Price

People should be able to buy the burger! Let's add a "Buy" button.

Adding the Order Button

Before people really make the purchase, we probably should show them a summary. And why not do that in a modal? Let's add it!

Creating the Order Summary Modal

Having a modal is great, let's now make sure it only shows up (with an animation) when needed.

Showing & Hiding the Modal (with Animation!)
Implementing the Backdrop Component

Inside the modal, we need buttons. To make sure that we don't have to repeat the code for styling them over and over again, let's create a custom <Button /> component.

Adding a Custom Button Component

We got a custom <Button /> component, time to add it to the app, in this lecture.

Implementing the Button Component

One thing's missing in our summary - the price! Let's add it in this lecture.

Adding the Price to the Order Summary

Enough about the BurgerBuilder (for now), let's turn towards navigation and let's start by implementing a toolbar in this lecture.

Adding a Toolbar

A toolbar is nice, a logo would be even nicer. Time to add one!

Using a Logo in our Application

Our application also needs navigation items - re-usable ones if possible. In this lecture, we'll implement them.

Adding Reusable Navigation Items

Not everyone is visiting our app on a desktop - we might have visitors from mobile devices, too. Let's add a responsive side drawer to also help them to navigate around.

Creating a Responsive Sidedrawer

With responsiveness in mind, some adjustments are needed to make the app look good on as many devices as possible.

Working on Responsive Adjustments

Let's continue with the responsive adjustments in this lecture.

More about Responsive Adjustments

The side-drawer should stand out from the background, that's why we'll add a backdrop in this lecture.

Reusing the Backdrop

In order to open the side drawer, a button is needed. Let's add it in this lecture.

Adding a Sidedrawer Toggle Button

We got a side-drawer toggle button, let's now turn it into a more pretty hamburger icon.

Adding a Hamburger Icon

The app is taking shape - let's now have a look at potential fields for improvement.

Improving the App - Introduction
Prop Type Validation
Improving Performance

What about all the component lifecycle methods we learned about, why are we not using more of them? Let me answer this question in this lecture.

Using Component Lifecycle Methods

What about our folder structure? Does it offer room for improvement? Let's explore that question in this lecture.

Changing the Folder Structure

Let me wrap this module up and summarize what we learned thus far.

Wrap Up

This lecture contains some useful resources and links. It also holds all the code for the module attached to it.

Useful Resources & Links
+ Reaching out to the Web (Http / Ajax)
18 lectures 56:25

Let me introduce you to this module and to what you're going to learn in it.

Module Introduction

What does "Accessing Http" mean in React apps, how does it work? This lecture answers these question.

Understanding Http Requests in React
Understanding our Project and Introducing Axios

With the Http library added, it's time to finally make a Http request and reach out to the web!

Creating a Http Request to GET Data

We got data, now it's time to also output it. Learn how to render data to the screen, in this lecture.

Rendering Fetched Data to the Screen

Often, data doesn't have the format you need it to have. Besides server-side transformations (which of course happen outside of the React-world), you may use JavaScript to adjust the data. Let's take a closer look.

Transforming Data

Time for a short Http pause: Let's make a single post selectable, so that we can load detailed data for it.

Making a Post Selectable

When selecting a single post, we also want to fetch data. That should happen without creating an infinite loop though. Learn how that works in this lecture.

Fetching Data on Update (without Creating Infinite Loops)

We fetched a lot of data - it's now time to also send some. Learn how that works in this lecture.

POSTing Data to the Server

Besides POSTing and GETting data, there also are other Http methods you can use with axios. Learn about the DELETE request in this lecture.

Sending a DELETE Request

A little bug was introduced - time to fix it!

Fixing a Bug

What about errors? Http requests don't always succeed, so error handling is important. Let's explore this topic in this lecture.

Handling Errors Locally

Axios offers a neat feature: Interceptors. Learn what's up with them and what you can do with them in this lecture.

Adding Interceptors to Execute Code Globally

We learned how to add interceptors - this lecture now also covers how to get rid of them.

Removing Interceptors

Repeating the same configuration for multiple requests can be pretty annoying. Thankfully, axios makes it easy to define some global defaults as this lecture shows.

Setting a Default Global Configuration for Axios

Another cool feature offered by axios are its "instances". Learn how to create and use them in this lecture.

Creating and Using Axios Instances

Let me wrap this module up and summarize what we covered thus far.

Wrap Up

This lecture contains some useful resources and links. It also holds all the code for the module attached to it.

Useful Resources & Links
+ Burger Builder Project: Accessing a Server
10 lectures 57:04

Let me introduce you to this module and what you're going to learn in it.

Module Introduction
Firebase & The Right Database

We'll use Firebase as a demo backend - simply because it's an easy-to-use backend solution (we don't have to write server-side code with it). Let's set it up in this lecture.

Creating the Firebase Project

Axios instances are very useful as you learned, therefore the goal is to use them in this project. Let's create one!

Creating the Axios Instance

With all the setup finished, the goal now is to store an order on the server. Time to send a POST request with the necessary data.

Sending a POST Request

When working with Http requests, it's a good practice to give the user feedback about the current state. Let's show a spinner whilst the request is on its way!

Displaying a Spinner while Sending a Request
Handling Errors
Retrieving Data from the Backend
Removing Old Interceptors

This lecture contains some useful resources and links. It also holds all the code for the module attached to it.

Useful Resources & Links
  • JavaScript + HTML + CSS fundamentals are absolutely required
  • You DON'T need to be a JavaScript expert to succeed in this course!
  • ES6+ JavaScript knowledge is beneficial but not a must-have
  • NO prior React or any other JS framework experience is required!

This course is fully up-to-date with the latest version of React and includes React Hooks! Of course it will be kept up-to-date in the future :-)


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 ...

  •'re just getting started with frontend/ JavaScript development and only got the JS basics set (no prior React or other framework experience is required!)

  •'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 should you bring to succeed in that course?

  • HTML + CSS + JavaScript knowledge is required. You don't need to be an expert but the basics need to be set

  • NO advanced JavaScript knowledge is required, though you'll be able to move even quicker through the course if you know next-gen JavaScript features like ES6 Arrow functions. A short refresher about the most important next-gen features is provided in the course though.

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!

Who this course is for:
  • Students who want to learn how to build reactive and fast web apps
  • Anyone who's interested in learning an extremely popular technology used by leading tech companies like Netflix
  • Students who want to take their web development skills to the next level and learn a future-proof technology