React Redux React-Router: From Beginner to Paid Professional
4.4 (904 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.
11,599 students enrolled
Wishlisted Wishlist

Please confirm that you want to add React Redux React-Router: From Beginner to Paid Professional to your Wishlist.

Add to Wishlist

React Redux React-Router: From Beginner to Paid Professional

learn React, Redux, React-Router, ECMAScript2015(ES6) by creating many applications such as Todo List, YouTube and Imgur
4.4 (904 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.
11,599 students enrolled
Created by Leonardo Daniel
Last updated 9/2016
Curiosity Sale
Current price: $10 Original price: $20 Discount: 50% off
30-Day Money-Back Guarantee
  • 6.5 hours on-demand video
  • 40 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Building your amazing web applications with React JS and Redux
  • Getting a high-paying job as a front-end developer
  • Getting experience through doing many exercises. Re-enforcing your knowledge of ES6, advanced JavaScript, Redux, React through attempting a lot of quizzes. Practice makes perfect.
  • Becoming familiar with the technologies supporting React, including NPM, Webpack, Babel, and ES6/ES2015.
View Curriculum
  • Anyone with some basic Knowledge of HTML and JavaScript
  • Building many examples such as To do list, YouTube Search API, Imgur Search API...
  • Showing how an application can grow from simple DOM/jQuery app to Redux/React/ES6/React-Router app.
  • 60 lectures (6.5 hours of content) cover the knowledge of ECMAScript 2015(ES6), Redux technology and React framework from basic to advanced levels.
  • There are many exercises and quizzes in each section, which help to re-enforce your knowledge before continuing the next section.
  •  Using visual teaching aids such as mind-mappingcolorful drawings stimulating animations and mockups to help you master even the most challenging concepts of React and Redux. Have you ever struggled for several months to get familiar with a new framework in other courses? Do you wonder why few developers can easily adapt to a new technology while others need to put in so much time and effort? In my course, you will be able to work with Redux-React just after 2 WEEKs. The modern teaching and learning method really helps you realize how you will be able to improve yourself and go through the rest of your IT career more comfortably.
  • You will receive support for whatever questions or issues you may have within 24 HOURS!!!!!


This is a well-organized course. The curriculum has been created in such a way that learning Redux-React has never been so easy! It is divided into 9 sections:

  • The three first sections focus on Redux technology. These sections cover both of basic and advanced knowledge of Redux. You may wonder why I don't focus on the React project first. The reason is that I need to stress that Redux has no relation to React. You can write Redux apps with React, Angular, Ember, jQuery, or vanilla JavaScript. Redux works especially well with frameworks like React and Deku because they let you describe UI as a function of state, and Redux emits state updates in response to actions. These first sections only apply Redux into plain JavaScript and jQuery. Applying Redux into React immediately will cause you feel hard to distinguish between the knowledge of React and the knowledge of Redux.
  • The fourth section focuses on ECMAScript 2015 (ES6). In fact, you can work with a Redux & React application without using ES6. However, an experienced React developer usually tries to apply ES6 as much as possible to make his project much more concise and clear. Getting familiar with ES6 will help you go through the next sections more comfortably.
  • The fifth section focuses on React framework. This section also shows clearly how to use React Developer Tools. It is an Chrome extension which helps debugging and managing React components, component's state and props.
  • The sixth and seventh sections illustrate how to apply Redux technology and ES6 efficiently into an React application. After the 6th section, you will know a basic way to use Redux in a React framework. You will also know how to use Redux Dev Tools. It is an Chrome extension which helps debugging and managing Redux state and action. After the 7th section, you will know how to use "React-Redux" library which is an advanced way to handle interactions between Redux and React, and make your project a lot shorter and concise.
  • The eighth section guides you on how to manipulate URLs with React-Redux-Router library
  •  The last one give more advanced knowledge.


  • React is a JavaScript library for creating user interfaces by Facebook and Instagram. We built React to solve one problem: building large applications with data that changes over time. 
  • So many companies are adopting React.js every day. Some examples of big companies using React are Netflix, Yahoo, Facebook, WhatsApp, Instagram and Atlassian. Mastering React framework and Redux technology will offer you a lot of opportunities for the highest paying jobs


  • Managing state in an application is critical, and is often done haphazardly. Redux provides a state container for JavaScript applications that will help your applications behave consistently.
  •  Redux is an evolution of the ideas presented by Facebook's Flux, avoiding the complexity found in Flux by looking to how applications are built with the Elm language. 
  • Redux is useful for React applications


  • Exploring many features of ECMAScript 2015 (ES6) such as Let, Const, Import, Export, Arrow Functions, Cass, Object Destructuring, Array Destructuring, Spread/Rest Operator, Template Strings, Object.assign().
  • Using many advanced JavaScript features which help make your Redux React project more concise such as, Array.prototype.filter(), Function.prototype.bind().
  • Applying the related technologies supporting React such as "React/Redux Developer Tools, NPM, Webpack, Babel,
  •  Using JSX syntax to make the React project more elegant.

Note again: We're very confident, that is why we are giving you a 30 DAY MONEY BACK GUARANTEE, no questions asked, so make sure to Enroll Now!

Who is the target audience?
  • Programmers who want to work with React & Redux effectively
  • If you need learn Redux in short time for your projects, or for an interview or to launch your own business.
  • If you have a little knowledge of React & Redux and still feeling hard to work with them, this course is absolutely for you. There are a lot of logic drawings which helps you figure out the best way to apply features of React and Redux. Some extensions of chrome will also make you comfortable when working with them.
  • If you want to transfer the React & Redux knowledge to your colleague efficiently, this course can be used as a reference.
  • Do you feel sleepy and lose concentration because only speaking and writing code is available in other courses? Then, you will be interested in the stimulating teaching method in this course. What's more? I respect your precious time so that I spent two months to edit this video course carefully. I also removed all CSS to make every example as concise as possible. I know that CSS styling makes the applications look beautiful, but it may cause examples to become complicated, and disturbing. Using CSS is not helpful for your knowledge in this course at all. All you need is to absorb the large amount of useful knowledge in the shortest time rather than wasting your precious time on something you already know
  • If you are an expert Redux-React developer with extensive knowledge and many years' experience, you may not get a lot out of this course.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
60 Lectures
Basic Redux & plain Javascript
8 Lectures 54:50

explaining a simple application written in normal JavaScript. This application will be converted into Redux technology in the next video.

Preview 03:02

Explaining STORE and STATE which are features of Redux.

- The important relationships of STORE with STATE, DISPATCH, ACTION, REDUCER.

- how to get the properties of Redux STATE object to attach into element's innerHTML.

Preview 06:07

Explaining REDUCER which is another feature of Redux. 

  •          Writing code to show that REDUCER is used to set Default Value for the Redux STATE object

Preview 08:01

1. Explaining STORE.DISPATCH() method and ACTION object which are also features of Redux.

  •          Writing code to demonstrate  that STORE.DISPATCH(ACTION) is used to trigger an update for STATE object. Then, REDUCER function will process updating STATE object based on the ACTION object.

2. Demonstrating how STORE.SUBCRIBE method helps to invoke render() function every time STATE is updated

Preview 10:17

4 questions

giving an exercise to practice using Redux technology. The solution is given at the end of this video.

Preview 03:25

giving a more complicated exercise to practise using Redux technology.

Guiding how to refactor the code to make it suitable for bigger applications.

Giving another exercise to help you work with the new structure efficiently.

Exercise02, Refactoring, Exercise03 - Part 1/2

giving solution for the previous video.

Exercise02, Refactoring, Solution03 - Part 2/2

4 questions
Advanced Redux & plain JavaScript
7 Lectures 49:34

explaining MIDDLEWARE which is an advanced feature of Redux.
There is many kind of middlewares. For example, logger middlware helps to track the information of ACTION and STATE. 


explaining how to configure STORE with many middlewares.

Giving another kind of middleware which is crashReporter. It helps to handle errors.

Many Middlewares

explaining another kind of middleware which is Thunk. It helps to handle asynchronous function such as server APIs.

Thunk Middleware - Part 1/3

writing a fake server API to test the usefulness of the Thunk middleware

Thunk Middleware - Part 2/3

explaining in detail how to use Thunk middleware to know whether the server API is loading or loaded.

Thunk Middleware - Part 3/3

giving an exercise to re-enforce knowledge of Thunk middleware. In this exercise, you need to apply Thunk middleware to  handle the data returned from Imgur API in order to show a list of images on the browser.

Thunk Middleware - Imgur API - Exercise04

solution for the previous video

Thunk Middleware - Imgur API - Solution04
Redux & jQuery
2 Lectures 10:51

converting the current project into jQuery. Helping you understand Redux technology deeply.

Convert to jQuery - Exercise05

solution for the exercise in the previous video

Convert to jQuery - Solution05
Redux & ES6
6 Lectures 41:45

Explaining Arrow Function which is a feature of ES6. It is a shorter syntax of function or method.

Assigning an exercise to help you get familiar to Arrow Function.

ES6 Arrow Function - Exercise06

solution for the exercise in the previous video

ES6 Arrow Function - Solution06

explaining Const, Let which are features of ES6. They are another kind of "var" but have another scoping block.

ES6 Const, Let

explaining Default Parameter and Object.assign() method which are features of ES6.

Default Parameter helps to assign a default value to a parameter of a method  if that parameter is undefined.

Object.assign() helps to clone, update and return its first parameter. The first parameter will be updated based on the next parameters.

ES6 Default Parameter, Object.assign()

assigning an exercise to re-enforce the old knowledge of ES6

ES6 Exercise07

giving solution for the previous video.

ES6 Solution07

1 question
17 Lectures 01:18:26

how to setup environment and run a React application from a boilerplate

Simplest React - Environment Setup

simplifying the current React example to make it easier to explain to you.

Simplest React - simplify the React project

explaining the basic mechanism of React framework. 

Simplest React - core mechanism

talking about JSX syntax which is a combination of HTML syntax and JavaScript syntax.

Simplest React - JSX

explaining the usefulness of Babel and Webpack.

Babel helps to convert JSX and ES6 into ES5

WebPack helps to update information on the browser continuously without clicking "reload" button.

Simplest React - Webpack, Babel

2 questions

explaining the component's State which is a feature of React.

Notice that State object in React is different from State object in Redux. Both of them can be used to represent the information attached to element's innerHTML.

This video shows how to get properties from the Redact State object.


how to update the React State object.

State Continued

introducing React Developer Tools which is an  extension of Chrome. It helps to manage the component State object.

React Developer Tools

1 question

describing "child component" which is an component inside another component. 

Child Component - Part 1/2

Giving another example of Child Component.

Explaining more React DevTool

Child Component - Part 2/2

explaining "Import", "Export Default" which are feature of ES6.

"Import" helps to share information from a file.

"Export Default" helps to get information shared by Import from another file.

ES6 - Import, Export and Export Default - Part 1/2

Introducing another kind of "Export" which is "non-default Export"

ES6 - Import, Export and Export Default - Part 2/2

Introducing "props" which is a feature of React.

"Props" helps to transfer methods, variables from parent components into child components.

Assigning an exercise to help you understand how to use "props" efficiently

Props & Exercise08

giving the solution.

talking more about React DevTools.

Props & Solution08

1 question

illustrating how to use Stateless Function, Array of JSXs which are features of React

Stateless Function, Array of JSXs

using method to make an array of JSX in order to show list of images on the browser.

creating an Array of JSXs by

explaining Key of List Item

Key of List Item

1 question
Redux & React: Basic
8 Lectures 50:21

inserting the Redux technology from the old project into the current React project.

Step 1 - Insert Redux - Part 1/3

comparing State object in Redux with State object in React: how to get their properties, how to set their default values and how to update them.

Step 1 - Insert Redux - Part 2/3

solving some errors.

Step 1 - Insert Redux - Part 3/3

1 question

Step 2 - Replace 'Component State' by 'Redux State'

introducing Redux DevTools, which is an extension of Chrome.

Reux DevTools helps developers to observe State and Props in Chrome

Redux DevTools

Object Destructuring is a feature of ES6 which helps to extract data from objects into distinct variables.

ES6 - Object Destructuring & Exercise09

ES6 - Shorthand Property Names

ES6 - Spread Operator

1 question
Redux & React: Advanced
6 Lectures 38:41

Introducing the second way to apply Redux Technology into React applications. 

Explaining Provider component and Connect() method which are features of "react-redux" library. They help to handle interaction between Redux and React effectively.

Provider component, Connect() method - Part 1/2

Provider component, Connect() method - Part 2/2

a shorter syntax for using Connect() method

Connect() method: Advanced

doing an exercise to practice using "Redux-Thunk" and "Redux-Logger" libraries 

Exercise01: Redux-Thunk & Redux-Logger libraries

doing an exercise to practice using combineReducers() method which is from "redux" library

Exercise02: combineReducers() method

doing an exercise to practice using containers

Exercise03: Containers
2 Lectures 18:34

applying "React-Router" and "React-Router-Redux" to manipuluate URLs

React-Router - Part 1/2

  • using IndexRoute for homepage.
  • Applying ES6 Destructuring in function parameters
  • explaining this.props.children
React-Router - Part 2/2
More Examples
4 Lectures 32:45

Show the mockup of Todo List and Youtube API examples. 

Refactoring the structure of the project to make it suitable for a bigger application.

Refactoring - Part 1/2

Refactoring - Part 2/2

using Todo List example to explain:

  • propTypes is a feature of React which helps for props validation
  • Array.prototype.filter() method which is an advanced JavaScript.
  • Applying JSX Spread Attributes which is a shorter syntax of JSX to transfer methods, variables from parent components into child components.
  • Guide how to refactor React Components to ES6 Classes
Todo List - propTypes, Array.prototype.filter() method, JSX Spread Attributes

1 question

using Youtube example to explain: 
  • Template Strings which is a feature of ES6
  • Function.prototype.bind() which is an advanced Javascript
Youtube API - ES6 Template Strings, Function.prototype.bind() method
About the Instructor
Leonardo Daniel
4.4 Average rating
903 Reviews
11,599 Students
1 Course
A Full-stack Developer & Trainer

5 years of experience in web development, 3 years of experience in training, and 1 year in game development. I have a strong background in designing code structure and know how to learn and teach the largest amount of information in the shortest possible time.

I have worked with many languages and frameworks such as Java (struts, spring), C++ (game development), Android (game development) and JavaScript (Nodejs, Angular, React...). In each area, I just need a very short time to learn before working well with it. The reason I can learn quickly and efficiently is because I know how to apply many modern learning techniques such as mind-mapping, note-taking tools, colorful drawing and how to choose the best keywords when researching solutions on Google.

I put all of my experience into my courses to help you reduce time and effort in learning new technologies.