UPDATE: React Router version 4 videos are now added.
Hi and welcome to react JS course.
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.
Ideal student for 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 !
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.
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.
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.
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.
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.
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
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.