so before we dive into the course first

of all I want to mention a few things I

can't make any promises but I can

confidently say that this course will

give you a job and what I can promise is

that this course will take you from zero

to a react expert a react monster that I

can definitely give you a promise now

you might be wondering why I'm so sure

about this and the answer is simple I

began learning reactjs in 2018 and

started teaching it in 2001 I appload my

first reactjs course on my YouTube

channel 2 years ago or almost 2 years

ago and since then I gained extensive

experience by building numerous projects

and working with different companies now

I'm eager to Lear you a job now I know

that's a lot of things that I just said

now the real question is what you can

expect from this course in this course

you're are going to be learning a lot

and I mean a lot of things so now let me

explain all of them one by one in one

breath first of all we are going to be

starting from the react fundamental by

building 10 projects and countless

exercises then we will jump to react

with time script by building five

projects and countless exercises then

react hook form with one project Des UI

shads and UI redex UI tman CSS simple

hooks advanc hooks learn everything

about Zeus by building 10 projects every

single thing I know about the framer

motion and also animation in general by

building 10 projects 10 stack query 10

stack router and also if you guys don't

know the 10 stack framework which was

just launched 3 days ago and you will

learn all of that by building 10 more

projects then we're going to be jumping

into the advanced Parts like design

patterns in reactjs design system in

reactjs react testing Redux toolkit with

two full stack projects next CH from

beginning to advanced level react native

with projects and also we are going to

be building Advanced projects okay that

was a lot of thing that I just explained

I'm going to break them down one by one

in a few seconds but yeah this is what

you can expect from this course and this

course is still in the construction you

are watching only the first part of this

course and which is about like almost uh

11 or 12 hour of content so you are

watching the first part of this course

and in the upcoming series we're going

to be covering the rest of these topics

which I just mentioned so yeah I'm super

excited and I hope you are too now

finally I want to talk about one final

thing and I promise then we will jump to

the course I've mentioned this in my

previous courses in my react native

course and also in my data structure and

algorithm course that if you don't want

to subscribe to my YouTube channel you

don't have to if you don't want to send

me a money you don't have to if you

don't want to follow me on Instagram or

in X or Twitter whatever you want to

call that you don't even have to follow

me anywhere you don't have to do nothing

for me but now if you are taking some

Advantage from my course please do not

download my courses if you don't want to

follow me here and there I can totally

understand like why but if you are

watching my courses and you are making a

career out of there and still if you are

downloading my courses that's not fair

like I can't do anything about that

because YouTube doesn't have the

download feature but yeah like if you

watching my content please do not

download that so yeah let's get into the

course and I'm going to make you a react

monster so now let's talk about what are

the things that you have to know before

jumping into this course so you only

need to know HTML and CSS that's going

to be the main prerequisites for this

course you don't have to know SS and

this one is optional but I will highly

recommend commend you to learn tailn CSS

because in this course we're going to be

building a lot of projects and for The

Styling we're going to be using tailn

CSS so this one is optional but yeah

once again my recommendation will be to

learn that and also you have to know

JavaScript but in this course you can

definitely skip the O op part you don't

have to know what a oop is to take this

course which you are currently watching

right now and if you guys already saw my

old react J course where in the world is

the okay let me just search for there we

go if you guys are wondering like should

I have to watch this course before

jumping into this reactjs course the

video which you are currently watching

right now you don't have to watch this

video and even though I'm going to

private this video and ah God damn it

you also have to know typescript I

forgot this one you also have to know

this typescript now let me just say that

once again HTML CSS tell CSS JavaScript

and typescript so that's the only thing

that you have to know for watching this

course so now let's get into the cording

so what is reactjs react is a free and

open source JavaScript library specially

designed for building the user

interfaces now there are a few buzzword

in this definition let me clarify that

for you so the first one we have is a

open source so what is a open source

open source refer to the type of

software or basically anything where the

source code is made available to the

public this means that anyone can view

modify and distribute the code of that

specific thing and in our case in reactj

yes now what is a library library is a

collection of pre-written code that

developer can use to perform a common

task or add a specific functionality to

their applications now what is a UI UI

or the user interface is the means

through which the user interact with our

application reactjs was created in 2011

it uses something called the component

model which we will discuss more in

detail in this course but not right now

it allows us to build modular apps and

finally there is a saying about reactjs

that learn it once and write it anywhere

so now let me break all of them one by

one B is the most popular powerful

frontend Library developed and sponsored

by Facebook a component is just a piece

of the UI that has its own logic and

appearance a component can be small as a

button or large as entire application

you'll discuss more about components in

more great detail later in this course

but not right now if you learn react GS

once you will not only be able to build

only the websites but you can also build

the mobile application desktop and also

even the virtual reality and there are a

lot more things that you can do with

reactjs so you just have to learn it

once and write it anywhere so that was

just a quick intro to react GS and now

let me make a setup forward coding

journey in this course we'll be using a

vs code for writing work code and you're

more than welcome to use any text eror

that you prefer you can use Sublime Text

you can use jbr products you can use

anything that you prefer but in my case

I'm going to be using a vs code for

writing my code now to install reactjs

first we will need to open your terminal

after that we have to type this command

npm create weat at latest hit enter next

we have to provide some sort of a name

for our project I'll call mine as react

demos you can call it like anything that

you want next we have to select the

framework I'll choose reactjs because we

are now learning reactjs and yeah I'm

going to just choose reactjs next we

have to select the variant for now I'll

just choose JavaScript because I know

there are a lot of people who are

watching this course they don't have the

knowledge of typescripts so if you are

someone who already know what typescript

is you don't have to worry about that

like we going to be still using a

typescript in this course but not right

now so yeah I'm going to just choose

JavaScript for now but later we are

going to be using a typescript in this

course now we have to go inside that

folder by using a CD command or you can

say the current directory command now

I'm going to use the code Dot and hit

enter so it's going to open that in my

vs code now want you to open your

integrated terminal inside your vs code

and just type this command so you can

either use npmi or you can use PM

install if you wanted to so both of them

will work totally fine so it's going to

install all of the packages by which or

reactjs is depends on so it's going to

take a bit of time I'm going to fast

forward the video right now let's

discuss these files and folders so the

first folder that we have is a node

modules folder and this folder has all

of the module and packages by which or

reactjs is depends on and later in this

course if you install any third party

packages that will be also included in

this folder so the next folder that we

have is a public folder and public is

the folder where we put all for assets

file like HTML Etc next we have a SRC

folder and SRC or source is the hard of

for entire project and we're going to be

spending like almost 90% of our time in

this folder so now inside this SRC

folder we have a few more files and

folder so the first one we have is the

asset folder and as the name suggest

that in this folder we are going to be

putting like all of our assets files and

folder like images svgs external icons

and so on and so forth next we have two

other files like app. CSS and also

index.css so as the name suggest that

we're going to be writing our style

inside these files so we are going to be

providing our style for our UI inside

these files next we have two more files

like app.jsx and also main. jsx these

are something called the component file

which we're going to be discussing later

in this course but you don't have to

worry about that for now next we have a

GE ignore file and this is a GitHub

related file when we are pushing our

code to GitHub this file allows us to

ignore a certain file or folder for

example like this node modules folder is

a huge folder and if you don't want to

push that to our gab repository so we're

going to be just putting the name of our

node modules folder in inside this dog

ignore file and it's going to just

ignore that whenever we are pushing our

code to our giab repository next we have

our es. config.js file and this is a

configuration file for our es next we

have our index. HTML file and this is

the most important file because in this

file we have our HTML content and we

also have a deal with ID of root or rejs

will select this element and render all

of our content to that specific day like

I'm going to show you from where we are

selecting that day with a class of Route

I mean like with the IDE of root next we

have our package.json file and this file

is the heart of our project it contains

metadata about the project such as like

project name version description and

scripts and more importantly it list the

dependencies and their version that

where project needs to run here is

something which we're going to be

discussing later in this course next we

have a package log.jn file file is

automatically generated and updated when

install or modify dependencies it locks

the version of all of the packages and

their dependencies to ensure a

consistent and reproducible build

envirment something which you don't have

to worry about okay so next we have a

simple readme.md file and this file

provides the summary of what our project

is about it usually include information

like project purpose feature and aims to

accomplish about this spefic specific

project we can also preview there by

clicking on this icon and here you can

see and this is how our preview will

look like once we push our code to our

gab repository next we have our V.C

config.js file and this file is used to

provide configuration for the V itself

so yeah that was a lot about the files

and folders and you don't even have to

worry about these files and folder to be

honest and now I'm going to remove all

of the unnecessary stuff from our

project time for the cleanup so for now

we don't need this public folder so I'm

going to select them and delete them

next we also don't need this SS folder

so I'm going to remove that from here we

also don't need the app. CSS and also

the index.css as well next we have to go

inside this men. jsx and just remove

this line of code so I'm going to just

remove the SMI file and now finally I'm

going to go into my f. GSX file I'm

going to select every single thing from

this file and I'm going to just remove

that from here and next I'm going to be

just creating something called a

component but you don't have to worry

about what a component is for now so

I'll just use like const app and I'll

just use my arrow function and return

just H1 or you know what not H1 I'll

just return like section which will say

like hello now I'm going to save my file

and now to run this code I'm going to

have to open my integrated terminal and

now just use my npm run Dev so it's

going to run my code on this port right

here so I'm going to copy that or you

can just hold command or control and

click on there and we are getting this

error right here this because we now

successfully created this component but

we also have to export this so that we

can use it in other files so I'm going

to use like export default and then my

app so if I sve there and I'm going to

have to refresh there so what are we

getting we are now getting our hello

right here which is amazing so yeah this

is how we going to be removing all of

that unnecessary stuff from our project

so what is component components are

independent and reusable bits of code

they serve the same purposes jscript

function but work in isolation and

return HTML or jsx to be size so

something which we're going to be

discussing very soon cregs allows us to

make our website modular by using

something called the separation of

concern so if I ask you to build this UI

so how can you go about doing that if

you are coming from HTML cssa and

JavaScript background you will first

create index.html file then CSS file

then Javascript file and in the HTML

file you will put all of your structure

for this project then in the CSS file

you will put all of the styling and in

the Javascript file you will provide the

functional to it this process is still a

separation of concern but in reactjs we

can do that a bit more better in reactjs

we can split this entire project into

multiple components or you can say the

parts so you can either say like

components or parts so if you want to

build this project by using reactjs we

will start by creating a component for

the nailbar and in there we will put our

HTML CSS and JavaScript inside their

specific file then we will create

another component for a search bar next

next for the menu and also for the

article and also finally we'll create a

component for the card and we will reuse

that card again and again in our UI so

that was about the theory but how are we

going to make a component a component

you just have to create a JavaScript

function but whenever you are creating a

component you have to keep a few things

in mind the first thing that you have to

keep in mind is that the first letter of

your component name should be uppercase

you can also create your component by

either using the function resert keyword

or you can create your component Arrow

function syntax as well the final thing

that you have to keep in mind is that

anytime you are working with a component

you have to return some sort of HTML

from that component Now to create a

component I'm going to go into my

app.jsx file and I'm going to remove

every single thing from there because I

want to start from scratch so as I said

that components are just a JavaScript

function so if I just create a

JavaScript function by using either the

function resert keyword or I can also

create my component by using the arrow

function so for now I'll just stick with

this function resert keyword and by the

way anytime you are creating a component

there are two things that you have to

keep in mind number one the first letter

of the name should be uppercase and the

rest of them will be lower case so if I

want to give my component as the name of

like app the first letter should be

uppercase and the rest of them can be

like anything you can create the as

uppercase or lower case that's only on

you but the first letter should be upper

case I'm going to just give it the name

of like app and the next thing that you

have to keep in mind is that from the

component you always like always have to

return some sort of a GSX we did not

discuss about GSX not right now but we

will very soon so I'm going to just

write my H1 right here and I'll just

write like hello word so now if I sve my

file this is how we are going to be

creating our component but now we have

to tell our reactjs that now we

successfully created this component we

want to render that to our UI so to

render that to our UI first of all we

have to export that so that we can use

the in other places of our project so

I'm going to just use like export

default and then F so as soon as I do

that and save my file now I'm going to

open my terminal right here I'm going to

just use my npm run Dev and here you can

see we are now getting our hello word

right here from our component so what's

going on so now we successfully creating

our component and now we exporting there

so that we can use this component in

other part of our project so where we

are using that component so if I go into

my main. jsx file right here so here you

can see we are now rendering this

component right here so first of all we

are now importing this component which

we just created right here inside this

app.jsx file and now we are exporting

there and here inside this men. jsx file

we're now importing this component and

we are now rendering that to or UI and

as I said previously that I want you to

keep in mind this root now we are

selecting that root right here by using

document. getet element by ID and we are

now selecting that root which is inside

this index.html file as you can see

right here now we are selecting that

root so here you can see we have a root

ID and we are now selecting there by

using document. element by ID right here

and now inside that route like this

route we are now rendering our app

component right here so that's the only

reason we're now getting this hello

world right here so if I change

something inside that component like if

I go into there and I'm going to just

change that to like my own name maybe

now if I save there and here you can see

I'm now getting my own name so yeah this

is how we are going to be creating a

component and let me just say that once

again anytime you want to create your

component the first letter will be upper

case and the rest of them can be either

upper case or lower case or that's only

on you and also we have to return some

HTML from this function okay so we can

also refactor this code to use Arrow

function so I'll just use like const and

I'm going to just convert this function

to use the arrow function if you prefer

this way you can also create your

component by using this Arrow syntax or

you are more than welcome to use this

function Reser keyword right here so

yeah this is how we are going to be

working with components welcome to the

first challenge of this course so here

is the UI and I want you to split this

UI into multiple components you don't

have to write any code for that just get

a pen and paper if you have that but if

you don't have a pen and paper you can

also use some sort of a photo editing

software which will allow you to just

Mark a few things inside this UI and

make them as a separate component and

yeah we also have another part of this

challenge which we are going to be

seeing in a few seconds but I want you

to go ahead and pause the video and do

this challenge by yourself so if you can

do it then come back and watch the

solution and now I'm going to give you

my solution so I'm going to use a figma

for there and if you want to use some

sort of other Pho editing software you

are more than welcome to do that so the

first thing that I want to do is that I

want to create a component for this

burger menu so I'm going to just create

a separate component and I'm going to

put like all of the structure The

Styling and also the functionality

inside that component and then I will

also create a component for the

navigation so I'll just create a

navigation right here and excuse my

drawing and also my bad uh yeah you get

the idea so this is how we are going to

be creating a component for the

navigation we can also split this entire

navigation into multiple components but

we don't have to like this is going to

be enough for this navigation component

we will put our logo inside there we

will also put our search field which

will allows us to search our uh stuff

inside this Wikipedia and finally we are

going to be also providing our create

account and also the login and we also

have these three dots and I don't have

any idea what the hell these three dots

do okay so that's going to be my second

component next we're going to be also

creating a component for the banner in

some situation we would want to show

this banner and in a lot of times we are

not going to be showing this Banner so

yeah this is going to be basically my

primary component and there is a big

difference between like uh huge

component and a small component which we

are going to be seeing inside this

course but not right now so this is

going to be my third component component

for the banner okay and also we are

going to be creating a component for the

sidebar or you can just give it the name

of like a side if you want it to but I'm

going to give it the name of like

sidebar and I guess that's going to be

fine okay and also we're going to be

creating a component for the appearance

so I'm going to also Mark there as a

separate component okay so we can also

split this entire U into like nested

component as well we can also create a

separate component for these radio

button if you wanted to but but we don't

have to do that okay and also we're

going to be creating a component for the

header so now let me just highlight that

right here just

like that so this is going to be

basically our header and finally we are

going to be creating a component for our

main content so this is going to be

basically our huge component which will

allows us to render all of that content

right here inside this uh Wikipedia okay

like once again we don't have to create

a component for all of there we can put

all of that entire logic into one

component if you wanted to but that's

not going to be the ideal way to create

our website or our apps so that's why we

are going to be splitting this entire UI

into multiple components so yeah that

was the part one of our challenge one

next we have to create a new file called

grid. jsx and inside that file we're

going to be creating our grid component

by using the function decoration syntax

after that we are going to be

refactoring that code to use the arrow

function instead and finally we just

have to render that into our app

component so once again give it your

best shot if you can do it that's

completely okay then come back and watch

the solution and I'm going to give you

my solution so what I'm going to do is

that I'm going to create a component

folder and I'm going to give the name of

like G do uh not TSX but genesic and I'm

going to use my RFC so it's going to

gives us all of that code but I'm not

going to do that I'll just create a

function and now I'm going to give it

the name of like greed it's not going to

take any perimeters so I'm going to

remove them and finally we only have to

return what H1 and which will just say

like GRE or hello word would be fine so

I'm going to sve my file now we have to

export this component so that we can use

that in other files so I'm going to be

using like export default of grid so now

I'm going to save my file let me go into

my app.jsx component and let's just

register that component right here okay

so if I save my file and here you can

see we now getting our hello word right

here which is looking amazing but I'm

going to go in there and refactor this

code to use the arrow function so I'm

going to remove that and change the to

const and also make there as Arrow

function so now if I save my file and

still we getting that same result which

is saying hello word okay so yeah that

was our first challenge in this course

we usually create a separate components

folder and we put our components inside

there so I'm going to just create two

component with the name of like greet or

greeting. jsx and also add. jsx and by

the way you can give it any name that

you prefer and now I'm going to just

create my greet component right here

here and I'll just return my H1 which

will say uh hello or yeah hello would be

fine I'm going to sve my file and I'm

going to show you extension which will

help you a lot so I want you to go into

your extension area and just search for

reactjs and once you do here you can see

I want you to install this extension in

your vs code just install this extension

and it's going to give you a lot of

Snippets okay so throughout the course

I'm going to show you a lot of uh

Snippets which you can use but by the

way if you want to use them so you you

have to install that in your vs code so

this component took a lot of time to

write now in this component I'm going to

just use r a f c e okay so you just have

to write there and once you hit enter so

here you can see it's going to gives us

the entire boiler plate of our component

let me just show you there once again

you just have to write ra fce and hit

either tab or hit enter it's going to

give us that entire component right here

so if I save my file now that we

successfully created our add component

and also our GRE component and by the

way we also have to export that so we

can use it in other files so we have to

just use export default and then grid

okay so if I save my file now the next

thing that we have to do is that we have

to register the inside or app components

so that we can see them on the screen so

I'll just remove this H1 from here and

I'll just use my grid first of all and

as soon as I hit enter here you can see

it will automatically import this so if

it didn't you have to import them

manually so now just close there like

this and by the way this is how we call

our component this is how we register

our component this is how we export them

and this is how we call them okay so if

I save my file and here you can see we

are now getting our hello right here

which is coming from this create

component I'll remove that from here and

I'll also render my ADD component and if

I hit enter so it's going to

automatically import there now I'm going

to save my file and what are we getting

we are now getting our add right here so

we can write like anything that you want

so I'll just write like something cool

and now if I save my file and we're now

getting what something cool right here

so yeah this is how we can create a

separate component folder and we can put

our entire components inside there

welcome to another challenge so in this

challenge you're going to be creating

three components and a lot of j6 inside

there so the first thing that I want you

to do is that I want you to create a

header. jsx file and inside that file

you are going to have to create your

functional component with the name of

header and inside that header you're

going to be returning the header element

and inside that header element you're

going to be creating H1 which will say

like welcome to my website and also so

you're going to be creating underneath

this H1 you're going to be creating your

navigation and that navigation will have

three anchor tags the first one will say

home the second one will say about and

the third one will say contact so that's

going to be the first part of this

challenge okay so if you want to give it

a shot right now so you can totally go

ahead and give it a shot but now I'm

going to explain these two and then I'm

going to give you my solution the next

thing that you have to do that create a

photo. jsx file and create your

functional component inside there it

will only return the folder element and

inside that folder element you're going

to be providing a paragraph which will

say like copyright uh 2024 or it should

be 2025 my bad but yeah you can proide

like basically any basically anything

that you like but in my case I'm going

to specify like copyright 2024 or 25 in

my website and that's the second part

and now for the third part you're going

to be creating your main component and

that main component will just return

your main element and also inside that

main element you're to be creating your

H2 which will say like main content and

now underneath that H2 you're going to

be creating a paragraph and you can like

basically put anything that you prefer

so give it to your best shot if you can

do it that's completely okay then come

back and watch the solution and then I'm

going to give you my solution and

basically you're going to be just

importing there and putting there right

here inside the app component so now let

me just show you all of that so the

first thing that I want to do is that I

want to create my header. jsx and I'm

going to be using my RFC for the sem my

file I'm going to remove this header

from there and provide my H1 which will

say like welcome to my website okay so

that's going to be the first thing next

we also have to create our navigation

and inside this navigation we're going

to be creating a three anchor tag so if

I just use like this a and times three

so it's going to give us this anchor tag

like three times so for the first one

we're going to be providing a home and

for the second one we're going to be

providing about and also for the third

one we are going to be providing a

contact okay so if I just write like

contact and sem my file so it's going to

form form there for me I'm going to go

ahead and go to my app and register my

header component right here okay let's

just import there and registered that

here so now if I save my file and here

you can see we're now getting more

welcome to my website home about and

contact so that was the first part now

in the second part we're going to be

creating a main component okay so I'll

just say like main. jsx and inside there

we're going to be creating our RFC or

you know what it should be a main you

know what you can like basically give it

any name that you prefer but in my case

I'm going to give it the name of like

main content and change that to main so

I'm going to copy there and let me just

place there right here okay and I'm

going to also use the H2 which will say

like main content and now need that

we're going to be creating our paragraph

which will say like this is the main

content and now I'm going to save that

now let me just go ahead and go to my

app and register my main component right

in here and now here you can see we're

now getting like main context content

content there we go so now if I save my

file and now we are getting like main

content and this is the main content

which is looking amazing now for the

final component we're going to be

creating our footer. jsx and now inside

there we're going to be using our RFC

and remove this Dev and change that to

folder okay let's just provide our

paragraph which will say copyright

2025 my website so now if I save my file

we also have to registered that inside

our app component l like so okay and I'm

going to register this semi file and now

we are getting our copyright 2025 my

website so that was another challenge

about the basic component what is jsx

jsx allows us to write HTML in reactjs

jsx makes it easier to write and add

HTML in reactjs so this is how our jsx

looks like so first of all we have our

component and inside this component we

are now returning some HTML now I know a

lot of you will ask me hose like why

can't we just call it HTML why are we

calling it jsx jsx simply means

JavaScript XML behind the scene we're

working with JavaScript this is just the

illusion of HTML this is not HTML code

behind the scene your reactj compiler

will compile our code into pure

JavaScript so don't believe me now let

me show you now let me write a bit of

jsx so that you guys can see how we can

work with jsx so I'll just create a

section and inside this section I'll

also provide a bit of ID to it so I'll

just give the name of like section and

inside this section I'll create my H1

which will say my website underneath

this H1 I'll create my article and

inside this article I'll create H2 which

will say like welcome to reactjs now

underneath this H2 I'll create a

paragraph and which will say like

paragraph

paragraph content or text I'm going to

also provide a class name to it and by

the way instead of writing a class you

have to write a class name and I'm going

to tell you why but you have to write a

class name for now and I'll just give

you the class name of text right here so

if I save my file and here you can see

we now getting our result right here so

if I right click on there and go to my

inspect element we are first of all

getting our root and now inside this

route we have our section with idea of

section we have our H1 we also have our

article and inside this article we have

this H2 and we also have this class we

are now providing a class name and here

you can see we are now getting a class

this is a gs6 rule which I'm going to

explain in a few seconds but yeah here

you can see this is how we can write

HTML inside our JavaScript function so

to combine all of them this is how we

can create our component now let me show

you how our reactjs convert all of these

HTML to JavaScript and to show you there

first of all you have to go into this B

js. and inside there you have to place

your HTML content so I'll just copy my