Udemy

Platform

English

Language

Web Development

Category

Modern React with Redux [2020 Update]

Master React v16.6.3 and Redux with React Router, Webpack, and Create-React-App. Includes Hooks!

4.67 (64976 reviews)

221253

Students

52.5 hours

Content

Jan 2021

Last Update
$119.99
Regular Price

What you will learn

Build amazing single page applications with React JS and Redux

Master fundamental concepts behind structuring Redux applications

Realize the power of building composable components

Be the engineer who explains how Redux works to everyone else, because you know the fundamentals so well

Become fluent in the toolchain supporting React, including NPM, Webpack, Babel, and ES6/ES2015 Javascript syntax




Description

Course Last Updated for React v16.6.3 and Redux v4.0.1!  All content is brand new!  Update includes detailed videos on the new React Hooks system.

Congratulations!  You've found the most popular, most complete, and most up-to-date resource online for learning React and Redux!

Thousands of other engineers have learned React and Redux, and you can too.  This course uses a time-tested, battle-proven method to make sure you understand exactly how React and Redux work, and will get you a new job working as a software engineer or help you build that app you've always been dreaming about.

The difference between this course and all the others: you will understand the design patterns used by top companies to build massively popular web apps.

React is the most popular Javascript library of the last five years, and the job market is still hotter than ever.  Companies large and small can't hire engineers who understand React and Redux fast enough, and salaries for engineers are at an all time high.  It's a great time to learn React!

----------------------

What will you build?

This course features hundreds of videos with dozens of custom diagrams to help you understand how React and Redux work.  No prior experience with either is necessary. Through tireless, patient explanations and many interesting practical examples, you'll learn the fundamentals of building dynamic and live web apps using React.

Each topic included in this course is added incrementally, to make sure that you have a solid foundation of knowledge.  You'll find plenty of discussion added in to help you understand exactly when and where to use each feature of React and Redux.

My guarantee to you: there is no other course online that teaches more features of React and Redux.  This is the most comprehensive resource there is.


Below is a partial list of the topics you'll find in this course:

  • Master the fundamental features of React, including JSX, state, and props

  • From square one, understand how to build reusable components

  • Dive into the source code of Redux to understand how it works behind the scenes

  • Test your knowledge and hone your skills with numerous coding exercises

  • Integrate React with advanced browser features, even geolocation API's!

  • Use popular styling libraries to build beautiful apps

  • Master different techniques of deployment so you can show off the apps you build!

  • See different methods of building UI's through composition of components


Besides just React and Redux, you'll pick up countless other tidbits of knowledge, including ES2015 syntax, popular design patterns, even the clearest explanation of the keyword 'this' in Javascript that you'll ever hear.

This is the course I wanted to take when I first learned React: complete, up-to-date, and clear.



Screenshots

Modern React with Redux [2020 Update]
Modern React with Redux [2020 Update]
Modern React with Redux [2020 Update]
Modern React with Redux [2020 Update]

Content

Let's Dive In!

How to Get Help

Important Codepen Info

Our First App

CodePen Solution and Blank White Screen Help

Critical Questions!

Installing Node JS

Important Update About React App Generation

Generating a React Project

Why Create React App?

Exploring a Create-React-App Project

Starting and Stopping a React App

Javascript Module Systems

Displaying Content with Functional Components

Link to Completed Github Repo

Common Questions About My Environment

Building Content with JSX

What is JSX?

Converting HTML to JSX

Inline Styling with JSX

Converting Styling to JSX Format

Class vs ClassName

Referencing JS Variables in JSX

Values JSX Can't Show

Finding Forbidden Property Names

Exercise Introduction

Test Your Knowledge: JSX Interpolation

JSX Exercise Solution

Communicating with Props

Three Tenets of Components

Application Overview

Getting Some Free Styling

Naive Component Approach

Specifying Images in JSX

Duplicating a Single Component

Extracting JSX to New Components

Component Nesting

React's Props System

Passing and Receiving Props

Passing Multiple Props

Passing Props - Solutions

Component Reuse

Implementing an Approval Card

Showing Custom Children

Component Reuse

Exercise - Props

Test Your Knowledge: Props

Props Exercise Solution

Exercise - Children

Test Your Knowledge: Children Through Props

Children Exercise Solution

Structuring Apps with Class-Based Components

Class-Based Components

Application Overview

Scaffolding the App

Getting a Users Physical Location

Resetting Geolocation Preferences

Handling Async Operations with Functional Components

Refactoring from Functional to Class Components

State in React Components

The Rules of State

Initializing State Through Constructors

Updating State Properties

App Lifecycle Walkthrough

Handling Errors Gracefully

Conditionally Rendering Content

Understanding Lifecycle Methods

Introducing Lifecycle Methods

Why Lifecycle Methods?

Refactoring Data Loading to Lifecycle Methods

Alternate State Initialization

Passing State as Props

Determining Season

Ternary Expressions in JSX

Showing Icons

Extracting Options to Config Objects

Adding Some Styling

Showing a Loading Spinner

Specifying Default Props

Avoiding Conditionals in Render

Breather and Review

Class-Based Components

Exercise Solution - Class-Based Components

Updating Components with State

Updating Components with State

Handling User Input with Forms and Events

App Overview

Component Design

Adding Some Project Structure

Showing Forms to the User

Adding a Touch of Style

Creating Event Handlers

Alternate Event Handler Syntax

Uncontrolled vs Controlled Elements

More on Controlled Elements

Handling Form Submittal

Understanding 'this' In Javascript

Solving Context Issues

Communicating Child to Parent

Invoking Callbacks in Children

Making API Requests with React

Fetching Data

Axios vs Fetch

Viewing Request Results

Handling Requests with Async Await

Setting State After Async Requests

Binding Callbacks

Creating Custom Clients

Building Lists of Records

Rendering Lists

Review of Map Statements

Rendering Lists of Components

The Purpose of Keys in Lists

Implementing Keys in Lists

Using Ref's for DOM Access

Grid CSS

Issues with Grid CSS

Creating an Image Card Component

Accessing the DOM with Refs

Accessing Image Height

Callbacks on Image Load

Dynamic Spans

App Review

Let's Test Your React Mastery!

App Overview

Component Design

Scaffolding the App

Reminder on Event Handlers

Handling Form Submittal

Accessing the Youtube API

Axios Version Bug & 400 "Required Parameter: part" Error

Searching for Videos

Adding a Video Type

Putting it All Together

Updating State with Fetched Data

Passing State as Props

Rendering a List of Videos

Rendering Video Thumbnails

Styling a List

Communicating from Child to Parent

Deeply Nested Callbacks

Conditional Rendering

Styling the VideoDetail

Displaying a Video Player

Fixing a Few Warnings

Defaulting Video Selection

On We Go...To Redux!

Introduction to Redux

Redux by Analogy

A Bit More Analogy

Finishing the Analogy

Mapping the Analogy to Redux

Modeling with Redux

Creating Reducers

Rules of Reducers

Testing Our Example

Important Redux Notes

Integrating React with Redux

React Cooperating with Redux

React, Redux, and...React-Redux!?

Design of the Redux App

How React-Redux Works

Redux Project Structure

Named vs Default Exports

Building Reducers

Wiring Up the Provider

The Connect Function

Configuring Connect with MapStateToProps

Building a List with Redux Data

Calling Action Creators from Components

Redux is Not Magic!

Functional Components with Connect

Conditional Rendering

Connecting Components to Redux

Exercise Solution - Connecting Components to Redux

Async Actions with Redux Thunk

App Overview and Goals

Initial App Setup

Tricking Redux with Dummy Reducers

A Touch More Setup

How to Fetch Data in a Redux App

Wiring Up an Action Creator

Making a Request From an Action Creator

Understanding Async Action Creators

More on Async Action Creators

Middlewares in Redux

Behind the Scenes of Redux Thunk

Shortened Syntax with Redux Thunk

Redux Store Design

Rules of Reducers

Return Values from Reducers

Argument Values

Pure Reducers

Mutations in Javascript

Equality of Arrays and Objects

A Misleading Rule

Safe State Updates in Reducers

Switch Statements in Reducers

Dispatching Correct Values

List Building!

Displaying Users

Fetching Singular Records

Displaying the User Header

Finding Relevant Users

Extracting Logic to MapStateToProps

That's the Issue!

Memoizing Functions

Memoization Issues

One Time Memoization

Alternate Overfetching Solution

Action Creators in Action Creators!

Finding Unique User Ids

Quick Refactor with Chain

App Wrapup

Navigation with React Router

App Outline

Mockups in Detail

App Challenges

Initial Setup

Introducing React Router

How React Router Works

How Paths Get Matched

How to *Not* Navigate with React Router

Navigating with React Router

[Optional] - Different Router Types

Component Scaffolding

Wiring Up Routes

Always Visible Components

Connecting the Header

Links Inside Routers

Handling Authentication with React

OAuth-Based Authentication

OAuth for Servers vs Browser Apps

Creating OAuth Credentials

Wiring Up the Google API Library

Sending a User Into the OAuth Flow

Rendering Authentication Status

Updating Auth State

Displaying Sign In and Sign Out Buttons

On-Demand Sign In and Sign Out

Redux Architecture Design

Redux Setup

Connecting Auth with Action Creators

Building the Auth Reducer

Handling Auth Status Through Redux

Fixed Action Types

Recording the User's ID

Redux Dev Tools

Using Redux Dev Tools to Inspect the Store

Debug Sessions with Redux Dev Tools

Handling Forms with Redux Form

Forms with Redux Form

Useful Redux Form Examples

Connecting Redux Form

Creating Forms

Automatically Handling Events

Customizing Form Fields

Handling Form Submission

Validation of Form Inputs

Displaying Validation Messages

Showing Errors on Touch

Highlighting Errored Fields

REST-Based React Apps

Creating Streams

REST-ful Conventions

Setting Up an API Server

Creating Streams Through Action Creators

Creating a Stream with REST Conventions

Dispatching Actions After Stream Creation

Bulk Action Creators

Object-Based Reducers

Key Interpolation Syntax

Handling Fetching, Creating, and Updating

Deleting Properties with Omit

Merging Lists of Records

Fetching a List of All Streams

Rendering All Streams

Associating Streams with Users

Conditionally Showing Edit and Delete

Linking to Stream Creation

When to Navigate Users

History References

History Object Deprecation Warning

Creating a Browser History Object

Implementing Programmatic Navigation

Manually Changing API Records

URL-Based Selection

Wildcard Navigation

More on Route Params

Selecting Records from State

Component Isolation with React Router

Fetching a Stream for Edit Stream

Real Code Reuse!

Refactoring Stream Creation

Setting Initial Values

Avoiding Changes to Properties

Edit Form Submission

PUT vs PATCH Requests

Using React Portals

Why Use Portals?

More on Using Portals

Creating a Portal

Hiding a Modal

Making the Modal Reusable

React Fragments

OnDismiss From the Parent

Reminder on Path Params

Fetching the Deletion Stream

Conditionally Showing Stream Details

Deleting a Stream

Implementing Streaming Video

Viewing a Stream

Switches with React-Router

Showing a Stream

RTMP NodeMediaServer is not a constructor error fix

RTMP Server Setup

OBS Installation

OBS Scene Setup

Video Player Setup

Implementing FLV JS

Creating a FLV Player

Optional Player Building

It Works!

Cleaning Up with ComponentWillUnmount

The Context System with React

The Context System

An App with Context

App Generation

Selecting a Language

A Touch More Setup

Getting Data Out of Context

Creating Context Objects

Consuming the Context Value

The Context Provider

Gotchas Around Providers

Accessing Data with Consumers

Pulling From Multiple Contexts

Replacing Redux with Context

Replacing Redux with Context?

Creating a Store Component

Implementing a Language Store

Rendering the Language Store

Connecting the Selector to the Store

Connecting the Field and Button to the Store

Context vs Redux Recap

Hooks with Functional Components

Introducing Hooks

App Overview

Building Stateful Class Components

The UseState Hook

UseState in Detail

Building the ResourceList

Fetching a Given Resource

ComponentDidUpdate vs ComponentDIdMount

Refactoring a Class to a Function

Lifecycles with UseEffect

Updates with UseEffect

Does It Get Called?

Quick Gotcha with UseEffect

Rendering a List

Actual Code Reuse!

Code Reuse with Hooks

More Fun with Hooks

Weather Hooks

Project Zip

App Overview

Refactoring a Class to a Function

Extracting Reusable Logic

That's All For Now

[Legacy] An Intro to React

Introduction - Github Links for Project Files!

Completed Projects - Github Links

The Purpose of Boilerplate Projects

Environment Setup

Project Setup

Support for Create React App

A Taste of JSX

More on JSX

Quick Note - Getting Different Error Messages

ES6 Import Statements

ReactDOM vs React

Differences Between Component Instances and Component Classes

Render Targets

Component Structure

Youtube Search API Signup

Export Statements

Class-Based Components

Handling User Events

Introduction to State

More on State

Controlled Components

Breather and Review

[Legacy] Ajax Requests with React

Youtube Search Response

Refactoring Functional Components to Class Components

Props

Building Lists with Map

List Item Keys

Video List Items

Detail Component and Template Strings

Handling Null Props

Video Selection

Styling with CSS

Searching for Videos

Throttling Search Term Input

React Wrapup

[Legacy] Modeling Application State

Foreword on Redux

What is Redux?

More on Redux

Even More on Redux!

[Legacy] Managing App State with Redux

Putting Redux to Practice

Reducers

Containers - Connecting Redux to React

Containers Continued

Implementation of a Container Class

Containers and Reducers Review

Actions and Action Creators

Binding Action Creators

Creating an Action

Consuming Actions in Reducers

Consuming Actions in Reducers Continued

Conditional Rendering

Reducers and Actions Review

[Legacy] Intermediate Redux: Middleware

App Overview and Planning

Component Setup

Controlled Components and Binding Context

Form Elements in React

Working with API's

Introduction to Middleware

Ajax Requests with Axios

Redux-Promise in Practice

Redux-Promise Continued

Avoiding State Mutations in Reducers

Building a List Container

Mapping Props to a Render Helper

Adding Sparkline Charts

Making a Reusable Chart Component

Labeling of Units

Google not Defined Errors

Google Maps Integration

Google Maps Integration Continued

Project Review

[Legacy] React Router + Redux Form v6

App Overview and Goals

Posts API

Quick Note

Installing React Router

What React Router Does

The Basics of React Router

Route Design

Our First Route Definition

State as an Object

Back to Redux - Index Action

Implementing Posts Reducer

Action Creator Shortcuts

Rendering a List of Posts

Creating New Posts

A React Router Gotcha

Navigation with the Link Component

Redux Form

Setting Up Redux Form

The Field Component

Generalizing Fields

Validating Forms

Showing Errors to Users

Handling Form Submittal

Form and Field States

Conditional Styling

More on Navigation

Create Post Action Creator

Navigation Through Callbacks

The Posts Show Component

Receiving New Posts

Selecting from OwnProps

Data Dependencies

Caching Records

Deleting a Post

Wrapup

[Legacy - Do Not Take] Bonus - RallyCoding

Basics of Redux Thunk

Combining Redux and Firebase

Dynamic Forms with Redux Form

Logicless Components with Reselect

Data Loading Methods with Redux

Animation of React Components

The Best Way to Store Redux Data

Four Most Common Errors with React and Redux

Modals in React and Redux Apps

Deployment of React/Webpack Apps

BrowserHistory in Production

React Integration with 3rd Party Libraries

Introducing JSPlaygrounds for Rapid Prototyping

[Legacy - Do Not Take] React Router + Redux Form v4

Important Note - Do Not Skip!

App Overview and Goals

Exploring the Posts Api

Installing React Router

React Router - What is It?

Setting Up React Router

Route Configuration

Nesting Of Routes

IndexRoutes with React Router

Back To Redux - Index Action

Catching Data with Posts Reducer

Catching Data with Posts Reducer Continued

Fetching Data with Lifecycle Methods

Fetching Data with Lifecycle Methods Continued

Creating New Posts

Navigation with the Link Component

Forms and Form Submission

More on Forms and Form Submission

Passing Control to Redux Form

CreatePost Action Creator

Form Validation

Form Validation Continued

Navigating on Submit

Posts Index

Dynamic Route Params

Loading Data on Render

Handling Null Props

Delete Action Creator

Navigate on Delete

ReactRouter and ReduxForm Wrapup

Extras

Bonus!



Reviews

M
Michael9 October 2020

This is My Second React Course that I have taken. This one Was WAYYYYYY Better than the last One. The reason being he spent time with diagrams / charts and detailed explanations of how React and ReactDOM work before getting into other detail. This cleared up all the confusion I was having. Very good course. https://www.udemy.com/course/react-the-complete-guide-incl-redux/learn/lecture/13914110#overview was the course I bought. I would recommend this course over the one above

N
Niall9 October 2020

Stephen is an experienced teacher. The coarse starts with the basics, requiring almost no prior experience with JS or React, yet quickly and efficiently builds in complexity. The lessons are pragmatic, yet layered with theory and real-world experience; he explains both the right and wrong way of doing things and hammers it in with repetition. It really includes everything, even free-tier hosting to help get your portfolio started. Highly recommended, I look forward to Stephen's other classes!

J
Jamie8 October 2020

Yes, THIS is how I learn. I had tried free code camp but felt stuck and not learning. This is a good balance of explanation, showing you how and then making you do the work!

D
DANIEL8 October 2020

Good focus on the high level component data path. Some of the alpha commentary was boorish. Good flow charts and straight forward explanation.

A
Arthur8 October 2020

Primeira vez que eu to dando a nota antes do fim do curso (só 40% completo). To fazendo isso, primeiro, pq o curso é muito longo, então já deu pra eu avaliar bem e, segundo, pq é de longe o melhor curso que fiz na udemy até agora. O curso é praticamente perfeito.

M
Miroslav26 February 2020

I like that everything is explained from theoretical perspective with diagrams besides presenting the code implementation.

M
Modupe25 February 2020

This course has helped clarify many confusing React concepts. The explanations are very good and relatively easy to comprehend.

D
Dhiren23 February 2020

Very professional and organised way of teaching . The best instructor that I have come acros so far !

P
Pavel21 February 2020

Cool examples, great teaching approach. Very useful and actual basic toolbox for start in React/Redux learning journey.

A
Abdullah20 February 2020

this course need so much update , it is explain about classes most of the time , and a little about hooks , I like that there is many projects in course , but maybe it is better to separate theory from projects ,the instructor repeat things many many times in an exaggerated way , make you feel of wasting time , I think if you remove the repeating and unneeded parts , this course will be about 15 hours

I
Ioana20 February 2020

this course could be at least 25% shorter. sometimes there are unnecessary explanations to very obvious things which can rapidly become annoying

H
Houman20 February 2020

3 years ago I took Elixir course from Master Grider, and I landed 6 figure contract per year (3rd highest tax bracket in Australia) for 3 years. Now, Contract is finished. I am learning Redux and React now, and then the Advance one. I have bought so many other React courses none of them are as detailed as this one. Thank you Master Grider for being such a great teacher and well done.

M
Matthias18 February 2020

This course contains so much more Information about the basics you need to work with react then I've expected. Also Stephen is a great teacher. You wont find such a well formulated, clean and clear to understand Tutorial that easy. Not a single "hmm" or "er". Just fluently speaking about the topic making almost no single mistake. 11/10 would watch again!

H
Hani18 February 2020

I like the contents of this course. I recommend it for beginner like me or an intermediate level learner. Also, the instructor breaks the contents into simple and easier to understand sessions. Also, he frequently points out the parts that any developer might miss easily during the sessions so the audience pay attention to them later. I love it.

J
Jack17 February 2020

Great Teacher. I started on his Full Stack course, and just wanted to refresh on Redux/React and this course has been perfect. Learning more than I learned in 2 other courses. Very grateful to have found this, highly recommend it. Thanks!


Coupons

StatusDateDiscount
Expired11/21/201993% OFF
Expired1/2/202191% OFF
Expired1/15/202193% OFF


705264

Udemy ID

12/23/2015

Course created date

8/3/2019

Course Indexed date
Bot
Course Submitted by

Twitter
Telegram
Android PlayStore
Apple Appstore