JSX vs. HTML: Key Differences that Every React Developer Should Know

The React.js library is a vast improvement over plain, vanilla JavaScript, making the lives of front-end developers and UI designers vastly easier. One of the main enhancements of React over JavaScript is a hybrid markup syntax called JSX (Java-Script-XML). JSX is what you get when JavaScript and HTML have a kid. While this is a very intuitive way to work with JavaScript, it can also be extremely confusing for people who are very used to plain HTML. In this guide, I’m going to highlight the major differences between HTML and JSX, so that you can avoid the mistakes that many other React developers make.

If you want some great introductory information on JSX, you can visit the React docs for JSX, which will answer most questions you might have.

Contents

• JSX has a transpiler called Babel
• JSX can only have one top-level element
• JSX has React fragments, which are nameless tags
• JSX tags must be explicitly closed
• JSX components are capitalized
• Instead of ‘class,’ JSX uses ‘className’
• JSX is easier to embed JavaScript expressions into

JSX has a transpiler called Babel

The first thing to know about JSX is that it is not valid JavaScript code. If you were to type in some JSX into the browser console, all you would get is a syntax error and hurt feelings. the console has no idea what to do with all that strange-looking code. This is why React relies on what’s called a transpiler.

The transpiler used by React is called Babel. Whenever you run your code, Babel will go through it and convert all of the JSX into valid JavaScript code that the browser can interpret. For example, look at the following two blocks of code. The first is valid JSX (though you may be fooled into thinking that it’s HTML!) and the second is what the Babel transpiler will convert that expression into.

// A JSX expression, before translation
<h1 id="heading1">Hello World!</h1>;

// Babel will turn that expression into:
React.createElement('h1', { id: 'heading1' }, 'Hello World!');

If you’ve ever wondered why you always have to write import React from 'react' in every component file, that’s why. Even though you aren’t directly using the React variable, Babel will turn all of your JSX into function calls from that object. This extra step in the rendering process may take a few extra milliseconds, but the simplicity that this “syntactic sugar” adds to your code is well worth it.,/p>

JSX can only have one top-level element

In HTML, you are allowed to write code like the following:

<h1>This is a top-level element, a heading</h1>
<div>This is another top-level element, a div<div>

However, this code would be invalid in JSX. Why? Well, JSX expressions are only allowed to have one top-level element. If you look back at that HTML above you’ll see that those two elements are not enclosed by any other elements. They have no parent, making them both top-level elements. To turn that into valid JSX, you could surround the heading as well as the div with another element, usually another div, as shown below.

<div>
	<h1>This is a top-level element, a heading</h1>
	<div>This is another top-level element, a div<div>
</div>

JSX has React fragments, which are nameless tags

As you may have imagined, having to wrap every group of JSX elements inside of a div or some other tag can be a real pain in the neck. One of the other ways to give your expressions a top-level element is by using a React fragment. A React fragment is an anonymous tag that does nothing but act as a wrapper for other elements. They are created by using the <> and <> tags, which as you can see are nothing but nameless HTML tags. So the code in the last section, where we surrounded the markup with a div, could be instead written this way:

<>
	<h1>This is a top-level element, a heading</h1>
	<div>This is another top-level element, a div<div>
</>

JSX tags must be explicitly closed

Technically, both HTML and JSX have the option of explicitly closing tags that are normally self-closing, but in JSX this is a rule. You can’t simply write <img src="#" >. In JSX you must close every tag that you open. The proper way to display an image would be: <img src"#" />

JSX components are capitalized by convention

In order to distinguish React components from regular HTML tags, in JSX we will always start component names with a capital letter. For example, <Heading />, <ContentBox />, or <LongReactComponentName />. That way you can easily see which tags are React components and which are regular HTML.

Instead of ‘class,’ JSX uses ‘className’

The class attribute in HTML is probably the most common attribute, which is why it is extremely hard to get into the habit of using className in JSX code. The reason this change exists is that JavaScript already has a class keyword, and using it in JSX expressions would only confuse the browser and probably give you a syntax error. It’s easy to forget that you’re actually writing JavaScript when adding markup to a React component. Just remember that and you should be able to avoid that common mistake.

JSX is easier to embed JavaScript expressions into

With plain HTML and JavaScript, embedding any kind of data into elements is famously clunky. This is probably one of the main justifications for using a JavaScript framework. For instance, below is the code used to insert the value of a pre-defined value, <code.name, code=””> into a heading.</code.name,>

<h1>Hi, my name is </h1>

<script>
	const name = 'Slim Shady';
	const h1 = document.querySelector('h1');
	h1.innerText += name;
</script>

And if you want to change the text based on some kind of user input, the code gets more complicated. On the other hand, in JSX you are able to embed JavaScript expressions directly into your markup using bracket ({ }) syntax, as shown below.

const name = 'Slim Shady';
<h1>Hi, my name is { name }</h1>

Conclusion

That’s it! Those are all of the major differences between HTML and JSX. If you can keep all of these things in mind when you write your React code, you can avoid hundreds of mistakes that other developers make on a daily basis. (Even I confuse the two sometimes, especially when it comes to that pesky className rule.) If I missed any important differences, feel free to let me know in the comments so I can add them to the article. Thanks!