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
English
English
Curiosity Sale
Current price: $10 Original price: $20 Discount: 50% off
30-Day Money-Back Guarantee
Includes:
  • 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
Requirements
  • Anyone with some basic Knowledge of HTML and JavaScript
Description
  • 30 DAY MONEY BACK GUARANTEE!
  • 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!!!!!



HOW IS THE COURSE STRUCTURED?

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.


WHY REACT?

  • 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


WHY REDUX?

  • 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


WHAT'S MORE?

  • 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.map(), 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
06:15:47
+
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

Redux
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
11:55

giving solution for the previous video.

Exercise02, Refactoring, Solution03 - Part 2/2
02:55

Redux
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. 

Middleware
08:08

explaining how to configure STORE with many middlewares.

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

Many Middlewares
07:49

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

Thunk Middleware - Part 1/3
04:00

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

Thunk Middleware - Part 2/3
06:54

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

Thunk Middleware - Part 3/3
12:34

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
05:20

solution for the previous video

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

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

Convert to jQuery - Exercise05
07:58

solution for the exercise in the previous video

Convert to jQuery - Solution05
02:53
+
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
09:03

solution for the exercise in the previous video

ES6 Arrow Function - Solution06
07:47

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

ES6 Const, Let
06:52

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()
05:45

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

ES6 Exercise07
09:08

giving solution for the previous video.

ES6 Solution07
03:10

ES6
1 question
+
React
17 Lectures 01:18:26

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

Simplest React - Environment Setup
07:02

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

Simplest React - simplify the React project
04:33

explaining the basic mechanism of React framework. 

Simplest React - core mechanism
03:59

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

Simplest React - JSX
02:06

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
02:28

React
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.

State
06:10

how to update the React State object.

State Continued
09:02

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

React Developer Tools
01:36

React
1 question

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

Child Component - Part 1/2
05:24

Giving another example of Child Component.

Explaining more React DevTool

Child Component - Part 2/2
02:06

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
03:46

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

ES6 - Import, Export and Export Default - Part 2/2
03:15

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
06:00

giving the solution.

talking more about React DevTools.

Props & Solution08
01:40

React
1 question

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

Stateless Function, Array of JSXs
07:44

using Array.prototype.map() method to make an array of JSX in order to show list of images on the browser.

creating an Array of JSXs by Array.prototype.map()
09:38

explaining Key of List Item

Key of List Item
01:57

React
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
06:13

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
05:56

solving some errors.

Step 1 - Insert Redux - Part 3/3
07:20

React
1 question

Step 2 - Replace 'Component State' by 'Redux State'
09:29

introducing Redux DevTools, which is an extension of Chrome.

Reux DevTools helps developers to observe State and Props in Chrome

Redux DevTools
06:03

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

ES6 - Object Destructuring & Exercise09
08:02

ES6 - Shorthand Property Names
01:39

ES6 - Spread Operator
05:39

ES6
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
09:18

Provider component, Connect() method - Part 2/2
10:24

a shorter syntax for using Connect() method

Connect() method: Advanced
06:28

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

Exercise01: Redux-Thunk & Redux-Logger libraries
03:18

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

Exercise02: combineReducers() method
02:17

doing an exercise to practice using containers

Exercise03: Containers
06:56
+
React-Router
2 Lectures 18:34

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

React-Router - Part 1/2
13:01

  • using IndexRoute for homepage.
  • Applying ES6 Destructuring in function parameters
  • explaining this.props.children
React-Router - Part 2/2
05:33
+
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
07:42

Refactoring - Part 2/2
06:41

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
10:37

React
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
07:45
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.