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

HTML content from here and I'm going to

just place it right here and what are we

getting we getting JavaScript so if I

copy that instead of writing this

section and article and stuff like that

I'm going to just remove that from here

I'll just for my return statement and

I'm going to place this uh content right

here I'm going to also remove this stuff

let's just remove them I'm going to also

select this comment and hit contrl d

control D or command D and command D and

I'm going to just remove that from here

so if I sell my file now I'm going to

zoom out a bit and first of all I'm

going to also copy this line of code and

I'm going to have to put the at the top

and you don't have to worry about this

code we are not going to be writing our

code like this you don't have to worry

about this coding so I'm going to save

my file and now if I go into my website

and refresh there once again we are

getting the same result like my website

welcome to react and paragraph content

so if I go into the section we have our

ID we have our H1 article or H2 and also

our paragraph with a class of text right

here so if you weren't using jsx so we

are going to have to create our

component this way like come on look at

this this redundancy we are now using

some djsx and providing a section to it

then we are providing ID and children

and there are a lot of things going on

so instead of writing all of them I'm

going to totally remove that from here

and I'll just replace that with this

return statement and I'm going to also

remove this first line so this is what a

jsx is and this is the power of reactjs

and also jsx in

reactjs welcome to another challenge so

in this challenge you're going to be

practicing ch X so first of all I want

you to create a file with the name of

welcome message. jsx and inside that

file then you have to create a component

with the name of Welcome message inside

that component you will have a div and

inside that div you will have your H1

first of all and inside that H1 you're

going to be providing like hello word

underneath this H1 you're going to be

also creating a paragraph which will say

like welcome to learning GSX and finally

you have to import in the app. j6 and

render that to the Dom so give it your

best sh 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 I'm going to create a file

with the name of welcome message. jsx

and inside that we're going to be using

our rafc to create this component right

here and first of all we have our div

and now inside this div we're going to

be defining our H1 which will just say

like uh hello word and now underneath

this H1 we're going to be creating our

paragraph which will say like welcome to

learning jsx I'm going to save this file

now let me go ahead and go to my app.js

x file and register my welcome component

right in here okay so I'll just close

there like so sa my file and here you

can see we now getting hello word and

also welcome to learning jsx so yeah

that was our second challenge whenever

you're working with jsx there are a few

rules that you have to keep in mind I'm

going to show you that rules but first

of all I'm going to remove this article

from here I'm going to save my file and

here you can see we are now getting on

my website which is looking amazing so

the first rule that you have to keep in

mind is that from one component you are

allowed to return only one parent like

there can't be multiple parents so what

am I talking about let's suppose if I

just move this line of code into new

line so what are we getting we are now

getting an error it is saying that you

are not allowed to create multiple

parents like this is a parent and this

is also a parent or I can just write a

div and here you can see still it's

going to give us that error right here

and why is that because as I said that

our rejs compiler will compile our code

to JavaScript and that's not allowed in

JavaScript anytime you are working with

jsx this is the first rule that you have

to keep in mind that from one component

you are only allowed to return one div

and now inside this div you can do

anything like you can create any amount

of nested stuff so you can create your

H1 you can write anything inside there

even inside this H1 you can write a div

and you can write anything inside there

underneath there but you have to keep in

mind that from one component you have to

return only one parent and anything you

write inside that parent will totally

work okay so that's the first thing that

you have to keep in mind the next thing

that you have to keep in mind is that in

jsx you have to close all of your tags

in HTML like that wasn't necessary if

you want to work with like images so you

just create your image and you don't

even have to close that if you don't

want it to but in jsx you have to close

there as you can see right here so if I

just remove there it will give us that

error right here like j6 element image

has no corresponding closing tag like

you have to close there and that doesn't

matter if you're working with the image

or if you're working with the divs so

I'm going to just remove that from here

and here you can see it's going to also

give us that error right here and we can

also make it as a self-closing tag if

you wanted to but you have to keep in

mind that anytime you're working with

jsx you have to close all of your HTML

tags okay so that's the second thing

that you have to keep in mind the third

thing that you have to keep in mind is

that anytime you are working with the

classes you are not allowed how to

provide a class by using the class

keyword instead of a class you have to

provide a class name so what am I

talking about I'm going to just write H1

and I'll just say like hello and now if

I just provide class right here I'll

just write a class and now here I'm

going to just say like uh my class and

here you can see it's not going to give

me any error now if I save my file and

now if I refresh that and go into my

console now it's going to gives us this

error like invalid don't property class

did you mean class name because what

JavaScript compiler will now think that

you're defining some sort of a class as

we learned in a oop section like object

oriented programming section in our

JavaScript course JavaScript will think

like you are defining some kind of a

class and like The polymorphism

Inheritance and all of that concept that

we learned okay so JavaScript will think

that you are defining that class but we

are not defining that class we are just

providing a class to or element okay so

to provide a class we have to use our

class name instead so if I just remove

there and if I change that to the class

name and now if I save my file and now

if I refresh it and here you can see

that error is now gone so yeah that was

the third thing that you have to keep in

mind and now the fourth thing that you

have to keep in mind anytime you are

working with the forms in some situation

we also want to provide a label forward

input field okay so I'll just use like

form and I'm going to just remove this

action because we don't need there and

now inside this form we will just create

a label so if I just create my label

inside some situation we would want to

provide our four attribute to it so if I

just write like name and I'll just use

my name inside there I'm going to create

my input field which will say like uh

text would be fine I'll also proide a

bit of placeholder to it so enter your

name I'm going to sve my file and now if

I just refresh there and what are we

getting we are now getting like invalid

D property 4 did you mean the HTML 4

because now once again what JavaScript

compiler will think that you're creating

some sort of a full loop okay so we are

not creating a four Loop we are now

providing just a four property or the

four attribute to our label so instead

of providing a four we have to write our

HTML 4 okay so I'm going to save my file

and now if I refresh that and here you

can see that error is now gone I can

write anything I want so yeah that was a

few rules about GSX that you have to

keep in mind whenever you're working

with the GSX in this series we learned a

few rules about GSX and we're going to

be exploring more throughout this course

but now I'm going to just make you

recall those rules okay so the first

thing that I want you to do is that I

want you to create a file with the name

of jsx roles. jsx inside that file

create a component or a functional

component with the name of jsx rules and

then inside that jsx rules component

you're going to be creating a div and

inside their day first of all you have

to write H1 with the title of jsx rules

and now underneath there you're going to

be creating a threee paragraph and one

paragraph will say like jsx must return

a single parent element another

paragraph will say like jsx element must

uh must be properly closed and the third

one will say like j6 attribute are

written using a camel case like instead

of using a class we're going to be using

a class name this is the most simplest

challenge okay so give it your best shot

if you can do it then come back and

watch the solution and now I'm going to

give you my solution now let me create

my component with the name of jsx rules.

jsx I'll just create my functional

component Right Here and Now inside this

functional component the first thing

that we have is our div and now inside

this div we have our H1 and I'll write

like jsx rules and now underneath this

H1 we're going to be creating a

paragraph which will say like jsx must

return a single parent element okay

that's going to be the first one we're

going to be also creating another

paragraph which will select jsx uh

element must be properly closed and come

on this should be a close and also we

have a jsx attribute or written using a

caml case like so so I'm going to save

my file we have to remove them and yeah

that's all simple exercise now we have

to register this component inside our

app so I'll just register there right

here okay so we have our jsx rules so

I'm going to sa my file and here you can

see we now getting those rules right

here so we have our GSX rules so yeah

that was another challenge in this

course now let's talk about expression

in jsx so with jsx you can write your

expression inside the curly braces and

the expression can be a react variable

or property or any other valid

JavaScript expression jsx will execute

the expression and give you the result

okay so here you can see I have my app

component and now inside this app

component I have a paragraph and now

inside this paragraph I'm now writing 2

+ 2 as it is without providing any curly

braces nothing to it so it's going to

gives us the result of 2+ 2 as it is why

is that because of re will treat it as a

text but now if you wrap that inside the

curly braces it's going to give us the

result of four and why is that now

reactjs will treat it as a valid

JavaScript expression so it will execute

their EX it's going to gives us the

result of the and we are not just

limited right 2 + 2 we can also create

some sort of a variable and we can put

our values inside there then we can use

the inside our UI we can even also

create a function we can also embed that

function inside our UI and also the

classes as well so now let me just show

you all of the in action now let's

discuss how we are going to be embedding

Dynamic content in our jsx so first of

all I'm going to just create my

paragraph inside this paragraph I'll

just say like 2 + 2 now here is a

question for for you what do you think

will be the result of this code so if I

save my file I want you to give me the

answer and the result will be 2 + 2 why

is that because we are not wrapping this

code inside the curly brace but now if I

wrap that inside the curly brace we now

entered our JavaScript word so if I sell

my file now and here you can see now

it's going to gives us for right here

why is that because now we are running

this expression inside the JavaScript so

reactjs compiler will compile this code

and it will think like this is a

JavaScript code so it will execute this

code so if I just write like 2 + 2 is

equal to outside from this curly braces

now it's going to giv us like 2 + 2 is

equal to 4 okay which is amazing so

that's the first thing that you have to

keep in mind next I'll just create a

variable with the name of like my name

and I'm going to store my name inside

the like husan webd and now underneath

this paragraph I'm going to create my H1

right here and now let's suppose if I

want to dynamically render my variable

name inside this H1 how can I go about

doing there well so if I just write like

my name if I save my file I'm now

getting my name right here but I want to

get this value like hoseen web dev so

how can I go about doing that to do that

we have to WRA this variable name inside

these curly Braes like the curly opening

brace and the curly closing brace so if

I save my file and now it's going to

gives us hosen web dev right here okay

so this is how we going to be rendering

our variables dynamically inside our jsx

we are not limited to just render our

expression and also our variable name we

can also provide arrays if you wanted to

so I'll just create like paragraph I'll

just say like my friends list and now

inside this list I'm going to first of

all open and close my JavaScript word

and now inside there we're going to be

creating our array which will say like

Alex we also have John and also W and

something like that and Jordan so if I

sell my file and here you can see we are

now getting like my friend list we have

we have Alex John Wah and also Jordan

right here which is amazing now I'm

going to create a function and I'm going

to execute or embed this function

dynamically inside my GSX so I'll just

use like multiply it's going to take the

perimeter of a and also B and it's going

to return like a * B okay and now

underneath this paragraph I'm going to

create yet another paragraph which will

say like 2 * 2 is equals to and now we

are going to be entering our JavaScript

word and now inside this JavaScript word

we are going to be exit in our function

which is a multiply and for the

perimeter I'm going to pass 2 comma 2 so

if I save my file and what are we

getting we are now getting like 2 * 2 it

gives us four so if I change that to

like 2 * 10 save my file it's going to

give us like uh 2 * 10 will gives us 20

but here I'm writing like 2 * 2 and now

it's going to give us 20 so if I just

change that to like uh 2 * 10 and now

the label is totally correct like this

is going to be the label and this is

going to be the actual value which we

are now getting from the JavaScript I'm

going to undo that and the final thing

that I want to show you about the

embedding is that we can also embed a

special class into our GSX so I'll just

create a special and I'll just write

like simple class or something like that

now I'm going to create a paragraph I'm

going to proide like uh this is uh

special class or something like that and

inside this paragraph what I want to do

is that I want to create my class name

and I'm going to just remove this Cordes

from here and I'm going to provide my

curly Braes and now inside this curly

bra Braes I'm going to copy this simple

class name and I'm going to just place

it right here so if I sell my file and

now Watch What Happens so if I select

this class right here so what are we

getting we are now getting our simple

class and now this simple class is

coming dynamically from our JavaScript

word right here so I can totally change

that to like

um any anything I want so if I save

there and here you can see it's going to

give us like anything I want so yeah

this is how we going to be creating

stuff by using a JavaScript and this is

how we going to be embedding there to

our jsx by using these curly braces in

this challenge you're going to be

practicing the dynamic content in

reactjs so the first thing that I want

you to do is that I want you to create a

file with the name of greetings. jsx and

inside there you have to create your

functional component with the name of

greetings so inside that component

you're going to be returning a div that

is containing the H1 and that H1 element

will dynamically display the greting

message like basically you have to

create a variable with the name of like

Hello World or hello or gracias or

something like that and you have to

renter that greetings dynamically inside

this H1 next create a paragraph element

that dynamically display the current

dead so if you can't do this

one okay I'm going to show you the

solution but yeah at least give it a

shot if you can do it like doesn't

really matter okay and yeah here are

more instruction if you care about that

and next you have to create a component

with the name of product info and inside

that product info component uh you're

going to be returning a div and inside

their D use the product object in this

case not just a product but the product

object that contains the following

properties like name will be set to

laptop price will be set to like 12200

availability will be set to in stock so

once you do that then uh render your

component to the app.jsx and that's

going to be it so give it your best shot

if you can do it then come back and

watch the solution and I'm going to give

you my solution so I'll just create my

greed. jsx component I'm going to be

using my rafc and the first thing that I

want to do is that I want to greet so

I'll use like greet which will say hello

and underneath it or you know what let

me just show that right here I'm going

to be using H1 and I will just render my

GRE uh right here so I'm going to save

my file let me go ahead and go to my app

and register my greet right here and now

I'm going to save my file and here you

can see we're now getting what hello

right here which is looking amazing we

also have to render the DAT so I'll just

use like that and now let's just use our

new dat and now rendered there right

here so I'm going to just provide like

de as a label and here we're going to be

rendering our de and now we have to

access the get date method on there so

now if I save my file now it's going to

use like the date is 19 so that was the

first portion of this exercise now let's

just create another component with the

name of uh produ info. jsx jsx there we

go we're going to be also creating our

functional component and this functional

component will have our product so I'll

just write like product and that's going

to be object so we're going to be

providing the name as a property and

that's going to be set to a laptop we're

going to be also providing the price and

price will be set to like 12200 and also

the availability will be set to in stock

availability in stock okay so now we

have to s file now that we have to

render the name price and availability

totally dynamically so how can we go

about doing that I'm going to remove

this name and now here inside we're

going to be using our H1 let me just

provide a label of name and now we are

going to be using a product. name right

here now if I sa my file oh first of all

we have to register this component so

I'm going to be using like product info

and hit enter save my file it's going to

giv us a laptop now I'm going to go in

there and the next thing that we have to

do is that we also have to render the

price and also the availability so I'm

going to basically duplicate that two

times and change the levels so I'll just

change that to price and also provide a

dollar symbol there and we also have to

change the name to the price okay and

also we have to remove this name and

change their two availabilities so I'll

just place this availability right here

because I can't spell that case I'll

just write like availability here sa my

file and now we are getting the name of

the laptop also the price and also the

availability which is now set to in

stock so now if I change like any of

these values so instead of 1 1200 I'm

going to change that to like 15500 now

it's going to totally render there

dynamically and we can also change there

to like uh computer instead and now it's

going to giv us a computer okay so yeah

that was our challenge about the dynamic

content now let's talk about list in

reactjs so in reactjs you will render

your list with some type of loop the

JavaScript map array method is generally

the preferred method to use for the list

so here you can see we have our

component Right Here and Now inside this

component we have our numbers array and

now if you want to it over through each

number inside this array and render

there to the

so we are going to be using first of all

the curly braces and now inside this

curly braces we're going to be getting

our numbers list and then we can use our

map method on there and now inside this

map method it's going to take a callback

function and we're going to be passing a

number and also the index and now inside

there we going to be using the UL and Li

to render our numbers to the Dom so this

is how we're going to be doing all of

this so now let me show you the inaction

now let's talk about how we can work

with list so first of all we have to

create a list then we are going to be

working with the I'll create a numbers

list and inside these numbers I will put

like 1 2 3 4 5 and now we have to

iterate over through each item inside

that list and do something with that so

in my case I'm going to just iterate

over through each item inside this list

and I'm going to render that to the Dom

so to do that first of all we are going

to be using like some sort of a main or

section or anything like that so that we

can work with that so then we are going

to be entering into our JavaScript word

so that we can use our JavaScript array

method like like push pop reduce filter

map and all of that methods in this case

I'm going to copy the name of this

numbers array and now if I just use dot

so here you can see we have all of our

JavaScript array method like we have ADD

concare copy within entries every fil

filter find find index flat flat map and

we have a lot of them but in this case

I'm only interested in the map method

and now here we are going to be passing

our call back function to it so I'll

just use like uh number would be fine

and now for this call back function here

you can see I want you to notice that

now in this case we are providing a

parentheses we are not providing a curly

braces so I want you to keep that in

mind so now we are putting these

parentheses and now if I hit enter right

here I'm going to just write my ul and

now inside this UL I'm going to write my

li right here so now inside this lii a

lot of people will think that we are

going to be just copying this number and

we have to just place it right here and

S our file and that's going to be a let

me just say that once again we are now

iterating over through each element in

inside this array we now rendering that

to our browser but now Watch What

Happens here you can see we now getting

a number number number and we are not

getting our numbers right here so to get

these numbers we have to once again

enter our JavaScript word so I'm going

to have to remove them or you know what

we have to just wrap there with these

curly braces right here so if I just

wrap it with this curly braces save my

file and now we are getting 1 2 3 4 and

five but there is still a problem now

you might be asking like what's the

problem if I go into the console what

are we getting we are now getting an

error each child in the list should have

a unique key prop and why are we getting

this error we now getting this error

because later in this course we're going

to be learning about something called a

state and state will allows us to mute

it or change these values like let's

suppose if I want to remove something

from this array or if I want to add a

new element to this array so how can I

go about doing that so to do that for

that we are going to be using a state we

are not there yet so we are not going to

be discussing a state right now but you

have to keep in mind that anytime you

want to change something inside this

array we have to first of all provide a

label for that place okay so like let's

suppose if I want to either remove or

update or something inside this array

I'm going to have to first of all

provide some sort of a unique label to

it I'll just write like uh 10 for this

first one and then 20 for the second one

and 30 for the next one and so on and so

forth so this is how we going to be Pro

providing a unique label so anytime we

remove something from this list or

reents will know from where we remove

their specific thing so to do that we

are not going to be providing our unique

things right here for each element

inside our array but instead we are

going to be providing there for the

parent so we are going to be using a

keyword here and that key will always be

unique like you have to provide a unique

thing for each element inside this array

okay so if you provide like one for this

one and also one for this one it's going

to give you an error like it's going to

still say each child should be unique

okay so now I'm going to copy it and I'm

going to place it right here and now if

I save my file if I just refresh there

and here you can see we now getting 1 2

3 4 5 and we are not getting that error

so this is how we going to be itating

over through each element inside our

list and this is how we are going to be

providing a unique key or a unique

identifier for each element inside this

list and this is how we going to be

rendering there to the Dom now I'm going

to just remove all of that stuff from

here and I'm going to also remove this

number from here and I'm going to

replace that with this huge array and

here you can see we have our users info

array and now inside this array we have

a few objects so we have object one two

and a lot of them and inside this object

we have a username we have the email and

also the location so we have username of

H then we have some sort of a test email

and we also have a location and then we

have the same thing for each object

inside this array so now I want to itate

over through each element inside this

array and I want to render the username

email and location for each user inside

this user info so how can I go about

doing that well to do that we're going

to be once again using our map method so

first of all we have to go inside to the

JavaScript word and then we have to use

our user info and what is the users info

users info is that array and now we're

going to be iterating over through that

array okay so I'll just use like do map

method and here I'll just provide a user

as a perimeter and now inside there

we're going to be using our ul and as I

said that we have to provide a unique

value trade so in this case I'll just

provide like meth. random and now it's

going to give us like a random number

each time we render our content to the

browser okay so now inside there I'll

just use my lii we have to go inside to

the JavaScript word once again and we

can use our user and then Dot and here

you can see we have our username

location and also the email so if I just

select my username save my file and if

this is the first time you are working

with

reactjs this may look a bit uh crazy to

you but trust me if you did a bit of

practice you will get there so I'm going

to save my file and here you can see we

now getting our uh usernames right here

for each person now I'm going to

duplicate this lineup code and instead

of providing this username I'm going to

hit control and space and now we can

select the location I'm going to

duplicate there once again and now I'm

going to hit control NW once again and

now I'm going to select my email okay so

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

back and this is how our entire code

looks like and first of all we have our

array inside this array we have our

objects and inside these objects we have

our username email and also the location

and now we are iterating over through

each item inside this array and we are

now only rendering the username location

and also the email and here you can see

we now getting the username location and

also the email so we can also change

that to the username email and then

location and now it's going to gives us

the same result right here which is

amazing but there is a optional thing

that I want to do if you don't care

about that you don't have to worry about

that if you don't know what a JavaScript

destructuring is you can go ahead and

watch my JavaScript video about there I

have a complete course on JavaScript so

if you take that course you would be

fine so now I'm going to destructure

this value if you can destructure there

you don't have to worry about that now

I'm going to remove this users from here

and I'm going to provide my cly bra

right here and I'm going to destructure

the username also the email and I'm

going to also destructure the location

as well and now I no longer have to use

this users again and again I'm going to

select that hit contrl d contrl d and

I'm going to remove that from here okay

so now if I save my file and now if I

refresh there still we are getting that

same result right here but now we no

longer have to provide that user dot

again and again for all of these

properties so yeah this is how we are

going to be destructuring the properties

from this array welcome to another

challenge so in this one you will

practice how you can render a list of

data so the first thing that I want to

do is that create a user list. jsx file

and inside there create a user list

component create a users array with the

following object like this object right

here each user will have the ID name and

also the edge then use a map method to

render each user to the Dom okay so

that's going to be the first portion of

this challenge in the next portion

you're going to be creating a product

list file and inside that file you're

going to be creating a product list

component and inside that component

you're going to be creating a products

array and inside this array you will

have have like these objects which will

represent different objects so we have

ID for the object the name price and

yeah I guess that's going to be fine and

now finally you have registered that

inside the app component so 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 my user list.

jsx component inside that I'm going to

be using my RFC so the first thing that

we want to do is they want to create our

users array so I'll just use like cons

users and that's going to be set to this

array and now inside this array we're

going to be creating different object

for each object or for each user we're

going to be providing the ID and also

we're going to be providing the name in

this one that's going to be set to lless

and I'm going to also provide the age of

25 to there okay so now I'm going to

duplicate there a few times and I'm

going to change the ID to one to two and

also to three I'm going to also change

the name to Bob and this one to

Charlie change the edge to 30 and also

the edge 222 so that's going to be my

users array and now inside this array we

have a few users right here now I want

to itate over through their users and I

want to render them to the Dom so how

can I go about doing this so I'll just

remove this users list and inside there

we're going to be using our curly Braes

so we are now entering the JavaScript

word so now we're going to be using the

users which is our array so now inside

there we can use our map method so I'll

just provide a user and now here for

each user we're going to be rendering

the div first of all let's just write a

div and I'm going to also close this div

right here semi file and for this div

we're going to be also providing the key

and the key which we are going to be

setting will be user. ID and this ID is

coming from each of the users right here

so we have a ID one two and also the

three so that's done now inside this D

we're going to be also creating our H1

which will say name okay so for the name

we are going to be using like user.name

I'm going to also duplicate and change

that to Edge okay and also change this

label to Edge as well so now I'm going

to save my file let's just go ahead and

go to our app and register our user list

right here so I'll use like users list

save my file and here you can see we now

getting each of the user right here so

we have a Lis Bob and also Charlie so

that was the first thing now the next

thing that we have to do is that we have

to create our product list. jsx

component inside that we are going to be

using our rafc and inside there let's

just Define our products here and that's

going to be set to array in this array

will have a few object and each object

will have the ID the name so I'll just

write like iPhone or maybe phone would

be fine and I'm going to also put the

price of I don't know just a random

arbitrary price like I don't know 600

699 or something like there I'm going to

duplicate there a few times and change

there to two and also change this one to

three and I'm going to also change the

name of that to like laptop instead of

providing a phone I'm going to change

that to headphones and let's just also

change the price to to like 12200 and

also change the price to1 199 I'm going

to save my file and this is how we're

going to be defining our list of object

okay so now we have to iterate over

through there so if you want to iterate

over through there we're going to be

using a products. map method and it's

going allows us to itate over through

each element okay so now inside there

we're going to be using our div let's

just close there like

so sa my file we going to be also

passing our key today and key will be

coming from e each of the products we're

going to be providing like product. ID

which is coming from this product and

each will have different ID so that's

why we are now providing there because

that's going to be a unique one so

that's why we are now providing there so

I'm going to just use like uh H1 for the

name and I'm going to provide like

paragraph. name and I'm going to also

change that two price and change the

label two price as well so let's just

provide a dollar symbol I'm going to

sell my file and now let me go ahead and

go to my app component and register my

product product uh list right here s my

file and I'm going to comment this line

out and here you can see we're now

getting different product like we have a

phone laptop and also the headphones oh

we are providing a dollar symbol twice

I'm going to have to remove that in one

area so I'll just remove that from here

because we are already providing there

as a string so I'm going to save my file

now now that's looking better so yeah

that was our map method practice or

challenge now let's talk about the props

so Props or properties are argument pass

into react components and props allows

us to pass data from the parent

component to a child component props are

passed to a component via the HTML

attribute so here you can see I have my

app component and now inside this app

component I'm going to be calling my

user component and now let's suppose if

I want to pass some sort of a image path

from the app component which is a parent

component to the user component which is

a child component so I'll just write an

image or you can also write IMG you can

give it any name that you like and then

you have to write a equal to sign and

then you have to specify the path okay

so we can also specify the name we can

also provide the image as a number we

can also provide the is mered flag as a

Boolean and we can also provide Hobbies

as an array so this is how we are going

to be passing our data from the parent

component to the child component and now

to receive that data from the parent

component inside the child component so

this is how we going to be doing there

first of all we going to be taking a

props as a perimeter inside our

component and then we can use that prop

and then we can use the do notation to

access all of that data so I can use

like prop. image so it's going to give

us the image and now I can use prop.

name prop. age and also prop. ismed and

also prop. Hobbies okay so it's going to

gives us all of their data from the

parent component to the child component

so now let me show you all of the in

action now let's talk about the props

like how we are going to be passing our

data from the parent component to the

child component first of all we're going

to have to create our child component

component and then inside that child

component we're going to be getting our

prop okay so I'll just create my user

component and inside this user component

I'll just return my section right here

so if I save there now we have to call

or register this component inside this

parent component so I'll just use my

user component right here and now we are

going to be passing our data from this

parent component to this child component

so how can you go about doing there to

do that we're going to be using a props

and if you are coming from the HTML

background you already used props but

you didn't even know you are using it

you've already used this image tag and

now here you can see these are the props

for this image tag like we are now

providing a source and we are also

providing the alternative text for this

image props so you already use these

props but you didn't know that you were

using a prop okay so now if you want to

past some sort of a data from this

parent component to this child component

so we're going to be using a prop now we

can provide any kind of data that we

like so I'll just provide like name and

now I'll just write like hosan webd and

by the way this prop can be anything and

this value can be also anything like you

can provide banana right here and you

can provide like orange if you wanted to

that will work exactly the same so I'm

going to just undo that to name and now

I'm just spacing name from the parent

component to this child component so now

if you want to access that name inside

this child component so I'm going to

have to use my props right here so I'll

just use like props and now I'm going to

log these props to the console so I'll

just use my props right here save my

file and now Watch What Happens so if I

just refresh there what am I getting I'm

getting a name with the value of hosan

web and where is that coming from that

is coming from this user prop right here

so once again if I change that to like

banana and now if I save there I'm now

getting that banana right here so if I

just refresh there I'm now getting that

banana so yeah this is how you're going

to be passing your data from your parent

component to the child compon component

and this is how you're going to be

accessing there so now we have to use

that I'm going to just remove that from

here and now inside this section I'll

just use my H1 I'm going to provide the

label of name and here we have to render

that inside our JavaScript so we're

going to be using like props do name

right here because this is the name of

for prop if I save them and I'm now

getting the result right here now I'm

not only limited to provide the strings

I can also provide like anything I want

so I'll just use like Edge and Edge will

be set to 18 not 18

22 and I'm going to also provide the

Boolean value like is married and that's

going to be set to false we cannot see

that not right now because we are now

rendering there to the UI so we will not

see the result of there but later very

soon we're going to be also discussing

about the Boolean values for the props

as well you will see there very soon

don't worry about it we can also provide

the list if you wanted to so I'll just

use like um coding I'm going to also

provide like uh reading and also this

sleeping so if I say that so it's going

to format that it this way so I'll just

remove that from here and now we have to

access that right here so I'm going to

just put like this is my name and Edge

and I'm going to render my prop. Edge

right here I'm going to also render my

is mared uh Boolean plag so I'll just

use like is uh married and here I'm

going to pass my props do is mared and

now underneath them we are going to be

providing our H4 of hobbies and here we

have to just render or Hobbies right

here come on if I can type it today like

props do Hobbies so if I sell my file

and here you can see we now getting our

name age and also is merried but we

cannot see the value of there as I said

that we will very soon but this is just

a Boolean value and we cannot see that

not right now and we also have our

hobbies and hobbies are coding reading

and sleeping in some situation we would

also want to provide our images so I'll

just provide yet another prop for the

image and here I'm going to just pass my

own image which is coming from my guub

repository if you have your own image

you can totally proide there and now we

also have to render there right here so

I'm going to be using my image tag

instead of providing these quotes I'm

going to remove that from here and I'm

going to just render them dynamically so

I'll just use like props do image or IMG

and I'm going to also provide some text

for this alternative text so I'll just

use like props do I guess name would be

fine so if I save there and I now

getting this amazing guy but this is

super uh this is super huge so I'll just

have to provide a width of 200 would be

fine s my file and here you can see I'm

now getting this card right here so I'm

now getting my image the name Edge and

everything right here so this is how we

going to be passing our data from this

parent component to this child component

and this is how we are going to be

accessing their data by using the props

and this is how we are going to be

rendering their data by using the props

now there is one thing that I want to do

which is called the prop destructuring

but if you don't know what to D

structuring is you can either go to my

uh JavaScript course and watch what a

destructuring is or you can just read

about the you can ask from chgb if you

wanted to but you have to learn about

the prop destructuring so because I'm

going to be using a prop destructuring

right now so I'll just remove these

props right here and I'm going to just

destructure my name Edge and also is

mered flag and also the Hobbies so now I