We have one more thing to cover before we jump into creating our first react app JSX. If you recall earlier I mentioned JSX is an HTML like syntax used to describe react elements. Although it may look a lot like HTML, it's actually an extension of JavaScript. And most people find it easier to work with and reacts top level API calls like react create element. With that being said, it's important to remember that JSX still gets compiled down to react create element calls. To demonstrate, I'll use a tool that actually show us what JSX gets compiled down to.
So I'm going to just go ahead and copy our app component. On the left, you'll see the JSX version of the component. And on the right, you'll actually see the compiler output from that component. If we take a closer look at the compiled version of the component, you can actually see it's made up of multiple calls to react create element, each one of these calls corresponds to an element in our JSX component. We have our main react create element call, which is a div which goes back to our main div here that has a class name of app and then it has some Child Elements as well an h1 and an h2 which we in both see represent And in here by two more calls to react create element. When comparing these two versions of the same component, I find that JSX version much easier to read.
I think this will hold true for most developers that are familiar with HTML, all the lessons to follow will be using JSX. But I wanted to show what is going on under the hood when you create a JSX component, the real beauty of JSX as it comes with the full power of JavaScript behind it, let's start with some JSX fundamentals. First, embedding expressions. This all sounds really fancy, but we've actually already worked with an expression here, our props dot version that's being rendered on screen as an expression in JSX. Expressions will just be wrapped in curly braces, the contents of the curly braces are what are actually being evaluated. In this case, we're just outputting the value of props dot version to the screen.
Before we continue, I want to make a couple quick tweaks to code sandbox, we're going to start by collapsing our file editor by clicking on the File editor tab. And then I'm just going to shrink our browser window a bit here on the right. Now I'm going to go ahead and update our expression. So that actually renders a message conditionally based on the value of version, a version is greater than one, I'm going to render out a message that says invalid version version is less than or equal to one, then I'm going to actually render out the props version like we were doing before. If I go ahead and update our version to be 2.0, though, you can now see that we actually have a new message invalid version rendered to screen. As you can see, we didn't have to do anything special here to get this to work.
This is just a plain old JavaScript ternary operator that renders one message or another based on the condition. This is what I love about JSX is just JavaScript, no need to learn yet another templating language. Now that we've made some changes, I'm gonna go ahead and save it work. You may have noticed soon as we save our code actually auto format. This is because code sandbox actually using a tool called prettier, which takes the monotonous job of code formatting and does it for you automatically. Now that we've covered JSX expressions, let's move on to attributes.
When specifying attributes in JSX. There are some key differences when compared to HTML attributes. react, Dom uses camelcase for attribute names. For example lowercase on click becomes camel case on click lowercase tab index becomes camel case tab index. When specifying attribute values, you have two options. The first is string literals, and is straightforward.
And the second is expressions which allow for creating dynamic attribute values like so just to show this is working. I'm going to pop open the console here you can see that this is actually evaluating to a tab index have to be careful when using expressions as attribute values not to wrap it in quotes. This will result in the expression not being evaluated and being treated as a string literal instead. And that concludes the basics of JSX. But don't worry, we'll be getting into more advanced JSX usage in the upcoming lessons.