Learn React : The World's Most Lucrative JavaScript Library
4.3 (95 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.
1,563 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Learn React : The World's Most Lucrative JavaScript Library to your Wishlist.

Add to Wishlist

Learn React : The World's Most Lucrative JavaScript Library

Learn React and Redux by building a Spotify, Shopping Cart and a Uber Price App using the latest ES6, NPM and Webpack
4.3 (95 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.
1,563 students enrolled
Created by Vaibhav Namburi
Last updated 4/2017
Current price: $10 Original price: $50 Discount: 80% off
3 days left at this price!
30-Day Money-Back Guarantee
  • 9.5 hours on-demand video
  • 3 Articles
  • 5 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Create Complex Web Applications using React, Redux, with the best programming practices
  • Understand how React works under the hood and what makes it so fast and popular
  • Have sufficient knowledge to go through a front end React interview
  • Use APIs from different services, work with API keys, fetch and use data from various services e.g Uber and Spotify
  • Confidently navigate through redux and its principles understand what actions and reducers are in their core
  • Learn relevant and easy architecture principles that will help you build faster
  • Become confident in desiging a React project with Redux
View Curriculum
  • A basic understanding of HTML, CSS, and JavaScript
  • A computer on which you can install software (Windows, MacOS, or Linux)
  • Basic understanding of Git helps, but isn't necessary

*** Brand New Course Launched in February 2017***


Learn React by doing!. Everything relating to the modern web framework React  and latest practices are jam packed into this course.

Subscribe and up skill yourself in the highest paying front end framework in the world

What are we going to cover and use ?

React - ReactRedux - React Router - Middleware - ES6 - NPM - Webpack

We'll be using the best practices in the industry to build products that you can share with your friends. Forget the boring TODO and Hello World app tutorials, learn the fundamentals and core concepts of how React works whilst building applications you're proud off and will use and share with your friends.

You'll be building three scalable real apps from the scratch:

1 - Spotify App - Search for and play snippets of your favourite songs using React and it's principles
2 - Shopping Cart App - Build a shopping cart using Redux and master all of Redux's concepts and ideologies
3 - Uber Price Estimation App - Find out how much a uber ride is going to cost you from start to end, using React, Redux, React-Router, Middleware, Fetch

During this course you'll learn and get to work with:

- React
- Redux
- Axios
- React Router
- Middleware
- Installing and using external React Modules
- Google Maps API
- Redux Developer Tools
- Github and Git
- Webpack
- ES6 / latest javascript
- Uber's API, Spotify's API
- Chrome developer Tools

We'll be using diagrams and flowcharts throughout our course to pictorially explain what is happening at each step and how this fits into the bigger picture of React, we leave no stone unturned when going over core theories of this popular and fast framework.

Learn React's popular JSX markup language, combining HTML and Javascript and get quickly trained on breaking down large applications into much smaller component based solutions that you can re-use throughout your code.

Understand how 'props' and 'state' work, more importantly understand what the exactly are, what they do and why they are necessary.

Learn Redux, one of the most popular front end data management libraries, we'll break Redux down to it's very core, understand what it exactly is, why it does it, why it's so famous. Learn how to easily manage your data using Redux and build complex applications, and become that person who explains theories about Redux others didn't even know.

We learn about Redux middleware, nothing is explained using jargon and everything is taught in a relatable and simple terms, making it extremely easy to grasp all these new concepts

This course not only explains how React, Redux and the several other tools and technologies such as webpack, and ES6 work but goes into exactly how they work, we work from the ground up, from fundamentals to building complex real life apps you can scale easily

I am a bootcamp instructor so I know the importance of responding to answering student questions, I will respond within 12-18 hours of any question you post!

*** 30 day guarantee full refund**

Who is the target audience?
  • Developers who are tired of using jQuery
  • Programmers looking to pick up React
  • Engineers interested to move from the back end work to front end
  • Anyone who's had trouble understanding React principles
Students Who Viewed This Course Also Viewed
Curriculum For This Course
74 Lectures
Intro and course overview
2 Lectures 04:09
Set up
5 Lectures 14:06

Set up your atom editor environment, we'll use this software for coding

Preview 02:43

What is github, use it to sign up and collaborate

Preview 02:13

Here we copy folders from github and install them locally

Preview 02:57

We navigate over the folder structure and how they fit together

Folder Structure overview

Go over all the various packages used in the editor

Atom Packages
Introduction To React
11 Lectures 01:38:44

diagrammatically understand what react is and how it works versus traditional MVC frameworks

What is React

We load react into our development environment and how we make it work

Loading React

What are function components, and how we can instantiate them

Function Instantiation

What is ES6 destructuring, the difference between default export and export

Using defaults and Understanding Destructuring

What is a React component, what does the class based component contain that function component doesnt

React Component

Questions reflecting understanding of React

Understanding React
4 questions

We learn about props, and how they're a channel to pass data around React applications

Explaining Props

Why are propTypes important, and how they help improve development on large projects

Explaining PropTypes

Explaining Component State

We learn about state, and how it embodies within react and helps re-render components using the setState method

Using setState and Rerendering

Creating input components in React that are controlled by the component state as to internal state

What are React Controlled Components

Create your own Input Component

Further React
4 questions
Axios, Component Nesting and Building Spotify App
12 Lectures 01:53:31
Intro to Spotify

Search Bar with Spotify

Creating a Search Function

Fetch data in a promise driven function using the axios library for HTTP requests

Fetching Live Data

Safeguarding Components

How CSS flex works

Understanding CSS Flex

Creating a Song Item Component With Retrieved Data

Styling the Components

React component key prop, and how it helps with rendering lists of data in React much faster

Rendering Lists, Key prop and it's importance in the Diffing algorithm

Abstracting Rendering Within Components

Loading and Rendering Data from Spotify

Styling The Application

Spotify Questions
3 questions
Redux React and our Shopping Cart App
19 Lectures 02:26:07

What is Redux, how is it fixing what its fixing and how it helps with faster React development

Introduction to Redux

Actions, Reducers, Components, Connections, Smart and Dumb components

Data Flow in Redux

Three principles of Redux

Three Principles of Redux

Using open source tools such a react-create-app

Using Facebook's Create-React-App command

Starting the Local Server using Yarn

What are dumb components ? components not connected to Redux

Dumb Components

Folder Structure completing flow, actions folders, components, containers, reducers, combineReducers, index files

Redux Application Architecture

We learn how we actually connect React and Redux which are completely seperate from one another

Provider and Connect

We use smart development tools to have them work to our benefit :)

Installing Redux Dev Tools

How do we create a reducer architecture, what does a reducer embody and how does it fit in this system

Creating Reducers

Shopping Item Component

Writing The Main App Component From Scratch

We learn about the famous mapStateToProps function that is passed to the connect function, how we get access to bits of our redux store via props


We learn about the famous mapDispatchToProps function that is passed to the connect function, how we invoke actions that are passed to reducers


Gluing Everything Together and Observing Action Flow

Create a Shopping Cart List

Removing Items From Shopping Cart

Styling Shopping Cart

Course Feedback

8 questions
Redux Middleware
5 Lectures 16:59

What exactly is middleware in software

Understanding Middleware

Thunk middleware and middleware that sits between actions and reducers

Middleware in Redux

We learn how we actually implement middleware into all of this, and how we make it work

Applying Middleware

Understanding Thunk middleware and how it helps us

Understanding Thunk

Implementing thunk middleware and getting use of it in our application

Using getState, Thunk and Middleware

4 questions
Uber Price App - React Router, Middleware, Fetch, GMaps Redux, React
20 Lectures 02:50:22
Introduction To Uber Price App

Enabling CORS

React Router Announcement

What is react router and what is it trying to solve regarding routes

React Router

How the application is set up and how everything talks to one another on a folder and architectural level

Folder Setup and Structure

Routes and how we map route urls with components and state/view changes

Introducing Routes

Routing within Routes, creating child routes for routes 

Child Routes

React AutoComplete With Google Maps

What is an indexRoute and where does it fit in routing


Connecting Components

Locations, Actions and Reducers

Signing Up For Uber

Using Thunk

Making Asynchronous Requests To Uber

Programatically changing routes in React

Using BrowserHistory

Creating dynamic routes that mutate according to javascript

Creating Dynamic Routes

Rendering Prices

Using Link Tags from React Router

Styling Uber Part 1

Styling Uber Part 2

React Router
7 questions
About the Instructor
Vaibhav Namburi
4.2 Average rating
151 Reviews
6,163 Students
2 Courses
Tech Lead and Bootcamp Instructor

Vaibhav has a strong background in Engineering, spending nearly 6 years building products for various startups and companies. He has built applications for companies that receive nearly 500000 unique visitors a month.

Breaking down concepts and correlating them to real life situations is what he does best. He lives by the 'If you can't explain it simply, you haven't understood it' principle

He has already trained multiple engineers through bootcamps and at various companies in React and Node and he is extremely passionate about empowering through education.

Managing a team of 8, he effectively white boards, breaks down and maps through complex problems making sure everyone is on the same page. He's combined his education in engineering from The University of New South Wales, multiple Mentors and the ubiquity of all the internet blogs and articles into concise, structured and goal driven courses.

Learn by making relevant applications, that are fun as well as worth showing off, learn by building apps you love, instead of boring todolist and hello world apps.

Vaibhav is a lead lecturer for React and Javascript at Sydney's leading programming bootcamp, Coder Factory