React 2020 — P7: JSX. I contemplated even doing a JSX…
By: Dino Cajic
Tags: React, Reactjs, JavaScript, Programming, Web Development

I contemplated even doing a JSX tutorial since it resembles HTML syntax so much. There are a few differences I guess that we do need to cover though. JSX stands for JavaScript XML. You don’t have to use JSX in React, but it is a heck-of-a-lot easier to use than the alternative.

Let’s create a new component and ruffle some feathers at the same time. Under src/components create a new functional component called WhyMenShouldntWearSkinnyJeans.

Import the component into App.js and render it.

If you take a look at the result in your browser, you’ll see your rendered component (npm start).

Great. Standard stuff so far. But, how would we convert the example we just looked at to not use JSX? The simple syntax that we’re used to gets converted into JavaScript with the aid of React.createElement(). The createElement() method accepts a few parameters. The first parameter is the type of element that you want to create. In our case, we want to create a <div> tag.

React.createElement('div', ...)

The next parameter lists the element attribute. We’re not going to need any attributes for this element, so we’ll just enter null.

React.createElement('div', null, ...)

The third parameter is the content that’s going inside of the element.

React.createElement('div', null, 'Because they look terrible');

If you save your file, you’ll notice that you get the same result.

This already looks messy. What if we had nested tags? Imagine that we had an <h1> tag surrounding the string Because they look terrible. It’s pretty simple with JSX.

It’s not as neat with React.createElement(). You can’t just surround the third parameter string with the <h1> tag.

Won't work

React.createElement('div', null, '<h1>Because...</h1>');

So how do you get around this? You have to place another React.createElement() as the third parameter and then pass all of the content.

As you can see, this starts looking like a complete mess, just like skinny jeans on men. I hope that you’re seeing the benefit of JSX already.

I’m not satisfied with just one reason though. I want to add a slew of reasons. JSX makes my life simple. We’ll create an unordered list and list a few reasons in there.

Should we create it for fun without JSX? Sure, why not?

I suggest that you just forget about this and use JSX like normal people.

What are some other differences between JSX and HTML? JavaScript has some reserved keywords, like class, so you can’t just plug in the class attribute to obtain a CSS class like you would with HTML. In JSX, the class attribute referring to a CSS class is actually className.

<div className="bad-decisions"><ul>...</ul></div>

You’ll notice that className is written with the camel case notation. You can have functions called with the onClick attribute; again, notice the camel case syntax. If we add a function burnPants to the onClick attribute, we’ll have a Failed to Compile error because we haven’t created the burnPants function (which we definitely should create).

Finally, you will have to add the self-closing tag syntax. For example, the <br> tag in HTML does not have a closing tag. Since it doesn’t, we call that tag a self-closing tag. You may be familiar with self-closing tag syntax in HTML as well, even though it’s not pushed any more. In JSX, it’s required: <br />. Same concept can be applied to other tags such as the <img /> tag. That’s really all you have to know for JSX. You’re always more than welcome to look up the documentation on React’s website.