Hackr.io is a community to find and share the best online courses & tutorials. Join them, it only takes 30 seconds.

Here's how it works:


Anybody can submit a course or a tutorial


Community upvotes the useful tutorials


The best tutorials rise to the top

Modern React with Redux (udemy.com)

Visit Tutorial
My Courses
Paid Video Beginner Trending
#5 out of total 53 React tutorials & courses

Why developers like this tutorial (one-liner reviews):

Content quality

Qualified Instructor

Video quality

Course Pace

Course depth and Coverage

Add your one-liner review here:

Tutorial Info

Self Paced
18 hours on-demand video
Available On Completion
Taught by:
Submitted by:
Visit Tutorial

Tutorial Details

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


  • A Mac or Windows Computer



Course Last Updated 4/30/18 for React v16.3.2 and Redux v4.0.0!

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


An Intro to React

Introduction - Github Links for Project Files!

Completed Projects - Github Links

The Purpose of Boilerplate Projects

Environment Setup

Project Setup

A Taste of JSX

More on JSX

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

Ajax Requests with React

Youtube Search Response

Refactoring Functional Components to Class Components


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

Modeling Application State

Foreword on Redux

What is Redux?

More on Redux

Even More on Redux!

Managing App State with Redux

Putting Redux to Practice


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

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 Maps Integration

Google Maps Integration Continued

Project Review

React Router + Redux Form

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



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] React Router + Redux Form

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

Discuss this tutorial:

Ask a question or write your feedback/review of this course or tell anything to the people taking this course.

1 year ago

straight forward, hands-on, valuable experience;

More React Tutorials