Modern React with Redux
4.7 (11,748 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
39,068 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Modern React with Redux to your Wishlist.

Add to Wishlist

Modern React with Redux

Master the fundamentals of React and Redux with this tutorial as you develop apps supported by NPM, Webpack, and ES6
Bestselling
4.7 (11,748 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
39,068 students enrolled
Created by Stephen Grider
Last updated 4/2017
English
Current price: $10 Original price: $180 Discount: 94% off
1 day left at this price!
30-Day Money-Back Guarantee
Includes:
  • 18 hours on-demand video
  • 7 Articles
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I 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
View Curriculum
Requirements
  • A Mac or PC
Description

Course Last Updated 4/24/17 for React Router v4 and Redux Form v6!

This is the tutorial you've been looking for to master modern web development with React.

Redux? We got it. ES6/Babel? Covered. Webpack? Included!

Mastering React and Redux can get you a position in web development or help you build that personal project you've been dreaming of. It's a skill that will put you more in demand in the modern web development industry, especially with the release of Redux and ReactNative.

This course will get you up and running quickly, and teach you the core knowledge you need to deeply understand and build React components and structure applications with Redux.

We'll start by mastering the fundamentals of React, including JSX, “props", “state", and eventing. Source code is provided for each lecture, so you will always stay up-to-date with the course pacing. After an introduction to React, we'll dive right in to Redux, covering topics like reducers, actions, and the state tree.

If you are new to React and Redux, or if you've been working to learn it but sometimes feel like you still don't quite 'get it', this is the React course for you! To learn React you have to understand it.

  • Learn how to use React's custom markup language, JSX, to clean up your Javascript code
  • Master the process of breaking down a complex component into many smaller, interchangeable components
  • Grasp the difference between “props" and “state" and when to use each
  • Develop complex applications that scale in complexity by mastering Redux
  • Dive deeper into Redux by using middlewares. No fancy terms required!

I've built the course that I would have wanted to take when I was learning React and Redux. A course that explains the concepts and how they're implemented in the best order for you to learn and deeply understand them.

Who is the target audience?
  • 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
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 148 Lectures Collapse All 148 Lectures 26:28:14
+
An Intro to React
20 Lectures 01:46:07

Completed Projects - Github Links
00:04




A Taste of JSX
11:29

More on JSX
04:35

ES6 Import Statements
03:58

ReactDOM vs React
02:26

Differences Between Component Instances and Component Classes
03:38

Render Targets
05:53

Component Structure
06:26

Youtube Search API Signup
06:39

Export Statements
08:40

Class-Based Components
08:11

Handling User Events
09:30

Introduction to State
05:13

More on State
06:04

Controlled Components
07:47

Breather and Review
03:37
+
Ajax Requests with React
13 Lectures 01:24:53
Youtube Search Response
04:26

Refactoring Functional Components to Class Components
07:43

Props
07:42

Building Lists with Map
07:06

List Item Keys
03:54

Video List Items
07:53

Detail Component and Template Strings
07:05

Handling Null Props
04:41

Video Selection
11:39

Styling with CSS
03:43

Searching for Videos
07:51

Throttling Search Term Input
05:46

React Wrapup
05:24
+
Modeling Application State
4 Lectures 13:02
Foreword on Redux
02:16

What is Redux?
02:45

More on Redux
03:42

Even More on Redux!
04:19
+
Managing App State with Redux
13 Lectures 01:22:13
Putting Redux to Practice
00:15

Reducers
07:43

Containers - Connecting Redux to React
07:23

Containers Continued
04:00

Implementation of a Container Class
10:45

Containers and Reducers Review
04:09

Actions and Action Creators
07:31

Binding Action Creators
09:41

Creating an Action
06:45

Consuming Actions in Reducers
07:16

Consuming Actions in Reducers Continued
05:05

Conditional Rendering
06:38

Reducers and Actions Review
05:02
+
Intermediate Redux: Middleware
18 Lectures 02:29:00
App Overview and Planning
05:10

Component Setup
07:57

Controlled Components and Binding Context
09:56

Form Elements in React
06:28

Working with API's
08:12

Introduction to Middleware
07:27

Ajax Requests with Axios
13:02

Redux-Promise in Practice
10:15

Redux-Promise Continued
10:55

Avoiding State Mutations in Reducers
09:53

Building a List Container
06:53

Mapping Props to a Render Helper
06:07

Adding Sparkline Charts
09:54

Making a Reusable Chart Component
06:00

Labeling of Units
10:37

Google Maps Integration
07:59

Google Maps Integration Continued
07:16

Project Review
04:59
+
React Router + Redux Form
30 Lectures 03:15:25
Important Note - Do Not Skip!
00:16

App Overview and Goals
06:49

Exploring the Posts Api
13:26

Installing React Router
02:35

React Router - What is It?
05:33

Setting Up React Router
04:39

Route Configuration
05:16

Nesting Of Routes
08:02

IndexRoutes with React Router
05:04

Back To Redux - Index Action
05:50

Catching Data with Posts Reducer
06:29

Catching Data with Posts Reducer Continued
02:38

Fetching Data with Lifecycle Methods
05:43

Fetching Data with Lifecycle Methods Continued
06:50

Creating New Posts
05:23

Navigation with the Link Component
04:25

Forms and Form Submission
10:12

More on Forms and Form Submission
07:37

Passing Control to Redux Form
07:51

CreatePost Action Creator
11:21

Form Validation
08:28

Form Validation Continued
08:51

Navigating on Submit
12:37

Posts Index
04:31

Dynamic Route Params
07:09

Loading Data on Render
05:45

Handling Null Props
05:31

Delete Action Creator
07:07

Navigate on Delete
02:25

ReactRouter and ReduxForm Wrapup
07:02
+
Bonus - RallyCoding
13 Lectures 03:14:15
Basics of Redux Thunk
07:16

Combining Redux and Firebase
12:16

Dynamic Forms with Redux Form
14:42

Logicless Components with Reselect
18:08

Data Loading Methods with Redux
09:29

Animation of React Components
12:33

Four Most Common Errors with React and Redux
12:02

Modals in React and Redux Apps
18:43

The Best Way to Store Redux Data
15:05

BrowserHistory in Production
19:46

Introducing JSPlaygrounds for Rapid Prototyping
12:18

Deployment of React/Webpack Apps
23:15

React Integration with Third Party Libraries
18:42
+
More to Come!
2 Lectures 11:20:00
Still want more React?
00:26

This is the 15.3 source to React, posted here for resolving a tech issue.  You probably do not need this unless I tell you to check it out.

React Source
11:19:33
+
React Router + Redux Form
35 Lectures 04:08:24
Important Note
00:08

Posts API
09:20

Quick Note
00:17

Installing React Router
03:00

What React Router Does
05:36

The Basics of React Router
08:58

Route Design
06:31

Our First Route Definition
05:57

State as an Object
09:07

Back to Redux - Index Action
07:07

Implementing Posts Reducer
10:29

Action Creator Shortcuts
08:06

Rendering a List of Posts
09:19

Creating New Posts
05:42

A React Router Gotcha
04:44

Navigation with the Link Component
05:58

Redux Form
05:33

Setting Up Redux Form
09:27

The Field Component
10:49

Generalizing Fields
08:54

Validating Forms
10:31

Showing Errors to Users
04:30

Handling Form Submittal
09:30

Form and Field States
06:06

Conditional Styling
07:06

More on Navigation
03:11

Create Post Action Creator
10:05

Navigation Through Callbacks
07:31

The Posts Show Component
03:39

Receiving New Posts
09:26

Selecting from OwnProps
11:27

Data Dependencies
05:32

Caching Records
06:13

Deleting a Post
09:25

Wrapup
09:10
About the Instructor
Stephen Grider
4.7 Average rating
26,443 Reviews
63,203 Students
10 Courses
Engineering Architect

Stephen Grider has been building complex Javascript front ends for top corporations in the San Francisco Bay Area. With an innate ability to simplify complex topics, Stephen has been mentoring engineers beginning their careers in software development for years, and has now expanded that experience onto Udemy, authoring the highest rated React course. He teaches on Udemy to share the knowledge he has gained with other software engineers. Invest in yourself by learning from Stephen's published courses.