Complete React JS web developer with ES6 - Build 10 projects

Introduction about, what we will do in section 2

Please look for the course github repo 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.

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

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

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,

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.

Introduction about, what we will do in section 3

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

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

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

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

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.

Introduction about, what we will do in section 4

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

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

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

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

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

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

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.

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

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

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.

Introduction about, what we will do in section 5

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.

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

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.

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

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

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

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

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.

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. 

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. 

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.

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

Introduction about, what we will do in section 6

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

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

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

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

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

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

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

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.

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

Setting a quick environment for learning ES6

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

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

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

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

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

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

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

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

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

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

A complete guide to use MAPS in es6

A complete guide to use SET in es6 style

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

Symbols explained in es6

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

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

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

A final note. Happy coding

One more complete project added