Complete React JS web developer with ES6 - Build 10 projects
4.4 (225 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,486 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Complete React JS web developer with ES6 - Build 10 projects to your Wishlist.

Add to Wishlist

Complete React JS web developer with ES6 - Build 10 projects

Master react JS, ES6, firebase, Auth0. Along with reactjs basics, create 10 projects
4.4 (225 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,486 students enrolled
Last updated 8/2017
Curiosity Sale
Current price: $10 Original price: $200 Discount: 95% off
30-Day Money-Back Guarantee
  • 12.5 hours on-demand video
  • 3 Articles
  • 2 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Create web apps in react js
  • Learn about components, props, states and component life cycle methods
  • Create web apps that use firebase as login and database
  • Create web apps with Google login feature
  • Create web Apps with Auth0 login systems
  • Create web apps that use web API like reddit and github
  • Build 10 unique projects to build a solid profile in react js
  • Learn modern Javascript AKA ES6
View Curriculum
  • Basics of HTML
  • Basics of CSS
  • Basics of javascript like creating functions and loops
  • ES6 is NOT REQUIRED, it's covered in course

UPDATE: React Router version 4 videos are now added.

Hi and welcome to react JS course

React is a library by Facebook to create web applications that are fast, modular and everything can be done with just Javascript.

Now, before you get bore with this text, as you are a video learner, let me talk about projects of this course.

This course will first cover local installation and react basics. After that we will create 10 projects.

  • Project 1 - Create react app manually.
  • Project 2 - Converting a simple Blog into react components
  • Project 3 - Timer App
  • Project 4 - Sales cart in Single Page Application
  • Project 5 - Usurvery with Firebase database
  • Project 6 - Firebase Login Setup
  • Project 7 - Google Sign in with Firebase
  • Project 8 - Reddit API with axios 
  • Project 9 - Auth0 login System
  • Project 10 - Github API with Fetch and Auth0 login system

Ideal student for this course:

This course is perfect for someone who has little knowledge of HTML, CSS and Javascript. We are not saying that you need to be guru of javascript but little concepts like Loops and functions should be familiar to you. If you know ES6 that’s great, if not, don’t worry, ES6 is also covered in this course.

React is having very high demand in market. One of the top most searched subject on stack overflow. Most of high performance apps are created using react. If you want to stand apart from react, for sure you need to get familiar with react.

Also, if you are looking to move in react-native app development, that path goes with react js. Once you are familiar with concepts like JSX, props and states; same concepts are applied in react native too. And moving into react-native would be just a piece of cake.

Still, thinking about taking this course or not, we highly recommend to check a few projects mentioned in course introduction and free preview.

See you inside the course !

Who is the target audience?
  • web developers
  • app developers who are looking to jump into react and react-native
  • students who are looking to jump into react and master it
  • looking to make apps using JS, this is perfect starting point
  • People who have learned front end basics, this is next step to take
  • one, who want to learn the implementation of javascript
Students Who Viewed This Course Also Viewed
Curriculum For This Course
76 Lectures
Reactjs Introduction
4 Lectures 34:21

Mostly we like to jump directly into installation and writing code but with react, it would be great to first set a mind set. React is a framework that means we have to follow a certain rules.

Preview 03:40

This is going to be your first hello world in react. We will not install any local environment yet. We will use codepen for this example.

Our first virtual Hello World in reactjs

We cannot work with live environment all the time. We need  a production environment to make sure that we can develop apps at a large scale. We will use NPM and node to make our life little easier. You don't need to be a master of node, you just need it to be installed.

Setting Reactjs in local environment
Getting the basics of Reactjs right
8 Lectures 43:34

Introduction about, what we will do in section 2

What we will do in section 2 - Intro

Please look for the course github repo here

Github repo for React course is here

Get all course codes and exercise files here

Get all course codes and exercise files here

Under standing a react app and how the directory structure is laid out is very important. Later in this course we will do everything manually but as of now we will use a utility create-react-app that is given by facebook.

Understanding reactjs App

In react, component is almost everything. The main objective in react is to break application in components that can be reused later in the time. We will create our very first component in this video

Creating our first react component

So far, we have created component in the same file but this not a very good approach. We need to create component in different file that are know as modules and we will import that in our appJS file

Importing components from other files

Calling a function in the component is not easy. there are a couple of steps involved in it. We need to call the function, define the function as well use bind with this, to further use the function,

Calling functions in components

IN react, main agenda is virtual DOM. React came with concept of virtual DOM in which we don't talk to the DOM directly. We talk to Virtual dom. This virtual DOM, only updates, required elements from the actual DOM. This makes the whole process, super fast.

Virtual DOM in reactjs
Props, state and component life cycle in reactjs
7 Lectures 01:15:33

Introduction about, what we will do in section 3

What we will do in section 3 - Intro

Props and states are two fundamental blocks of react. Let's take them one by one. In here, we will talk about props first. Props are just fancy name for properties.

Props in reactjs

props can be of various types in react. Basically they can be as many type as you are aware in datatypes of variables in javascript. It can be string, numbers, boolean, function or objects

props types in react js

states are another important part of react js. Every component has many states. Most important one is initial state. It used to be done by function but according to latest guidelines, it is done inside a constructor

States in react js

Every components has a life cycle. like it is about to be mounted, it has just mounted or it has received a prop or may be it is unmounted now. All these states are life cycle and will be discussed

Components life cycle part 1

This video will make things clear about life cycle as we will call life cycle methods one by one. We will do classic call and logging in console to make sure that we understand the syntax

Components life cycle part 2

I know this is a big movie. But this is something important. We will not use create-react-app in this video. Instead, we will install everything manually and will create a react project. You might think that this a waste of time, but in fact this How the basics are being cleared up. I request all of you to do it at least 4 more time.

Preview 21:36
3 Projects and routers in react JS
12 Lectures 02:07:04

Introduction about, what we will do in section 4

What we will do in section 4 - Intro

From this section, we will focus on projects and you will learn a lot of things on the go. Our first project is to learn about components and we will break a template from web into react components

First Blog App - setting structure

Now that everything is coming up from appJS, next step is to break everything into component. Header should be coming up from it's own component and same goes for rest of the parts of web page

First blog App - breaking down components

Next, we will make a timer app that counts time as soon as page is loaded. Nothing extraordinary but teaches us a lot about component and life cycle methods

Timer App part 1 in react js

Let's add some CSS to the project and make it little good. With some final tweaks we will end this project

Timer App part 2 in reactjs

The course sales app is very unique. Here you can select courses on the same page. Things will be added to cart and sum will be added instantly. Let's set things for this app

Course sales app - part 1 - setup

We will break this into various components and our courses will be selected by one component and will be added by another component

Course sales App - part 2 - getting courses

Let's add some CSS to make this looks good. Also we will add total of selected course and if clicked again we will subtract the course price.

Course sales App - part 3 - logic for selecting courses

UPDATE - React router 4.x.x walk through

react doesn't come with ability of routing but there are many third party modules that we can use routing. One of them is react-router that we will learn in these couple videos

React router baiscs

We will import react-router and will configure. Configuring react router is simple, you just a router and some routes inside it. Also assigning links is little different in case of react-router

Creating first route and link

Nesting of routes is also simple but there are few caveats that one need to take care. We will create one simple example for that in here.

Route inside a route
3 projects - Firebase with React js
13 Lectures 02:04:44

Introduction about, what we will do in section 5

What we will do in section 5 - Intro

Now, we will get out hands dirty with firebase, an online database and login system that works as a " kind of " online backend service.This is going to be your first project that involves a lot of backend.

Usurvey App -setting up firebase

Now, we will design a simple component that asks user it's name. Now this name need to go up in the firebase database. It is much easier than what you might have thought about it

Setting input form to ask name

Now, based on what information we have got, we will show user some components. It will all be handled by classic If and ELSE condition block.

setting if else condition

If user name is being submitted, then we would like to show question to the user. same will be handled in this video and we will make a multiple choice question survey

displaying questions for students

Now, we will handle these question and store them in our state. This will be a good revision of state as well as working with user submission

handling questions with state

Final step is to make sure that everything reaches to the database. We also have to make a unique ID so that every user's survey is unique and is not overwritten by another

saving everything to firebase and finish it

Firebase can also be used for login and signup purposes. We will learn about login with Email and password login system of firebase.

Firebase Login App - Setting app structure

First step will be set up a login call. We will look into database to try to login the user. If there is no record found out then we will present the user with an option of sign in first.

Firebase Login App - Setting up login calls

Once the user is not able to login and is asked to signup, we will try to create a user with email and password. Also this is a good time to make an entry in database. 

Firebase Login App - Setting up signup calls

Looks like user is created and is able to login. Now, the final step is to make sure that he is able to logout as well. IN this video, we will work on logout functionality. 

Firebase Login App - logout the user

For the next project, we will add a feature for user, that is to allow him to login with google account. You might have seen this in number of apps and we will do almost the same thing here.

Preview 06:56

There are 2 ways of signing in with google, one is sign in with popup and other is with redirect. I will apply one here and another one is your assignment. Make sure that you post a screenshot in the q/a section

Preview 10:35
3 projects with Auth0, Reddit API and github API
12 Lectures 02:06:17

Introduction about, what we will do in section 6

What we will do in section 6- Intro

In almost every next project, you will be working with API. They are hard to avoid. Fortunately, in react we have number of ways to deal up with API. Let's set a project for the same

API basics - setting up project

There are many ways to deal up with API. One of them is axios. There is also a fetch method that we will use later in the project. It's always good to know about various options

API basics - getting subredit from JSON

Let's set header for our next project. Our header will use bootstrap components to make our life little easier. Header will have a login button that will show auth0 lock

Github searcher - setting headers

Next step would be to show that sign in lock from auth0. Best part about auth0 is that it handles signin from google, facebook and twitter automatically for us

Github Searcher - showing login and signup popups

Once user is logged in, that gives us a token to us. Based on that token we can decide to show separate components to the user. A simple IF and ELSE logic will go here. If token is present, show the component, otherwise not

setting user token and profile

Next, what we want is to convert that login button into logout button. Again the token will used. We will pass the token as a prop and back again to our if else logic

passing components to header for logout

logout applied and clearing local storage

Now, that the login phase is over, time to work on our github searcher component. Task number 1 would be to make a request to API of github and get some data

fetching Github API with Fetch

Now, that we have broken down our application further into searcher and profile. Let bring the result from appJS and pass them as a prop.

Handling search from github

Final step would be to just use those variable and display the profile. This is going to be final step of our application and this truly makes our application dynamic

showing profiles of users

Setting a quick environment for learning ES6

Setting Environment for ES6
OPTIONAL - ES6 Bootcamp
8 Lectures 01:06:46

ES6 introduces two new keywords, let and const, to declare variable and constants, respectively

Let and const keyword with caution

Most commonly used in ES6 is arrow function, mostly used at call backs

arrow functions in ES6

THIS keyword has made us cry, while debugging vanilla JS, now this keyword is fixed in ES6

THIS keyword is now fixed

Code hoisting is just a fancy name, let's have a look about what that is

Code Hoisting and default parameters

Objects can be created dynamically in ES6 and are used many time in react and such modern frameworks

Dynamic Object creation

For of, loop let's us to loop through array without woring about index value tracking

For of loop - Best of all

When we have to play around with N number of values, means uncertainty, then super dots are very useful

Super dots in ES6

In our react class, we will be exporting and importing files a lot. This concept will be used through out

Setup and import exports
OPTIONAL - ES6 Bootcamp Beyond basics
9 Lectures 01:21:43

Now, let's learn about How we can export functions in ES6 style

exporting functions

If you want to import everything from file, * is nice way. We can further make an alias to this *

importing everything from files

A complete guide to use MAPS in es6

MAPS - complete guide

A complete guide to use SET in es6 style

SET in ES6 - marvel universe

static function are also used while defining default props in react, this video will help you to clear basic of getters and setters too

Static function and getters and setters in ES6

Symbols explained in es6

Symbols in ES6

classes are a new welcome feature in ES6, let's explore them

Classes in ES6

Promise - THE most useful thing in ES6 for talking to web API

Introduction to promises in ES6

Let's have a quick look in promise using web request

Web request using promises
See you next time - Farewell
1 Lecture 00:09

A final note. Happy coding

After launch updates
2 Lectures 01:00:46

One more complete project added

Project 11 - Complete youtube video fetching app

Redux Fundamentals - as easy as possible
About the Instructor
Igneus Technologies
4.3 Average rating
2,955 Reviews
77,179 Students
35 Courses
Best Comprehensive Courses

We at Igneus have trained students from IIT's, NIT's and reputed companies. Students from all over the globe have trusted our High quality and affordable trainings from 10+ countries and have opted for our Certification programs.

IGNEUS stands for the Revolutionary and a quality enhanced change that we’ve tried to come up with in the modern world of Internet education. We’ve come up bearing in mind the maximum emphasis on the quality dealing with every new technology which has made us distinguished from the throng at internet. And this revolution of choice will keep continuing. Today IGNEUS Technologies has proudly lifting up the tag of being the world's most trusted provider of myriad of services and training programs aiding constantly in every corner of the globe along with web security aspects, and open source technology.

IGNEUS Technologies Pvt. Ltd is a dream shared and brought up by two computer geniuses to make the society upgraded and aware of the cyber crimes that curb the innocence of environment, thus starting a revolution in favor of cyber security.

Igneus stands for the Revolutionary and a quality enhanced change in every aspect of its touch to internet. Quality dealing with every new technology makes us different from the crowd of internet. The revolution of choice continues. Today Igneus Technologies is the world's most trusted provider of mentioned services and training along with web security aspects, and open source technology.