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.62 (101400 reviews)

344968

Students

40.5 hours

Content

Jan 2021

Last Update
$124.99
Regular Price

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 React Hooks & Class-based Components




Description

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

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


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

StatusDateDiscount
Expired5/27/201992% OFF
Expired7/19/201994% OFF
Expired11/11/201993% OFF
Expired11/29/202091% OFF
Expired12/17/202093% OFF


1362070

Udemy ID

9/27/2017

Course created date

5/27/2019

Course Indexed date
Bot
Course Submitted by

Twitter
Telegram
Android PlayStore
Apple Appstore