Development
Web Development
React
Modern React with Redux [2020 Update]
4.6 (56,536 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.
188,053 students enrolled

Modern React with Redux [2020 Update]

Master React v16.6.3 and Redux with React Router, Webpack, and Create-React-App. Includes Hooks!
Bestseller
4.6 (56,536 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.
188,053 students enrolled
Created by Stephen Grider
Last updated 5/2020
English
English [Auto-generated], French [Auto-generated], 9 more
  • German [Auto-generated]
  • Indonesian [Auto-generated]
  • Italian [Auto-generated]
  • Japanese [Auto-generated]
  • Polish [Auto-generated]
  • Portuguese [Auto-generated]
  • Romanian [Auto-generated]
  • Spanish [Auto-generated]
  • Turkish [Auto-generated]
Preview this course
Modern React with Redux [2020 Update]
Current price: $125.99 Original price: $179.99 Discount: 30% off
5 hours left at this price!
Buy now
30-Day Money-Back Guarantee
This course includes
  • 47.5 hours on-demand video
  • 22 articles
  • 1 downloadable resource
  • 6 coding exercises
  • Full lifetime access
  • Access on mobile and TV
  • 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 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
Course content
Expand all 488 lectures 47:32:01
+ – Let's Dive In!
15 lectures 56:48
How to Get Help
Preview 01:01
Important Codepen Info
00:43
Our First App
Preview 10:18
CodePen Solution and Blank White Screen Help
01:27
Critical Questions!
Preview 07:31
Installing Node JS
03:40
Important Update About React App Generation
00:28
Generating a React Project
05:10
Why Create React App?
Preview 05:25
Exploring a Create-React-App Project
04:08
Starting and Stopping a React App
03:36
Javascript Module Systems
07:54
Displaying Content with Functional Components
04:56
Link to Completed Github Repo
00:08
Common Questions About My Environment
00:21
+ – Building Content with JSX
10 lectures 33:18
What is JSX?
05:11
Converting HTML to JSX
05:38
Inline Styling with JSX
03:13
Converting Styling to JSX Format
03:08
Class vs ClassName
02:19
Referencing JS Variables in JSX
02:54
Values JSX Can't Show
05:03
Finding Forbidden Property Names
03:06
Exercise Introduction
01:37
Test Your Knowledge: JSX Interpolation
1 question
JSX Exercise Solution
01:09
+ – Communicating with Props
21 lectures 01:23:52
Three Tenets of Components
02:54
Application Overview
02:50
Semantic UI CDN Link
00:10
Getting Some Free Styling
07:15
Naive Component Approach
04:32
Specifying Images in JSX
06:06
Duplicating a Single Component
01:55
Extracting JSX to New Components
05:01
Component Nesting
06:42
React's Props System
03:42
Passing and Receiving Props
07:05
Passing Multiple Props
03:10
Passing Props - Solutions
06:07
Component Reuse
03:25
Implementing an Approval Card
05:51
Showing Custom Children
05:46
Component Reuse
02:45
Exercise - Props
01:32
Test Your Knowledge: Props
1 question
Props Exercise Solution
02:28
Exercise - Children
02:01
Test Your Knowledge: Children Through Props
1 question
Children Exercise Solution
02:35
+ – Structuring Apps with Class-Based Components
7 lectures 32:47
Class-Based Components
05:16
Application Overview
04:00
Scaffolding the App
05:57
Getting a Users Physical Location
05:56
Resetting Geolocation Preferences
02:33
Handling Async Operations with Functional Components
03:53
Refactoring from Functional to Class Components
05:12
+ – State in React Components
6 lectures 39:10
The Rules of State
06:07
Initializing State Through Constructors
06:16
Updating State Properties
07:43
App Lifecycle Walkthrough
07:05
Handling Errors Gracefully
06:21
Conditionally Rendering Content
05:38
+ – Understanding Lifecycle Methods
16 lectures 01:24:18
Introducing Lifecycle Methods
07:14
Why Lifecycle Methods?
06:35
Refactoring Data Loading to Lifecycle Methods
02:45
Alternate State Initialization
05:20
Passing State as Props
04:19
Determining Season
05:34
Ternary Expressions in JSX
03:39
Showing Icons
04:34
Extracting Options to Config Objects
04:13
Adding Some Styling
09:32
Showing a Loading Spinner
06:19
Specifying Default Props
04:52
Avoiding Conditionals in Render
05:22
Breather and Review
08:16
Class-Based Components
1 question
Exercise Solution - Class-Based Components
02:02
Updating Components with State
1 question
Updating Components with State
03:42
+ – Handling User Input with Forms and Events
14 lectures 01:15:49
App Overview
05:03
Component Design
03:39
Adding Some Project Structure
04:30
Showing Forms to the User
03:53
Adding a Touch of Style
03:41
Creating Event Handlers
07:42
Alternate Event Handler Syntax
02:29
Uncontrolled vs Controlled Elements
03:38
More on Controlled Elements
10:27
Handling Form Submittal
03:43
Understanding 'this' In Javascript
11:27
Solving Context Issues
07:19
Communicating Child to Parent
03:36
Invoking Callbacks in Children
04:42
+ – Making API Requests with React
7 lectures 39:09
Fetching Data
04:30
Axios vs Fetch
04:41
Viewing Request Results
08:16
Handling Requests with Async Await
07:38
Setting State After Async Requests
06:19
Binding Callbacks
02:17
Creating Custom Clients
05:28
+ – Building Lists of Records
5 lectures 21:14
Rendering Lists
02:41
Review of Map Statements
05:40
Rendering Lists of Components
02:54
The Purpose of Keys in Lists
05:32
Implementing Keys in Lists
04:27
+ – Using Ref's for DOM Access
8 lectures 41:09
Grid CSS
06:20
Issues with Grid CSS
04:20
Creating an Image Card Component
05:16
Accessing the DOM with Refs
03:24
Accessing Image Height
07:43
Callbacks on Image Load
02:53
Dynamic Spans
07:18
App Review
03:55
Requirements
  • A Mac or Windows Computer
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.


Who this course is for:
  • Programmers looking to learn React
  • Developers who want to grow out of just using jQuery
  • Engineers who have researched React but have had trouble mastering some concepts
Featured review
Kimberley Kelly
Kimberley Kelly ( 6 courses, 3 reviews )
3 months ago
This course changed how I think about and process code. I have always wanted to try building my own web application and this has given me the confidence to do so! Stephen really goes into great detail to help you gain a deep understanding of challenging concepts while keeping things fresh. I highly recommend this course to anyone.