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
English
Current price: $10 Original price: $50 Discount: 80% off
3 days left at this price!
30-Day Money-Back Guarantee
Includes:
  • 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
Requirements
  • 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
Description

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

*** OFFICIALLY USED BY CONSULTANCIES AND MASSIVE CORPORATES SUCH AS SUNCORP TO TRAIN ENGINEERS***

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
09:23:59
+
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
04:20

Go over all the various packages used in the editor

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

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

What is React
06:05

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

Loading React
10:33

What are function components, and how we can instantiate them

Function Instantiation
04:07

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

Using defaults and Understanding Destructuring
09:12

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

React Component
12:58

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
09:31

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

Explaining PropTypes
03:34

Explaining Component State
17:37

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

Using setState and Rerendering
01:14

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

What are React Controlled Components
19:27

Create your own Input Component
04:26

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

Search Bar with Spotify
16:29

Creating a Search Function
08:52

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

Fetching Live Data
05:00

Safeguarding Components
13:02

How CSS flex works

Understanding CSS Flex
07:32

Creating a Song Item Component With Retrieved Data
11:17

Styling the Components
14:26

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
07:13

Abstracting Rendering Within Components
13:04

Loading and Rendering Data from Spotify
07:38

Styling The Application
07:16

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

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

Data Flow in Redux
09:39

Three principles of Redux

Three Principles of Redux
09:39

Using open source tools such a react-create-app

Using Facebook's Create-React-App command
02:35

Starting the Local Server using Yarn
01:32

What are dumb components ? components not connected to Redux

Dumb Components
05:43

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

Redux Application Architecture
11:10

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

Provider and Connect
08:36

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

Installing Redux Dev Tools
03:12

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

Creating Reducers
10:34

Shopping Item Component
10:32

Writing The Main App Component From Scratch
05:28

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

MapStateToProps
08:46

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

MapDispatchToProps
16:08

Gluing Everything Together and Observing Action Flow
05:51

Create a Shopping Cart List
09:15

Removing Items From Shopping Cart
10:13

Styling Shopping Cart
08:09

Course Feedback
00:05

Redux
8 questions
+
Redux Middleware
5 Lectures 16:59

What exactly is middleware in software

Understanding Middleware
02:04

Thunk middleware and middleware that sits between actions and reducers

Middleware in Redux
01:45

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

Applying Middleware
02:33

Understanding Thunk middleware and how it helps us

Understanding Thunk
04:36

Implementing thunk middleware and getting use of it in our application

Using getState, Thunk and Middleware
06:01

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

Enabling CORS
01:06

React Router Announcement
00:19

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

React Router
02:59

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

Folder Setup and Structure
15:36

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

Introducing Routes
10:10

Routing within Routes, creating child routes for routes 

Child Routes
15:54

React AutoComplete With Google Maps
16:58

What is an indexRoute and where does it fit in routing

IndexRoute
03:17

Connecting Components
05:56

Locations, Actions and Reducers
09:41

Signing Up For Uber
09:28

Using Thunk
02:18

Making Asynchronous Requests To Uber
15:06

Programatically changing routes in React

Using BrowserHistory
13:30

Creating dynamic routes that mutate according to javascript

Creating Dynamic Routes
07:07

Rendering Prices
08:11

Using Link Tags from React Router
04:23

Styling Uber Part 1
06:59

Styling Uber Part 2
18:55

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