Elements Utilizing Different Elements: The 10 Days of React JS (Day 4)

by birtanpublished on July 3, 2020


hello everyone in this lesson we're

going to see how one react component can

use or leverage another react component

let's jump right into the action so in

our previous lesson we wrote a bit of

JSX code and our entire interface is

defined or declared right here at the

moment this still feels relatively

organized because each one of our

sections write the header content and

footer each section is only one line of

code but in the real world our header

might be hundreds or thousands of lines

of code with this in mind one of the key

concepts in react is breaking down your

code into bite-sized or sort of single

responsibility components to show you

what I mean I want you to follow along

with me right now so let's use our

imagination and let's imagine that our

heading was actually 500 lines of code

and instead of just this one heading

level one well in that case it would

make sense that we'd want to store that

code somewhere else and then just

reference or point towards that code

here so here's how I would do that let's

scroll down a bit so maybe right below

our our app function you can just drop

down and let's create a brand new

function so type this in with me

function we could name it anything we

want but let's name it our header so

that's capital o and then capital H

parentheses curly brackets okay and then

within the body of this function we can

just return and then if we want it to

have multiple lines of HTML or I should

say multiple lines of JSX

you would have parentheses and then you

could drop down but if you're only going

to have a single element right or a

single line of code you don't need the

parentheses so we can just return a

heading level one and inside it say our

amazing app header okay so this function

represents a new separate component

named our header

so then if we scroll back up to our main

application component well check this

out we can remove this heading level 1

and instead in its place just say less

than symbol our header slash greater

than symbol cool we see that that is

successfully rendered it's no longer

orange because I forgot to add that so

if you scroll down to our header on this

h1 you could say class name equals

special now yes our header is still only

one line of code but that's not the

point if our header was a hundred lines

of code you could store that in this

component right you could just wrap this

in parenthesis and the idea is that our

main component just references or points

towards that component so this is still

our one centrally located or cohesive

place to assemble or define or declare

our interface but pointing or leveraging

other components within this component

lets us stay super organized now

practice makes perfect so let's practice

turning our content area and our footer

into components let's start with our

time paragraph so select that element

and copy it into your clipboard and then

if we scroll down we can create a new

function say function we could name it

anything we want but just so we're on

the same page let's call it time area

parenthesis curly brackets and then we

just return and then paste in your

clipboard and again in the real world

you'd probably have more than one

element or more than one line of code in

that case you would just have

parenthesis and then you could include

as many lines of JSX

as you want but we just have one line so

return paste ok then back up in our our

app instead of that actual paragraph

here we can just say time area slash

close out that tag cool and let's do the

same thing for our footer so I would

just copy this into my clipboard

go and create a function let's name it

footer and just have it returned and

paste in that text then up here instead

of actually including that we can just

say footer cool so this way we're still

declaring our interface in one central

place only now even if each one of these

sections took up hundreds or thousands

of lines of code

well our bird's-eye view of the app is

very clean and intuitive and easy to

look at and make sense of now at this

point I want to transition into our next

topic which is making components

flexible so in react a component is

reusable meaning you define what a

component should be once and then you

can use it or render it as many times as

you want so for example let's take our

header we could render not just one our

header but two or three so if I copy

this and then just right below it

conclude it another two times right then

down in the preview area we see three

headers now in our particular example it

doesn't make sense to show the header

more than once but you can imagine that

in a real world application with real

content and real data you would

absolutely want to render certain

components more than once right like a

list of user data or a list of blog

posts or status updates and this idea of

reusing components like this brings us

to the topic for our next lesson which

is properties or props props let us pass

data into a component which really lets

the component come alive in terms of

being flexible and reusable props are

definitely one of the aha moments of

learning react so I'm really looking

forward to this next lesson with you

let's keep things rolling and I'll see

you then to get immediate and lifetime

access to the full 15 hour video of

course you can find a heavily discounted


in the description for this video thank

you so much for watching and take care


Be the first to comment “Elements Utilizing Different Elements: The 10 Days of React JS (Day 4)”

Your email address will not be published.

There are no comments yet.