You could even think of it acting like HTML, but that it wasn't. It was actually something called JSX and if you're new to JavaScript but you've been doing web development before, then JSX may look a little weird because it looks very similar to HTML but not quite.

So in this guide, what I want to do is I want to take a deep dive directly into what JSX is, how it's built and how you can see that it's really JavaScript, it gives us almost a middleware layer between HTML and JavaScript and you're also going to see why we use JSX because if we're to write all of this out using vanilla JavaScript, it would not be very fun.

It'd be very tedious to create any kind of React application. So JSX, does give us some very helpful shortcuts when it comes to building out our apps. So we're not going to be adding any code directly to the project. I simply want to focus on what JSX is and then that way from this point on we'll be able to have a better idea of it.

So let's switch now to the Babeljs.io site because this is going to give us a really nice way of being able to see what JSX is doing behind the scenes. So go down to where it says check out our REPL to experiment with Babel and it looks like it actually still has our same code from last time we were here, so that's cool.

But I'm going to get rid of all of this because we don't need it. Let's first start by just creating a very basic component. So let's create our portfolio item component here.

So I'm going to say portfolio, and let me zoom in just so it's a little bit easier for you to see and I'll also remove my screen video because all of the compiled output's going to be here on the right hand side. If you need to change any settings, one thing to make sure that you have set in case you changed it at some point is we want to make sure that we have React as a preset because we're going to be using JSX and so we want to make sure that that is working.

So click on that and then you can click out of all of those, yours if you're looking on a larger screen, I have mine so far zoomed in that's why it's up top. Yours is most likely on the left hand side.

So here with our portfolio item, I am then going to not even pass in anything, any props or anything, let's just close it out. Let's see here, on the right hand side, you can see that this looks very different than the component. So what Babel does is it recognizes that we're writing in JSX and so this is what is generated, this is pure JavaScript.

It says React.createElement, so create element is a built in function in React and so it says, okay, I want you to create an element, the element name is going to be portfolio item and then we're not passing in any options to it because as you saw, it's just plain, we're not passing in props or anything like that.

So now let's do that, let's see what happens when I say title equals and then we'll just say quip, just like that. Now you can see it doesn't say null, everything is almost the same, but now it actually has some data where it was null. So we have some options and you can see this is how props are being passed in. Let's also pass in that URL that we were passing in in the last guide.

So if I say google.com, just like that, now you can see that props is an object.

So I know it was a little bit harder to see in the last guide what props was, but this is what it looks like. It's just a plain vanilla object, it doesn't have the name props, but React automatically knows whenever you're passing data in like this that you are passing in a property and it converts that, it takes each one of the items, it takes the element and then the value, turns that into a key value pair object and that is how we have access to it, but this is what JSX is doing behind the scenes.

So technically we could take all of this. So if we didn't want to use JSX for some reason, we could write all of our code and we could write our component just like this, which you may think is that's not actually that bad because right here, that's not a lot of code.

Well, let's start writing some more code. So let's actually take this portfolio item and let's add a div wrapper around it. So I'm going to say div and then className, and you may notice this is something very important, whenever you're writing JSX, it looks very similar to HTML, but it has some key differences.

So for example, because it is JavaScript, you can't say class the way that you would in regular HTML because class in JavaScript is a name, it's a name reserved for classes. So you have to say className, and then from here we can say card and then let's wrap all of this up in a div. So let's close it out and now you can see that all of a sudden with just a little bit more code, we've added a lot of JavaScript code.

So now we have this React create element, it creates a div, it passes in a className of card, so this is a set of options that are being passed in. Then inside of that it is then taking our component, our portfolio item component, and it is then sliding it and nesting it inside of that card component. So that is starting to grow quite a bit.

Let's keep growing this just so you can see, the part of my goal for this is showing you why JSX was created. Because as you're about to see here shortly, there is going to be a lot of JavaScript code for something that really does not have that much functionality, so that's a reason why JSX gives us some really nice shortcuts.

So I'm going to come down here and let's wrap our portfolio item, let's wrap this up in a title card wrapper. I'm going to say div, className equals, and then let's pass in title and let's nest all of that inside of this div. Now you can see that we have added another call to React.createElement, it's created another dip for us just like this, and then it's passing in className and now nested inside of this, that's where the comma comes in here, so nested inside of it is our portfolio item component.

So far we're already up to 10 lines of code, so it's doubled in the amount of code that would have to be written. So let's add a description value, so I'll say div and then class name equals description, and then just say some details right here and close out that div and now you can see that it is already up to 16 lines of JavaScript code right here, and it's very repetitive as you can also see. There are a lot of create element function calls here, and then a lot of nesting.

So as you can see, this is a pretty small little card component. We're just passing in a little bit of data. We have some class names, if you were to have to write all of this JavaScript code every single time you wanted to render something on the page, you would not have a lot of fun in writing React, I know I wouldn't.

I would not want to write code that looked like this all day because it's going to be very hard to keep track of all of those lists and then you're going to have all of this nested content and it's just gonna be very difficult to keep track of everything, so that's why they created JSX.

JSX is simply a really nice syntax that we can use that allows us, especially if you're comfortable with HTML, it allows you to stay very close to that comfort zone. You're able to write code that looks very similar to your HTML, a few key differences, but still similar, and then the JSX portion takes care of rendering that into JavaScript.

So it builds all of that minutia code, it creates all of those create elements, it nests everything properly, even without us having to define it. We can just treat it like normal HTML in that sense, and then it understands what a parent component is, what a child component is, and how to work with all of those.

I'm going to just give one last item here. So in addition to all of this, if I wanted to pass in other values, so say for this card here, you can see right now we're only passing in a className card. If I wanted to pass in say an ID of five here, then you can see that that gets added to that optional object list.

So we now have an ID of five and then if I wanted to pass in styles, I could say styles, and notice it is not style like normal, it's styles equals and then this syntax for styles is a little tricky and we're going to get into this quite a bit more in our style section. We're going to pass it in as a string and then we're going to pass in an object and this is going to be a little different than we'll do in our actual project, but I just want you to see what this gets rendered out too.

So here if I said color and I wanted it to be red and then I wanted to have a font weight of 900 then close all of that off with curly brackets, and I know it's a little hard to see here, let me give us some room. Okay, so you can see that we have a string and then inside the string we're passing this object and it's taking in a color and a font weight.

You can see what's going on here, so it has been added, styles have been added to the list of ID in className, and then inside of that we're passing in another object that takes in all of those custom styles and you're going to see later on that working with styles in React can be a little tricky if you've never done it before and it's because if you're performing this type of style implementation where you're trying to pass data directly into the component, then it can be kind of hard to keep track of because it's building an object and that is how it's keeping track of all of those styles.

So I'm going to show you a few different ways and some ways I personally prefer to do it that makes it a little bit more straightforward, but in review, that is how JSX works. It gives you a more familiar syntax for writing JavaScript code. It's very similar to HTML that allows you to dynamically create JavaScript code that your React components can work with.

Code

<div className="card" id="5" styles="{ color: red; font-weight: 900; }">
  <div className="title">
    <PortfolioItem title="Quip" url="google.com" />
  </div>

  <div className="description">
    Some details...
  </div>
</div>

Resources

• Babel JS IO