One of the key original innovations offered by React js was this use of JSX to declaratively define the structure of the user interface. In this lesson, we will look at what it actually looks like in memory when we create something in JSX, what it means when people say that we are using virtual TOM and why it is such a powerful abstraction compared to those that came before it. So let's go here. We have an empty React application, and as we have seen before, we can return some JSX from this particular component to render some HTML to the screen. So what exactly is JSX?

Well, the best abstraction that I can give you is to simply think of it as a fancy way of describing some fancy JavaScript objects. For example, we can log an object to the console, which contains a member children that points to a particular string. Now, JSX is actually just a JavaScript object as well. And when we log it out, you can see that this simple dev containing some text gets transcribed into a JavaScript object that contains a number of properties, including the fact that it is a diviv and that it contains the children hello from the other site. And in fact, just like we can store this JavaScript object

into a variable, we can do the same thing with A JSX expression, for example, create a variable called JSX and point it to this particular expression. And when we log out the JSX variable, you can see that we get exactly the same output that we got before. And in fact, we can go one step further and even replace what is returned from the app as this JSX variable. And our application continues to look exactly how it did before this change. And this is the basics of virtual dome. When we create J sx, we are not talking to browser native elements, and instead we are working with J SX elements,

which virtually define what we want the real dome to look like. So we can use JSX to declaratively define what we want, the final version of the domme rendered within the browser to look like. But in addition to supporting browser native tags such as D spans, inputs, buttons, we can actually use JSX with custom elements as well. Now anything that starts with the lowercase letter is assumed to be a browser native element. So D in diff is lowercase and therefore it is browser native. Similarly, we could use the bold tag B and B is lowercase, therefore it is browser native.

But if you want to define a custom element, we can do so with a simple function. This is known as a custom react component. The only requirement is that it must start with a capital case letter. Hey, we are defining a custom component called custom example, which one rendered will render the browser native div containing the text custom element example. So we can replace a bold tag with this custom element, and now we see this custom component rendered to the screen. A really powerful feature of JSX is that because it is embedded within JavaScript,

you can actually easily use variables and other JavaScript expressions within JSX by using what is known as interpolation, for example. In addition to displaying the text one plus one, we can even show its resolved Value by putting it within curly braces within our JSX. This expression is going to get evaluated and as you can see, it renders the value too. A requirement for interpolation is that whatever you put within it must be a JavaScript expression. And obviously you might have the question, what is a JavaScript expression? Well, the simplest way to think of it is anything

that you can assign to a variable in JavaScript is actually a JavaScript expression. So because you can assign the value of one plus one to a variable within JavaScript, therefore one plus one is a valid JavaScript expression and can be used within an interpolation within JS six. And similarly, because we can assign one variable to another variable, for example, we could create another variable to store this variable result. Therefore, result is also a valid JavaScript expression. Now, not all JavaScript expressions can be rendered by React, but in addition to number

that we have seen right now, there are other types supported as well. For example, if you create a variable, pointing to a string, string is a perfectly fine thing to use with an interpolation. Similarly, we can actually even use JSX with an interpolation. For example, HA name is pointing to a bolded out mate, JSX. And when we interpolate this particular variable, it renders exactly how you would expect. One question that you might have is how does the app component get handed over to React so that it can render it to the browser? The answer to that might be abstracted away

by some React project templates, but it's quite easy to see in the template that we've created for this course. Our app component is a simple JavaScript function, which is exported from app to tsx. Now if we jump into the application entry point called Main Do tsx, you can see that it actually imports the app component and then uses it within JSX. And as we have seen, you can have a custom element as long as the first character is capital, which is of course true for app. Now this component is actually getting rendered by what is known as the React route. And this react route is actually pointing

to real dom element, which we get from the JavaScript API called document dot Get element by id. So of course our document must contain something that has the ID route and indeed within the index html file within our project, we can see this div present within the dorm. This div containing the ID route is essentially where React will mount a virtual app component. And in fact, if we inspect the dorm right now within dev tools, you can see that it contains this div with the ID route.

And if we expand it to see its children, you can see that it contains exactly what we returned as the virtual do from our app component. So with React from our components, we return the virtual dome and it's up to react to make sure that it gets rendered as the real do and therefore gets seen by the users on screen. Now, JSX was originally a bit of a dividing factor among developer communities, but I personally always loved it and even helped create it. TypeScript version called TSX. Thank you for joining me and I'll see you in the next one.