Alright, you and I need to talk about this GSX thing. As you can see, the title of this video is called Give It Five Minutes. And the reason is for the majority of people, myself included, the very first encounter with GSX is kind of like rough and almost the feel of disgust. Something similar to tailwind CSS classes for the very first time separation of concerns and really, really challenging thoughts come to you. So why is GSX a good thing?

and really, really challenging thoughts come to you. So why is GSX a good thing? That's what we want to talk about in this video. And you know what, actually you don't even need to use GSX in React. You can use React without GSX, but as you'll see, you probably do not want to. To illustrate my point, I've done a few throwaway changes to the code base. So I have installed bubble, the CLI and the React preset.

I've done a few throwaway changes to the code base. So I have installed bubble, the CLI and the React preset and then I have a script here that takes an input file. You can see the .jsx extension, which is for JSX. And so it's going to take this input, run it through Babel and then put it in the output .js file with the watch flag, I have moved the exact React component that we had at the end of the last video in its own file. The input.jsx and you can see I'm exporting it here and then I move the codes that wires up the React root nodes.

The inputs that GSX and you can see I'm exporting it here and then I move the codes that wires up the react root nodes outside the index.html file and into an app.jsx file. And from the index.html file, I have a script tag pointing to that file. Notice I had to add the type="module" here to be able to use ES6 imports in the app.jsx file that GSX file imports the inputs that GSX file we've just created and then render the App component in the root element.

that GSX file we've just created and then render the App component in the root element. So the App is still showing up exactly like before, but now we have this input set up and we running it through babel and I can open a split panel to the right and here I will open the output that JS file. Watch your eyes. Whoa. Yep. This is the output of JSX markup. Once it's been transformed, it's a series of nested React

This is the output of JSX markup. Once it's been transformed, it's a series of nested React.createElement calls all the way down. So let's just keep the outer div, delete everything else and we'll see we have a single createElement call with two parameters React. That createElement actually takes three parameters. If I add a little bit of text here, hello. You will see that a third parameter is passed to the createElement call.

You will see that a third parameter is passed to the createElement call. Okay, so if we break down this createElement function, the first parameter is the elements, the HTML elements that we want. The second one, which is null here is called the props or attributes that are passed to this element. And finally the third one is the children or what is passed between the opening and closing tags. So if I was to pass an attribute to this element,

or what is passed between the opening and closing tags. So if I was to pass an attribute to this element, something like aria-label equals greeting, you can see we now have this props object attributes object with aria-label greeting passed to it. And so I don't know about you, but I much prefer writing this than writing that. And this is just one single element. Just for fun though, let's try to have another list with three list items inside of it.

Just for fun though, let's try to have an an another list with three list items inside of it and we are going to write it without jsx using React, that createElement, React that createElement. And we want an ul list here. We will not have any attributes so I'll pass no. And then we want to have a series of children here. We actually want multiple ones. So let's have them in an array. And inside the array I will have a nested,

So let's have them in an array. And inside the array I will have a nested, you get the idea React.createElement li, no, hello and world. So let's save this. As you can see, the output is the same because we have been using createElement directly and our ul has been properly rendered in the browser right here. If we wanted to add attributes to our ul, we could pass an object here and we can add a CSS class.

If we wanted to add attributes to our unordered list, we could pass an object here and we can add a CSS class. Now class is a reserved keyword in JavaScript and so JSX or even createElement uses className instead. That's something to remember. And here we'll have myCoolList and if we check now the ul has myCoolList class. Alright, I dunno about you, but I had enough of these createElement syntax. So I will delete all of this.

but I had enough of these create element syntax. So I will delete all of this and create the same another list with ul. Do my cool list and then Ally, hello and ally world. And honestly, when you look at them side by side, it suddenly makes a lot of sense on why JSX is a good idea. You basically get an expressive, simple declarative markup that looks like HTML, but has the whole power of JavaScript under the hood.

that looks like HTML, but has the whole power of JavaScript under the hood. While it really helps to reason about GSX as if it was HTML, it's quite important to remember that it's just JavaScript and it's really a series of reacts that create element function calls that are nested inside another. If you can look at your GSX markup and see the function calls that it triggers under the hood, you will understand a whole lot about React.

and see the function calls that it triggers under the hood, you will understand a whole lot about React.