Modern React with Redux

Master the fundamentals of React and Redux with this tutorial as you develop apps supported by NPM, Webpack, and ES6
4.7 (6,870 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.
21,265 students enrolled Bestselling in React
$19
$180
89% off
Take This Course
  • Lectures 112
  • Length 22.5 hours
  • Skill Level All Levels
  • Languages English, captions
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 12/2015 English Closed captions available

Course Description

New content all the time!  Last course update: November 11, 2016!

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.

What are the requirements?

  • A Mac or PC

What am I going to get from this course?

  • 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

What 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

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: An Intro to React
Introduction - Github Links for Project Files!
Preview
03:38
Completed Projects - Github Links
Article
The Purpose of Boilerplate Projects
Preview
03:41
Environment Setup
Preview
01:45
Project Setup
Preview
02:53
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
Section 2: Ajax Requests with React
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
Section 3: Modeling Application State
Foreword on Redux
02:16
What is Redux?
02:45
More on Redux
03:42
Even More on Redux!
04:19
Section 4: Managing App State with Redux
Putting Redux to Practice
Article
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
Section 5: Intermediate Redux: Middleware
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
13:02
Google Maps Integration Continued
06:06
Project Review
04:59
Section 6: React Router + Redux Form
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

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Stephen Grider, 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.

Ready to start learning?
Take This Course