Redux JS - Learn to use Redux JS with your React JS apps!
4.3 (15 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.
108 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Redux JS - Learn to use Redux JS with your React JS apps! to your Wishlist.

Add to Wishlist

Redux JS - Learn to use Redux JS with your React JS apps!

Create React JS & Redux JS apps by going through the details. Build 3 React-Redux apps using ES6, APIs and NPM packages
New
4.3 (15 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.
108 students enrolled
Created by Abhay Talreja
Last updated 8/2017
English
Current price: $10 Original price: $195 Discount: 95% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 8 hours on-demand video
  • 7 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Build fantastic single page full-fledged React and Redux JS application.
  • Build Applications that consume data from 3rd Party systems or Api's using web requests.
  • Master fundamental concepts on how to structure your React JS and Redux JS applications
  • Be a person who can talk about and explain Redux to other developers because you will know it very well.
  • Deploy your React JS application on Cloud.
  • You will go all the way from React js beginner to advanced React and Redux js developer.
  • You will be able to debug your code and understand other developer's code.
  • You will be able to design faster websites using React Js and Redux Js
View Curriculum
Requirements
  • Good understanding of React JS - There is a bonus section on getting started with React JS
  • Basic knowledge of HTML, CSS, Javascript and Web Development
  • Understanding of "state" and "props" in React
  • Understanding Components management in React
Description

*** Brand New Course Launched in August 2017 *** 

*** Learn React JS and Redux JS by creating 4 real world apps ***

*** With more than 40,000 students and counting. Make sure to check out other courses by the instructor. ***

Do you want to learn the number #1 programming language that is powering awesome User Interfaces of the internet?

Are you tired of wasting your time and money on random youtube videos or React JS and Redux JS courses that are either too simple, or too difficult to follow?

Or do you struggle to deeply understand and use React in real projects?

Or are you someone who is curious to know and learn React.js along with Redux.js?

If your answer is a big YES... Then this is exactly the course you are looking for!

Remember - 

There is no formation without repetition!

...

Why Should I take this course?

If you have seen the job market or job boards, you will know how popular React Js and Redux Js frameworks are for Single Page Web Development. As one of the most popular pairs of frameworks, learning React and Redux is a must. Simply put, learning React will open doors and jobs for you.

Here is exactly what we cover in this course:

  • All the React JS and programming fundamentals: What is React? Who uses it? Adding React to your site.
  • Everything you need to know in order to gain a deep understanding of how JavaScript works behind the scenes: React components, properties, state and parent/child relationship within React and more..
  • How to make React code interact with webpages: DOM manipulation. Learn how to select and change webpage elements, create new elements and handle DOM events. Accessing React DOM.
  • This is project-based, self-paced course that will get you started with coding your React Js and Redux Js apps. 
  • We will start by learning the essentials of React JS concepts (this is an optional section for students who already know React JS) - We will also build a full-fledged React JS app, before moving on to Redux JS.
  • Next, create your first Redux application to learn how to pair this elegant and complex framework with React.
  • Next, build an application that uses an API along with routing for multiple pages and has more advanced redux mechanics.

You’ll not only learn React and Redux, but get comfortable with popular libraries like,  redux, react-reduxreact-bootstrap, react-router-dom, and more. Plus, you will see how React js and Redux js work together with simple diagrams.

...

Let's now find out if this course is for you. It's a perfect fit if...

Student #1: You want to gain a deep understanding of the most popular programming front-end library in the world: React.js.

Student #2: You have taken other React.js and Redux.js courses but: 1) still don't really understand React and Redux, or 2) still don't feel confident to code real-world apps. This course is perfect for you!

Student #3: You are interested in using React and React-Native in your application to make it cross-platform, but don't know where to start. *I will also recommend, you start with my other React JS course*

Student #4: You want to get started with programming in general in the Javascript world. React.js is a great language to learn how to code the latest in the programming world.

...

Now it's your turn to decide. This is what you get:

• Lifetime access to my HD quality videos. No monthly subscription. Learn at your own pace, whenever you want.

• All videos are downloadable. Learn wherever you want, even without an internet connection!

• Downloadable final code for each section.

• My personal support in the course Q&A.

Sounds great? Then start learning today by clicking the “Take this course" button right now, and join me in the only React.js and Redux.js course that you will ever need!

I will See you in the Lectures!

Who is the target audience?
  • Programmers looking to learn Redux JS
  • Programmers who are looking to use Redux JS in their next full-fledged application
  • A perfect student who wants to use React JS Responsibly.
  • Programmers who have used React JS and are fed up with the state management
Compare to Other JavaScript Courses
Curriculum For This Course
66 Lectures
07:58:41
+
Introduction
4 Lectures 18:07

I welcome you in our React JS and Redux Js course. Together, we have a plan to work, study and have fun with our code!

Preview 03:14

In this lecture of our Redux JS Course, we will see how to make the most of the Udemy platform, understand the features that are available to us.

Preview 09:10

In this lecture, I will introduce you to the syllabus that we are going to cover in our React - Redux course!

Preview 03:39

In this lecture, I will talk a little bit about myself. If you are interested to introduce yourself, please feel free to do it in the Q&A section. I will love to interact with you and know you!

Preview 02:04
+
Understanding React JS - Optional section for my React JS students!
15 Lectures 02:27:51

In this lecture, we will use React JS into our online editor "codepen.io" and create our very first "Hello World" application!

Your first React JS Application
05:37

In this lecture, we will expand on our "Hello World" application and add more functionality to it.

Extending your first React JS Application
05:52

In this lecture, We will install our armor! Sublime Text (you can also use an editor of your choice), Node JS and NPM.

Overview and Installation
08:47

In this lecture, We will install our armor! Sublime Text (you can also use an editor of your choice), Node JS and NPM.

Installation - Sublime Text, Node.js and Npm
04:09

In this lecture, we will continue the installations and install React JS and setup our workspace!

Installing React JS and Setting up the workspace
08:19

In this lecture, we will understand and use JSX to write our React application!

Understanding JSX
09:03

In this lecture, we will understand and use Components to write our React application!

Components - State and Stateless
12:26

In this lecture, we will understand rendering and how to use the React DOM to render/update components!

Rendering
13:59

In this lecture, we will go over the props in React JS and how data flows from Parent to Child (FLUX)

Understanding Props
05:25

In this lecture, we will expand our discussion and see how to add validations to props!

Prop Validations
11:36

In this lecture, we will go the components API and see all the supported methods/functions!

Components API
16:47

In this lecture, we will go the components API and see all the supported methods/functions on how to call them and when they get called.

Components Life Cycle
14:48

In this lecture, we will go over forms and how to handle various types of Inputs in react.

Forms in React - Part 1
10:29

In this lecture, we will go over forms and how to handle various types of Inputs in react.

Forms in React - Part 2
10:02

In this lecture, we will go over forms and how to handle various types of Inputs in react.

Forms in React - Part 3
10:32
+
Pure React JS App - Resume (Optional for React JS Students)
6 Lectures 50:29

In this lecture, I will give you an overview of the new project that are going to build, it's our resume from an HTML/CSS template that we got it online.

Preview 03:44

In this lecture, we will use the Orbit Theme and make it work with our react application.

Let's Reactify our Orbit Theme
05:54

In this lecture, we will create our JSON file to hold the data we may need to make the resume work dynamically. Please use the resume.json attached in the resources section before we code the next lecture.

How about fetching the data from a JSON file?
06:06

In this lecture, we will break the HTML template into small react components, so that we can repeat ourselves and display content dynamically.

Break Things Down - To create components!
11:16

In this lecture, we will break the HTML template into small react components, so that we can repeat ourselves and display content dynamically.

Add more components - Let's make it dynamic
10:29

In this lecture, we will deploy our resume on the cloud, using heroku!

Wrapping up - Deploying
13:00
+
Simple Mathematical App
14 Lectures 01:08:25

This lecture is an introduction to the Math app that we are going to create in this section.

Preview 01:00

In this lecture, we will create a new React App, to get started.

Create a New React JS application
04:42

In this lecture, we will go over the various files and folders created by our 'create-react-app'

Understanding your Created React JS Application
04:14

In this lecture, we will install all the necessary NPM Packages as well as the Redux DevTools

Install Packages and Redux DevTools
04:09

In this lecture, I will quickly demonstrate the new redux plugin that was installed and the information that it presents to us.

Redux DevTools Plugin Explanation
02:00

In this lecture, we will create our first React JS component for our app to work.

Creating the Number Component using React JS
07:25

In this lecture, I will walk you through the whole lifecycle on which redux works.

Understanding the basics on 'How this whole Redux thing works?'
03:21

In this lecture, we will take a pause and see what each of the npm package 'redux' and 'react-redux' exports, that can be used as an import in our application.

Understanding the imports from 'redux' and 'react-redux' packages
02:39

In this lecture, we will write our actions and reducers for the mathsapp.

Writing our 'actions' and 'reducers'
06:27

In this lecture, we will see, on how to create a store in our react-redux application.

Now it's time to Create our 'store'
09:59

In this lecture, we will complete the Increment logic and make sure the number gets incremented every time we click the Increment button!

Completing our Increment Logic
10:50

In this lecture, we will start out implementation for Decrementing the number.

Adding the Decrement UI, Action and Reducer
04:46

In this lecture, we will complete our maths app by implementing the decrement function

Completing the Decrement Action and wiring it up to our UI
03:35

In this lecture, we will see how to use the Redux DevTools and move on to our new application.

Wrap-up and seeing the Redux DevTools in action!
03:18
+
Intermediate 'Shoppers Stop' React-Redux App
13 Lectures 01:29:04

In this lecture, we will get introduced to our new full-fledged react-redux app that we will be creating.

Preview 01:25

Creating our new React app and Project setup!
03:52

In this lecture, we will start by creating our UI with 3 main components. Grocery, ShoppingBag and the Stats.

Creating the UI for our application starting with the 3 main components
08:02

In this lecture, we will be creating our actions file, reducers file as well as wiring out store to the application, so that we can use the json data to display content dynamically in the next lecture.

Now let's create our Actions, reducers and the store for our application
10:02

In this lecture, we will be using the json file data to display the grocery list dynamically.

Static content is so old school, let's make the grocery list dynamic
07:04

In this lecture, we will implement the onClick on the grocery list item. This action, will help us remove the item from the grocery list and add it to the bag.

Add Grocery to Bag - Let's implement the clicks on our Grocery List!
04:15

In this lecture, we will combine the reducers and have them exported by default from our index.js file.

Organize the Reducers file using combineReducers
03:54

In this lecture, we will add the items from the grocery list to our Shopping Bag.

Add the items to the Shopping bag
08:48

In this lecture, we will create our new action, update our reducer to handle the action of removing grocery from the shopping bag. This will in turn update the redux js store and that is reflected with the updated Grocery List and Shopping bag items

Remove the Grocery item from the shopping bag and put it back to Grocery List
08:55

In this lecture, we will be updating our Shoppers Stop app to implement the Stats component. We will make sure to make the redux store to the Stats component, so that we can use the Shopping items and compute the cost, calories and weight of items added to the shopping bag.

Let's implement the Statistics. After all, we believe in a balanced diet.
05:41

In this lecture, we will be adding some bootstrap components to make our app look pretty!

Make the UI look pretty, it's an e-commerce site!
08:43

In this lecture, we will be extending our shopper stop app to include a provision for holding a daily pocket money. Of course the amount will get added/updated in our redux store.

Implement Pocket Money - Part 1
12:05

In this lecture, we will complete our implementation of the redux js app. We will wrap up our pocket money implementation as well as the entire app.

Wrapping up and completing our Pocket Money implementation
06:18
+
Expert Level - 'Movies App' - Using React-Redux js
14 Lectures 01:44:45

In this lecture, I will give you a quick over-view of what we are going to create in our Movies App. Yes, it looks great! Let's get started with our new React js and Redux Js apps

Preview 02:24

In this lecture, we will setup our default (new) React Js app along with the plugins for redux js, react-redux, react-bootstrap and react-router-dom.

React-Redux JS workspace setup - Let's get started!
05:14

In this lecture, we will be adding our UI for the moviesapp, so that we can later on add more of redux js to our react js application.

Step 1 for any react-redux app - Let us get the UI in place!
06:58

In this lecture, while implementing our React-Redux js project, we will add the search component that will consist of a form, an input and a search button.

Adding the search component - Yes, the search form!
11:20

In this lecture, we will upgrade our React-Redux app to actually fetch the list of movies from the third-party api. Yes, it works!

Integrating with third-party api to fetch list of movies for a search criteria
10:02

In this lecture, we will add the redux store implementation to our react-redux app.

*Drum Rolls* Let us add Redux Store to our app!
11:50

In this lecture, we will create a new Movie Item component, that will display the data for each movie, in our react-redux app.

Adding new component to display individual Movies
13:58

In this lecture, we will add the UI components to display ratings a little better as well as implement the logic of empty v/s filled heart. For every click on the heart. Yes, our React-Redux app is coming to a good shape!

Add some hearts - Implementing the Favorite button
07:10

In this lecture, we will add the movies to our favorites list. We will implement the action, reducer and link it to the button in our React-Redux application.

Time to get our Favorites created - In our Redux store!
07:22

In this lecture, we will get the favorite movies to work. So, when you add a movie to your favorite list, it should update your redux store with the new movie. Yes, our React - Redux app is shaping up well.

Adding Movie to our Favorite List
06:06

In this lecture, we will update our FavoriteMovieList component to display the movies that were added to the favorites in our redux app. 

Displaying favorite movie from the list
04:39

Removing a movie from the Favorite list
07:21

In this lecture of our React - Redux JS app, we are very close to completing our app. We will add routing to our app and learn to flip the tabs between 'Home' and 'Favorites'

Adding Routing to our React - Redux app
06:35

In this final lecture on React - Redux JS app, we will have closing remarks as well as create a link for taking the user to the details screen. Thank you!

Wrapping up - Thank you, your movie App is ready!
03:46
About the Instructor
Abhay Talreja
4.5 Average rating
1,359 Reviews
38,789 Students
5 Courses
Developer, Team Lead, Software Consultant, Loves Technology

Hi, I'm Abhay! I have over 10 years of development experience in many languages from java, javascript, grails, iOS and Android. So, I can say, i have seen a lot to understand and know. I intend to pass this knowledge to anyone and everyone possible or I can reach onto!

I'm a web designer and developer with a great passion for building beautiful new things from scratch. I've been building websites since 2007 and also have a degree in Engineering and specialized in Computer Science. I have created websites and applications for various states in the USA.

It was in college where I first discovered my passion for teaching and helping others by sharing my knowledge. And that passion brought me to Udemy, where my students really appreciate that I take the time to explain important concepts in a way that everyone can easily understand.

Do you want to learn how to build awesome websites?

Want to know how to make your websites look beautiful and professional?

Looking for a complete JavaScript course that takes you from beginner to advanced developer?

Then enrol in my courses today and join the other happy students. If I had to describe each of my courses in one sentence, I would say “I wish I had this course, when I started learning technology".

So if you don't want to go through all the books and thousands of online articles and tutorials like I did, then enroll in my course today! I will be very happy to share my knowledge with you, and help you with everything I can along the way.

Happy Learning!!