ReactJS Tutorial 1 : Introduction To ReactJS

hello and welcome to this brand new

react CDs and in this series we will be

learning the latest version of react

which is react 18. now there are a lot

of other react tutorials on YouTube

which use the older version of react

where they use class based components

and where they use create react app for

creating the project but this series is

going to cover the latest version of

react wherein we will be learning about

the function based components and we

will also be using wheat to create a

react app as well now before getting

started with the series let's have a

brief overview about what this series is

going to be all about

so this series is going to be beginner

friendly which means that in this series

we will start learning react from the

absolute Basics and if you're learning

react for the very first time then you

should have absolutely no problem at all

learning from this series

another thing is the series would be

completely free so it's not like I've

uploaded some portion of the course on

YouTube and then I'm going to charge for

something else uh this series would be

completely free and there's nothing you

need to pay but I would highly

appreciate if you could show your

support by liking this video and by

subscribing to this Channel and in this

series we will cover all the important

Concepts in react starting right from

the basics and by the end of the series

you should be able to build any kind of

application using react another best

part about this series is that I have

made this series all-inclusive which

means that once you complete the single

series you don't have to ever keep

learning react from other sources I have

ensured that everything gets covered

here itself

this series is also going to get your

job ready now I'm not assuring that you

will get a job but by the end of the

series you'll gain enough react skills

to at least apply for some junior level

react Developer jobs so without wasting

any time let's move on to the next video

where we learn what exactly react is so

what exactly is react and why it is used

so most of us know that react is just a

front-end library and it is being used

by a lot of companies and all that we

know is that react developers are

getting paid a good amount of money

across the industry but why exactly that

is the case now to understand this we

have to go all the way back in the past

in the 1990s where websites used to look

something like this so this is just a

screenshot of Yahoo's home page what it

used to look like in the 90s so you

might see that there's absolutely no

website in today's world which looks

something like this but back in the day

websites were simply a collection of web

pages linked with each other

now all that a website was is that it

was simple HTML CSS and some GS the page

had some HTML which gave it the

structure it has some CSS which gave the

webpage some colors and some sort of a

background and then we held a little bit

of JavaScript on the web page so as to

make websites a little more attractive

now these traditional websites which we

had this is how these websites actually

work

so what happens is whenever you try to

access any kind of a website you have

this client which is nothing but your

browser so the way in which traditional

websites work is that you type in the

name of the website which is the domain

name and from your client this request

or the URL gets sent to the server as

the client sends this request to the

server the server receives that

particular request and now it's the

server's job to give you back a web page

and what the server used to do is that

it used to render the entire web page

and it used to send it back to the

client which is nothing but a web

browser so what the server does is that

it now renders a web page and gives that

entire web page back to your browser and

the browser shop was simply to go ahead

and display this website to us so that

we are able to view that website now

this website which you were able to view

looked something like the Yahoo

screenshot which I've shown before so

that website contains some links some

images so on and so forth so when the

use user actually clicks on the links on

those pages another URL request for sent

to the server and then the server had to

figure out what kind of request that is

and according to that request the server

has to give back another web page so

basically what used to happen in the

back end which is at the server side is

that the server side had to do the

rendering of that particular web page

now this particular phenomena where the

server has to go ahead and sort of

render the web page for you this

phenomena is called as the server site

rendering and older website used to use

this however as we moved ahead in the

future this traditional approach sort of

started taking a backseat and let's

learn why exactly that happened

so this is how website evolve so as the

users on the internet grew the users

actually demanded a more interactivity

the users want their applications to do

a lot more than just simply displaying a

web page so websites were no longer just

a collection of static web pages but

instead they became fully fledged web

applications which had a similar

functionality to that of a desktop app

so back in the days you used to have

some desktop software which were more

interactive as compared to a simple web

page which you would have on the

internet but if you take a look at these

days almost every software out there is

nothing but it's a web app which you

could use by just logging into your

browser and this happened because

website evolved eventually to be more

interactive so if you take a look at the

most modern web applications they

function as if you are running them

locally as your desktop software so we

all know that modern applications which

run on a browser they almost run like

native apps and in order to make these

applications more interactive more

JavaScript was required developers had

to write a lot of JavaScript code and

what this did is that it severely

increased the complexity of the websites

which they were trying to build now as

the complexity of the website's crew

more and more bugs were introduced and

it was almost impossible to keep up with

all of those bugs and also the code

which was being written out there was

not as maintainable as it should be and

also whenever you have to make your

website more interactive using

JavaScript what you have to do is you

have to do a lot of Dom manipulation and

Dom stands for document object model

which is nothing but it's actually a

representation version of your web page

so let's say for example you have to

make your web page more interactive that

means you had to make changes to the Dom

and updating the Dom manually was quite

a tedious task So eventually what

happened is the website actually evolved

to be more interactive but it kind of

gave rise to a lot of issues in the back

end for the developers where they have

to deal with a lot of JavaScript code

they have to do the Dom manipulation

manually so on and so forth so in order

to solve all of these issues a react was

introduced so let's now learn how a

react application works and how it is

different from the traditional

application which we have now react is

based on the concept of client side

rendering so in the previous example in

the traditional website the server had

to do all the rendering but in react

client is the one which actually does

all the rendering for you and by client

we simply mean the web browser so what

happens in a react app is that instead

of rendering multiple pages on the

server react app has a single page which

is loaded only once therefore the

applications which are built with react

are called as single page applications

because you could fit an entire fully

fledged working software by using just a

single page

now when you click a link or when you

request some data by clicking on some

button on that particular page what

react does is that react sends a data

request to an API so instead of

communicating with the server the react

app now communicates with the API and

instead of fetching the entire page the

react app just asks for data now the API

what it does is that it gives us back

the data so instead of rendering an

entire web page this API simply gives us

back the data and once our react

application receives that data what it

does is that it takes the data and loads

that data on a specified portion of the

web page without having to reload the

entire page for us and this entire

concept is called as client-side

rendering and it is called as

client-side rendering because the server

does not render the full web page for us

we simply connect to the server or the

API to fetch data and react takes this

data and adds it to the section of the

web page this means rather than updating

the entire web page only the section of

that particular page is updated and that

update is actually done by react now

this results in better performance and a

more Dynamic user experience so this is

how react applications are different

from the traditional approach of

actually rendering web pages on the

server side now let's learn what exactly

is react so let's have a brief

introduction to what exactly react is so

react is an open source JavaScript

library for creating user interfaces so

let's dissect this definition a little

bit so react is open source that means

it's basically available to public for

use there's no commercial license you

could freely use the software and you

could also view the source code which is

publicly available the next thing is

react as a library now people typically

say that react is a framework but it's

not a framework it's simply a library

and the reason why react is not a

framework is because we cannot build

full stack applications with react alone

yes you could build some front-end

applications but in order to build the

back end you actually need some other

framework like Express now react is used

for handling the view layer of our

application so one thing to note here is

that react actually deals with just the

front end you cannot use reactive sort

of program how your server works or how

your server does certain things so if

you want to perform some kind of

authentication in the back end you have

to use another framework for that you

cannot do that with react and therefore

it's actually said that react is used

for handling the view layer of our

application

now typically when you are developing an

application there are various layers of

applications such as the model The View

and the controller and out of these

layers of your application react

actually deals with the view layer of

your application so react allows you to

create large-scale web applications that

can change data without reloading the

web page so as discussed earlier when we

want to request new data from the server

a react application does not have to

reload the page but react instead

fetches this new data from the server

and automatically updates that portion

of the web page with new data this means

you don't have to reload the entire page

for just getting or changing a portion

of the data on your web page now in

traditional web applications in order to

get new data you would have to reload

the entire web page from scratch but

that is no longer the case with react so

that was a brief overview of what

exactly react is now let's learn why

should you use react so react was

developed by Facebook to provide a

better user experience but it was a

later made open source so that other

developers or companies could use it now

as react is created and maintained by

Facebook that means it would be

supported for a longer period of time

and it would be updated frequently as

well and therefore it kind of makes it

by far the favorite choice if you want

to develop front ends you could be

assured that if you encounter some

problem there's always going to be a

community of developers which you could

rely on to get support and you would

always have a group of people to reach

out for help react is simple and it uses

a special syntax called as jsx so what

exactly is jsx GSX is a special syntax

which allows you to mix JavaScript with

HTML

Now using jsx you could build a react

components using HTML and JavaScript

itself and you don't have to learn any

new programming language so if you

already are familiar with HTML and if

you know a little bit of JavaScript then

you could just go ahead and get started

with react without any issues

the next thing is it's a high demand

skill which is required by a lot of

companies so if you want to apply for

jobs and tech companies and specifically

if you want to apply for front-end

developer roles chances are that they

expect you to know react so knowing

react is going to help you a lot in

getting that front-end developer role

react could be used in any Tech stack

react does not care which technology

you're using in the back end you could

use Chango Express or you could simply

use a Firebase database in your backend

and you could still use react on the

front end so it's highly compatible with

any kind of other Technologies which you

have or any Tech stack which you could

imagine of not just the back end react

is flexible in the front end too what I

mean by that is you do not have to use

react for your entire front end of your

application you could insert go ahead

and only develop some parts of your

application using react and use any

other library or framework for the other

parts another best thing about react is

that you could jump into mobile

application development using react

native so once you have learned react

react native is a lot similar to react

and it's a platform which allows you to

build mobile applications for Android

and iOS

Now using react native you just have to

write code once which would be later

transpiled into Android app and an IOS

app this means you do not have to learn

languages like Java kotlin or Swift

which are required for Native

application development instead you

could simply use your react skills to

build a native mobile applications

so these were some of the common reasons

why exactly you should learn react I

hope these reasons are inspiring enough

to motivate you to learn react

all right so once we know what exactly

is react why it is used and why you

should learn it let's now dive a little

bit into react and let's learn what

exactly react is and let's specifically

learn about the component based nature

of react so react is component based and

what do we mean by that so a component

is nothing but it's a smallest building

block of a react application and a react

app is nothing but a combination of

multiple such components combined

together

so in order to understand this consider

an example of an Instagram post

so if you take a look at the Instagram

post it has the picture it has the like

button it has the share button and it

also has some space for commenting as

well so in that particular Instagram

post the images one component the like

button is one component the share button

is another component so on and so forth

and all these components come together

to form a single post so react is based

on the similar principle that is you

create multiple small components and

combine them together to form the user

interface of your application now

another best thing about react is that

these components which you create and

react they are highly reusable that

means you could create a component once

and you could use that component

multiple number of times in same

application or you could even share

those components across multiple

projects you're working on so this

component based nature of react also

makes it quite favorable to develop

front ends using react so now that we

understand what react is in the next

lecture let's go ahead and let's learn

how to set up the development

environment and let's start building our

very first react app so thank you very

much for watching and I'll see you guys

in the next one thank you