Alright, we need to talk about some of the gotchas of JSX. While it looks a lot like HTML, it is a little bit stricter and there's a few hiccups and pain points that you're likely to encounter as a beginner. The first thing is you need to keep in mind that at the top level here, this is one function call here, that one. And so for that reason, you cannot have multiple top level HTML elements.

And so for that reason, you cannot have multiple top level HTML elements. So if I had an h1 tag that said hello, you can see I'm instantly being warned that something's wrong. And if I try to save, we have completely bombed our output file here. Babel wasn't able to convert this code into JavaScript, but sometimes you do want multiple top level elements in your markup and luckily there is a React.Fragment

but sometimes you do want multiple top level elements in your markup and luckily there is a React.Fragment that you can use for that exact reason. It'll wrap your markup in the parent most React.createElement function call, but then it'll disappear in the browser and not be present. So if we look at the markup here, we have our <h1> and <ul> top level, no fragment, nowhere to be found. And if React.Fragment seems like a lot to type, you can have an empty tag like this,

And if React, that fragment seems like a lot to type. You can have an empty tag like this, which I personally like a lot. It represents an empty or phantom or disappearing element. And behind the scenes it'll still do create elements for a React fragment. So remember only ever one top level element wrapping your markup, and if you need to, you can use a fragment. The second gotcha I already mentioned is you need to use className instead of class.

The second gotcha I already mentioned is you need to use class name instead of class. If you want to pass some CSS classes. I mentioned that class is a reserved keyword in JavaScript. And another case where something similar happens is if you have a form, an Insight, you have an input type of text. And let's say that this input had an id of firstName and also a name of firstName in HTML. You could have a label that has a for attribute pointing to the id.

You could have a label that has a four attributes pointing to the Idea. But you can see here that you have to use htmlFor because once again for is a JavaScript reserved keyword. By the time it makes it to the browser, it resolves into for and class. And you can see I can click on the label and the input gets focused. And by the way, see how we, just a few more elements

and the input gets focused. And by the way, see how we, just a few more elements with attributes, how out of control these React createElement chain looks like. So yeah, JSX is pretty cool. And since we have an input tag here, you might know that in HTML, the input tag is a self-closing tag and you can technically omit the closing tag. Same goes for images and a few other elements. In JSX, you must close every single tag you can see I

Same goes for images and a few other elements. In GSX, you must close every single tag you can see. I haven't even saved and it already tells me that it doesn't have the closing tag. And if I was to save that once again, we will explode our output file and also explode our ui. So make sure you always close every single tag that you open. And luckily the tooling is really good to let you know about this problem.

And luckily the tooling is really good to let you know about this problem. And one more very important distinction to make with JSX is you can see how every tag here starts with a lowercase and gets turned into a string that matches an HTML attribute. But if I had an h1 with an uppercase, you can see that instead of a string, it's now looking for an h1 function or React component that is also going to bomb our UI.

for an H1 function or react component that is also going to bomb our UI because the H1 function is not defined. In other words, if you were to call this H1 starting with an uppercase H, it's expecting a function H1 that returns something like hello, or in that case little sneak peek children. So now we're calling that H1 function with a string of hello as the children here. And so it'll be passed in the children, which means

of hello as the children here. And so it'll be passed in the children, which means that if I change that to hi, we are going to call this function and the children will be high and hi will go there. And now our H1 output is correct. Similarly, if I had a JSX function called greeting, that returns H2. Hello there. If I was to try to call it here with a lowercase, we would try

Hello there. If I was to try to call it here with a lowercase, we would try to output a greeting HTML tag, which doesn't exist. And it's literally outputting a greeting opening and closing HTML tag, which doesn't really resolve to anything. But if we were to call it with the uppercase G, now we would get the expected H2 output. Finally, real quick, any opening and closing tag without children can be self closed like

Finally, real quick, any opening and closing tag without children can be self closed like this and you can remove the other one and it'll have the same result. Alright, I could tell you so much more about GSX with this little input output example, but I think that we should now go and set up a proper build tool, something that is more realistic to a real world project, and so we don't have to rely on the CDN script tag

that is more realistic to a real world project, and so we don't have to rely on the CDN script tag and the warning to not use in production. Let's do that in the next video.