REACT JS TUTORIAL #3 - Composing Multiple React.js Components Video Lecture | Learn React JS: Fundamentals for Front-End Developers - Front-End Programming

in this video we're going to move beyond
a single component and we're going to
build an entire layout may completely
have react components so our client j/s
really shouldn't it doesn't need to have
our layout in it so let's go ahead and
cut that out of the picture our first
step is we're going to make it into its
own component so I'm going to make a new
folder in the j/s directory called
components and in that components I'm
going to make a new file paste that in
and let's save this as layout j/s I'm
actually going to capitalize it because
as a standard rule of thumb you always
want components to have a capital letter
be capitalized I'm going to port react
I don't need react DOM and there we go
let's go full screen for this so now I
have my layout all I have to do is
export my class that I've created so I
can require it now into client j/s
components layout and now this rest will
work as intended
I can probably clean up that space there
don't need it anymore so now I've got
importing layout I'm exporting layout
let's save and make sure it still works
yep everything still works as expected
great so let's go ahead and create the
rest of our page now so we have our
layout and then let's go and create a
header and a footer I'm going to go
ahead and just save this as
heterogeneity header and we'll get rid
of this whole constructor function and
we'll return a header tag we'll just
leave that there for now excellent
that's in place let's go ahead and pour
that into our layouts
I'll get rid of this constructor mess as
well and we're returning our one div and
we're printing header again it's
capitalized and I can use it straight
there in the HTML because it's a
component components can render anywhere
in the HTML that you want you can see
I've got header going and again the
reason we capitalized components as a
standard is because they're a
constructor the header is not a rendered
Dom element yet it's a it has the
capacity to render out a Dom element
whenever we print it so I could do this
and this and this and it's going to
render out three completely different
elements later on we'll get into showing
you how you can pass unique details and
information into each one of these and
make them actually render into three
different looking headers another option
you have if you want to render multiple
versions of something is I could call
this a list I could do an array and I
could make it an array of three dumb
elements which is very useful for
something like a list full of lis
and then I can just go list and JSX is
smart enough to know that that is an
array of three components so let's
render each one as components so that's
what you would do if say your main was
an unordered list and each one of these
was an Li of sorts then that would be
the way you'd want to handle that and
each one could get passed in its own
specific information so let's just go
ahead and undo some undoing here to
where we just have a header there you go
now let's make our footer I'm just going
to go ahead and save header as footer
this will be the footer tag
and now my layout can import footer as
well see I'm always having to run
through the alphabet in my head to
figure out which comes first you always
want to keep those alphabetized we can
print our header and our footer see what
we got
should render out excellent we're good
to go and then you can create a body and
so forth so this is kind of a standard
layout here sometimes people will do a
pages folder that has all of our very
very top level components which what in
this case would be layout and then
components would be everything that
lives with inside of a page so that's an
option you can have your layout living
components or you could have a separate
pages folder or sometimes that would be
called routes and then inside of these
like I said is your top-level components
and then if a component has a component
within it
standard ways you'll probably want to
just create a new folder so let's say
this header actually has a title in it
let's go ahead and create a new folder
and we're going to call it header so any
component within the header component is
going to go into here I know that was a
mouthful so we'll put you in there and
call you title so here's my title j/s
we're going to call it title and we're
going to return an h1 so there's my
title and my header will now import that
title and use it and it will simply
print title so now I should have a
welcome
that's a header with a title h1 inside
of it and there's my footer let's go
ahead and just look real quickly at the
Dom that was created from that here's my
app and then there's an h1 getting
printed and there's a footer getting
printed so even though header is
returning the title there's no extra Dom
elements that get added unless I want to
wrap a div in there
now there will be a div inside that's my
header component and then that's my
header div and that's how it all works
out
so hope you enjoyed this lesson now
let's get into some of the more meaty
meat and potatoes portion of react and
that's passing values into components
there's multiple ways of doing it
there's right ways and there's wrong
ways so this is one of the next pieces
that you really want to get right if you
want to learn react properly so we'll
get into data and passing around data in
the next video