All language subtitles for 010 Writing More Complex JSX Code_en

Okay.

So we created our first custom component.

It's definitely not too exciting,

but it is a custom component

and we're using it in app JS.

Now let's make it a bit more exciting at least.

And for that

and the expense item JS file.

I wanna tweak the HTML code,

which is being returned here.

Let's say I expense items should not just be, some title,

but we all wanna display the amount

of this expense.

And then also the date.

So therefore we wanna write HTML code,

which nicely displays

and structures these three pieces of information.

Hence here, we could say

that we wanted to have a div HTML element,

which displaced the date, later.

And for the moment I'll just put date here,

as a placeholder.

And then next to that div,

I'll have, let's say another div,

which actually should display, the title.

Let's say inside of a H two tag title,

and then also,

another div, next to the title,

with the amount.

Now you can see this is getting unreadable,

but even worse.

It seems to have an error.

My IDE is complaining

about this line of code.

Now regarding the readability,

we could try to split it

across multiple lines,

but that would be kind of invalid,

but we have a bigger problem anyways.

This code is not valid like this.

In react components,

there is one important rule,

regarding this HTML,

this JSX code which you return,

inside of a component.

You must only have,

one root element here,

per return statement

or per JSX code snippet, you could say.

And here we have this div,

side-by-side with this div.

Which means we have two,

root elements here,

in this statement.

And that's simply not allowed.

Now, why is that not allowed?

That's something I'll come back

to in a deep dive lecture later

in the section,

for the moment let's just accept

that this is not allowed.

And therefore the question is

how we may work around that.

One of the easiest work arounds,

is to wrap this into another div,

opening and closing.

So opening div,

and then a closing div.

I will also show you another work around later,

but that is a simple work around.

We can apply immediately.

Now regarding the readability.

We can improve that,

by also wrapping this all in brackets,

simply to signal to JavaScript

that this is one

and the same statement,

even if it should span multiple lines.

And then we can restructure this

as we want to.

Though, the quickest way

of restructuring this,

really is to use the auto format shortcut,

which I just did.

You can find this if you go

to your preferences keyboard shortcuts,

and there you search

for format document.

This shortcut if you press this,

it automatically formats your code

and makes it easier to read.

And I will use this shortcut a lot

throughout this course,

because it keeps our code readable and manageable.

And now we expand

that this HTML code,

of this component.

And we now have more than just one H two tag.

And very important is that rule,

of having only one root element,

inside of this one element,

which we returned here.

So inside of this main div,

which we returned here,

you may then have multiple elements

and the divs elements then,

also maybe side by side,

as you can tell.

It's really just the root element

in a JSX code snippet like here,

when we return it,

which must only be, one element,

instead of multiple,

side-by-side elements.

But with that,

we now prepared our basic structure here.

Now of course for a title,

we might now say,

car insurance, before amount.

We may be say, $249.67,

something like this.

And for a date,

we might say something like, March 28th, 2021,

something like this.

And if we now save this,

that's what we see here.

Still not looking super nice,

but we can see it.

And we can see

that we can have more complex HTML structures,

inside of our components as well.

Nonetheless of course,

our applications all just should, look nice.

They should not just have some HTML code which is ugly.

So let's now have a look at,

how we can add some basic styling here.