All language subtitles for 011 Building & Re-Using Another Component_en

This first code here

for our Todo element,

exists in this App component.

There's nothing wrong with it.

But not only do we have some static text here,

we would of course want the actual Todo title here.

Not only is that the case,

if we would want to add a second Todo,

we would have to replicate this entire code block.

And if we then ever want to change anything about that,

let's say we wanna add extra span

to that button, whatever.

Then we have to do this in all those places

where we use the same code.

That's not really what we wanna do.

That's why React embraces this concept of components

of building our own building blocks,

which we then compose together.

For this, I'll remove this duplicate code

and instead create a new file.

A new file in that src folder,

which I'll name Todo.js.

The name is up to you,

the extension should be dot js though.

And that will simply hold another component,

we're going to build our second component here.

Now typically, those component files,

except for that so called root component,

this App component,

are stored in a separate components folder,

which I also added in the source folder.

So, I'll move Todo.js into that folder.

That's not a must do,

but it is a convention to keep your project organized.

Now in this Todo.js file,

I wanna create my second component,

that Todo component.

And we did learn that a component in React

is just a function.

So in the end here,

we define a function Todo

and then we export that.

We need to export it like this with this syntax,

to make this function available outside of this file

and usable in other files.

Now, one important to note about this function name though,

you can name your component functions however you want.

But, there is one important restriction,

one important thing to keep in mind.

The name of the function

should start with a capital character.

That matters because when we later use this function

as a component in our HTML code,

so if we use it as a custom HTML element,

then it will have to start with a capital character

there as well,

to differentiate it from the built-in HTML elements.

React wants custom components

to start with a capital character.

So now we have our function here.

And then here in this function,

we must return something that can be rendered

to turn this function into a component.

And that something is this div here,

this div with the class name card.

I'll cut it from App.js

and then return it here in Todo.js.

And press that auto format shortcut again.

So now that's our Todo function

returning this JS Xcode.

Back in App.js,

we can now use this Todo component.

And we don't do that by executing Todo like a function

as we would normally do that.

But instead, we use it as a custom HTML element,

just as we did it with App in the index.js file.

So here, where I cut the code from,

I'll add Todo like this as an HTML element.

The only special thing here

is that it's self closing.

Alternatively, we write an opening and closing tag,

this would work as well.

But since there will be no content between the tags,

we can also write a self closing tag.

But then it has to have this forward slash,

it would not be allowed like this.

Now, as noted before,

it is worth pointing out here,

that this component,

this custom element,

when we're using it here in this JS Xcode,

that there it has to start with a capital character.

So, todo with a lowercase t at the beginning

would not be valid.

Because react internally

differentiates between built-in HTML elements like divs,

and h1 tags and custom elements, by casing.

All these built-in elements

start with a lowercase character,

custom elements built by you or others

have to start with the uppercase character.

And that is just something to be aware of.

Now to use Todo in App.js though,

we need to import it from the Todo.js file.

And for this at the top of this file,

we import Todo from dot slash components

to construct a relative path

to that components folder, slash Todo.

Again, the file extension of dot js can be omitted here.

That's now this Todo imported and rendered here.

If we now save all files,

we see the same output as before,

which is good.

That means that everything still works.

But, we're now getting to the output

with help of our separate component.

Now, if we wanna have multiple Todos,

we just got to replicate this Todo component here

in the App component.

And we now have a couple of Todos.

And if we now ever want to change anything

about that Todo component,

about this HTML markup

that makes up our Todo,

we just need to do it in the Todo.js file,

like adding this span

which has no real purpose,

but acts as a demo.

And if we did save that file,

we see that extra span in all our Todos.

Because we defined it once

and then reuse it multiple times.

Just as in vanilla JavaScript,

we would define a function once,

and then possibly call it multiple times

from different places in our application.

It's the same concept here with React components.

Though we don't need to span here,

so I will get rid of that now.

What we do need here though,

is some configurability.

At the moment,

all Todo is just say TITLE.

And that's not too useful.

These should be different Todo titles

for our different Todos.

And of course,

I can change the title here to Learn React.

But since I do this in this Todo.js file,

this will now affect all Todo usages again.

So, all Todos which were outputting.

So, that's not how we make this more configurable.

Instead, we want to let the place

where we used the Todo.

So the App component,

pass different data into these Todo components,

just as we pass arguments into functions

when we call them,

to then output different data in each Todo instance,

depending on which data we're passing in.

And that's what we're going to do now.