All language subtitles for 009 Building a First Custom Component_en

Now to work towards this expense tracker,

let's again think about the kind of components we got there.

And you might remember that in the end,

we were able to split up this simple looking application

into a bunch of Components.

In the chart, we had the individual chart bars,

we had the individual expense items,

we had the form for adding a new expense

and therefore we get a bunch of Components

and a bunch of Components we could get started with.

Now, I don't we get started with the expense item though.

So this row where we have the title and the amount

and the date of an expense.

And therefore we now wanna build our first own Component.

Now we could add it here in App JS,

but it is considered a good and best practice

to actually put new Components into new files,

so that you have one file per Component.

And that will mean that in a React project

you will end up with dozens or hundreds of files

because on React project you'll have dozens

or hundreds of Components in the end

and that's absolutely normal.

Now to organize our source code a little bit

here in the source folder, I'll add a Components folder,

which will hold all these Components source files.

Now I will not move App JS in there

because this app Component will be a special

kind of Component.

Not regarding its code, that will be the same code

as you see it in all the other Components,

but regarding its role in the application.

It will be our so-called, root Component,

which means it's the main Component being rendered here

in our starting file in index JS.

And all our Components will be either nested

inside of App JS or nested inside of our Components

which then in turn again, are nested somewhere else.

Because ultimately with React,

we build a Component Tree, you could say.

You have two main app Component at the top,

and then below that, you could have any other

kinds of custom HTML elements.

So, other kinds of Components, which in the end

hold other pieces of the user interface.

And big application stare for, of course

can result in quite big Component Trees

where only the top most Component is rendered directly

into the HTML page,

with help of that React dom render instruction.

All the other Components will not be rendered

with this instruction but instead will be used

as regular HTML elements inside of our HTML code,

inside of our Components.

But you'll see that all in action in a second.

So instead of the Components folder, I'll add a new file,

and I'm using shortcuts here,

you can also use these buttons, of course,

for adding folders and files.

And I'll add a new file here, which I will name,

expense item dot JS, because this will hold

my expense item Component.

Now, one word about the fall name.

Here again, you are generally free

to name this however you want, but it's a common convention

in React applications to name it like this.

Starting with a capital character, one word,

where if you combine multiple words in one word,

every sub word, so to say,

starts with a new capital character like the I here in item.

And then inside of this Component,

if the file is named like this,

you'll of course should have a Component

that is dealing with rendering expense item data.

So that the file name tells us which kind of logic

and HTML code will live inside of that file.

So now let's write the concrete Component code

in that new file.

And of course that means that we now finally

have to understand what Component code is.

How is a Component written in React?

Well, we already saw it in App JS.

It's just a function.

And that is a key takeaway, that is super important,

definitely keep that in mind.

A Component in React is just a JavaScript function.

A special kind of function special regarding what it returns

that it does return this JSX code, but other than that,

it's just a Java script function.

Therefore, if we wanna create

an expense item Component here, we add the function keyword,

give it any name of our choice, though again,

the convention is to repeat the file name here

just without the extension, so expense item.

And then in here we return the HTML code, the JSX code,

which should be brought onto the screen by this Component.

So for the moment I'll add an h2 tag here

and say expense item in there.

Now that's our first very basic custom made Component.

And of course it's quite similar to the app Component

which I gave to you, because in the end,

all Components are similar.

Components are just functions which then return HTML code.

And of course the HTML code do you do return in a Component

depends on what the Components should render on the screen.

Of course, that's not our final HTML code

for this kind of Component.

Now to use this Component, we need to export it.

Otherwise it's only usable inside of that file

and that's not helpful to us.

So, we add an export statement which in JavaScript

simply looks like this.

We export this function as the default for this file.

Now we can import it in another file.

And as I mentioned, we're not going to import it

in index JS, and we're not going to render it like this,

because we only do this once for our root Component.

Instead, I now wanna use my custom Component here

like a regular HTML element, so like h2 element,

inside of the HTML code written in the app Component here.

Hence at the top of the app JS file,

we should now import our accustomed Component.

So we simply import expense item from dot slash Components,

we need to go into this Components folder,

because that's where the file lives, slash expense item,

and then without the extension.

This path in the end tells JavaScript

that we're looking for expense item file

in a Components folder which sits next to this app JS file

in which we have does import statement.

Now that this is imported, the cool thing is

that we can just use this like an HTML element.

So we can, for example, replace this paragraph

with expense item like this opening and closing

written like this.

The key difference to the built in HTML elements

just is that it's not starting with a lowercase character,

but with an uppercase character.

And indeed your own custom Components

must start with an uppercase character

when you're using DOM JSX code like this,

so that React is able to detect

that this is a custom Component.

Because the simple rule which React applies

is that lowercase elements are built in HTML elements.

So it will look for them as built in elements.

Whereas elements starting with an uppercase character

are elements defined by you or some other developer.

So this is a custom made Component

and we have to use the name which we use here in the import

as a name here, because that's how this connection

is established.

This tells React that we want to use this Component

which is imported under this name

from the expense item file.

If we now save everything, all the files,

and we go back to the browser,

we see expense items showing up here,

which of course is the H two tag rendered

by our own custom Component.

Because we now created and imported

used this custom Component.

And it's always these steps.

You create a Component, which is in the end, just a function

of returning some HTML code, you then export it.

And then ultimately you import it in the file

where you wanna use it so that they're in the JSX code,

you can use it like an HTML element,

just starting with this uppercase character.