All language subtitles for 019 JSX Rules.en_US

Beautiful in previous video, we covered that as far as the return from the component is a J as X.

And in this video, I would like to continue because in previous video will learn that it is kind of

like the normal, but not really.

So there are some specific rules.

So we might as well cover them right now.

And we'll start with a first one where we always, always need to return a single element.

Now, what do I mean by that?

Well, inside the element of that, we're returning, we can get extremely, extremely creative.

Like I said, you can return the whole website.

For example, I could write adding three hello, people in here.

Then after that and three, I'm going to go with another list and then list item.

And then here, let's place a link and I'll just add hash tag so it's not going to go anywhere.

And then we'll write another hello world so I can save it.

And I can clearly see that there are no issues.

Everything is working like peaches.

Now, the one thing we cannot do is notice where we have this div.

I cannot add adjacent element.

Now that could be any element.

But of course, just because it's going to be simpler, I'll just place it there and notice even before

I save, you'll have this red squiggly line.

Well, that just means that something in your project went bananas.

So if you save Norrish you'll get error where it says adjacent elements must be wrapped in the enclosing

tag.

Did you want a J fragment?

Now, I'll talk about Jerse fragment in a second.

Just keep in mind that we always need to return a single element, not what would be the solution in

this case.

Well, I could wrap everything here in a def.

Correct.

So I'll place my parents live and once we say we're not going to get any error.

Now, please keep in mind one thing, though, that at the end of the day, we're still rendering the

HMO at HMO.

We have something called semantics, where if we just return everything as dictated, if they're so

essential, we we're just creating a dish soap that is not the best practice.

So first, I would encourage you to follow the semantics.

For example, if this is something as a section, then we return a section instead of a div.

Then, for example, if this would be an article, we return the article.

And of course, keep in mind, it doesn't mean that instead of the list item, you're going to return

the article just as a common sense.

Don't place everything as definitive.

Now, there's no rule against it, but a better practice is to follow the HMO semantics.

And one more thing.

Remember this little error, how it's defragment now, I'm going to skip ahead a little bit.

But for example, if I would have the situation by the way, let me go back to these definitiveness,

if I wouldn't want to wrap everything there, since in that way I'm creating the soup in react.

We also have something called react fragment.

How does that look like?

Well, instead of enclosing everything in a div, I'm going to close this into a react fragment.

So I'm going to go with DOT and then we are typing fragment and you'll notice that this will create

a div in your HMO.

So in your final application, but also you'll have no idea.

And a shortcut essentially would be just typing the angle brackets and then the closing.

Once again, we're skipping a little bit of head.

Don't worry, we will talk about Fragment a little bit later on.

But just keep in mind that either you have an option of using proper HTML semantics or you can use a

fragment on this case I'm going to remove of the day that was causing the problems and I'll remove the

fragments as well.

And once I saw it, everything works nicely when we need to talk about the attributes in the HMO because

again, we are turning Jésus.

And for example, when we work with Gösta, we can have these in line endlessness.

For example, I could type here on Kallick.

Now, please keep in mind I'm adding this.

What they have normally probably would add this to a button, but that doesn't change the setup where

essentially in Riak you're not going to write like this.

You're not going to stay on click notice how since this is JavaScript, we must capitalize it.

So what I'm.

Here is on Kleck now, I'm not going to talk about the events right now, I'm just telling you that

each and every attribute that we all need a capitalization, you must act, otherwise there's going

to be another.

So the same will work with a class where with ethics class is already a key word because we know that

we can create classes.

So on a div, if we have the attribute of class in sex, we cannot write class.

So this will spit back here, OK.

Now of course, the error at the moment is the fact that we cannot see anything.

But in general you must use class name.

So that is the proper name.

Now we'll talk about this a little bit later, which is remember, every time you talk about HTML attributes,

if you need to use the chemicals, you have to do that.

Otherwise it won't work.

And then also remember how I talked about how we need to close out of the elements, even the ones that

don't have the closing tag and even the ones that in actually more five you can write without the closing

tag.

Well, in a reactive, that's not going to fly.

So, for example, right after the list item, I'm going to go with image and notice how the amateur

writer work for me with a closing tag.

And if Alameda's and if I save again, I'm going to get error.

And it clearly tells me I expected corresponding to a closing tag for the IMG.

And once I add, of course, everything is going to work beautifully.

That's a safe bet.

There's no harm.

So the same will work for input.

For example, I go with input text again.

If I met this closing tag again, I'm going to have the error and the last thing that I would want to

mention in this video.

Are these parentheses because as you start working with Jessop's, you'll notice that once in a while

they will be added by the year and once in a while there will just omentum.

So what are the rules?

Not technically.

You don't have to use the parentheses, but I can tell you right away that your life will be a little

bit easier if you do so.

Let me show you what I mean.

For example, here I have the return.

I'm just going to go with that one and I'm going to say hello.

World life is awesome.

However, if, for example, you will move your whole thing over here, notice how this one got great

out.

And essentially now once you say it, you'll have this semicolon.

So technically, you can only get the parentheses, but then you always, always need to make sure that

your opening tag is in the same line as your return.

Otherwise it will add that semicolon and then you will get this out.

So this just saves you from running around like a headless chicken and looking for error where the error

does not exist.

However, if you add those parentheses, it will be fixed right away for you.

Again, prettier.

A lot of times we'll just add them or will remove them.

So don't stress about that.

But I'm just telling you, the rule that if you add these parentheses, then you don't have to worry

about placing this there, meaning the opening time in the same line here.

I can simply move to the next line and again, I can go with adding one and then Hello World, and you'll

see that there are no issues.

OK, that's something that I would want you to keep in mind again.

We must, must, must, must always return a single element.

Then it is beneficial if we pay attention to external semantics or we can simply use the fragment then

as far as the attributes we are using the camel case because at the end of it, this is JavaScript than

the class is already keyword.

So we must use a class name and we'll talk about the in detail a little bit later on as well as we would

want to close up every single element, even the ones that are not technically required by the normal

five.

And then lastly, it is beneficial to use these parentheses because you just don't need to worry about

setting up your opening tag in the same line as the return.