9 Things you should know about JSX

17 October, 2017 | ● react ● javascript

const hello = <h1>Hello World</h1>

The line of code above is written in JSX. JS what??

You might have come across the term JSX before but don't know what it is. You probably have even used it or are creating applications with it. In any case, this article should interest you. It discusses 9 things you should know about JSX. This includes what JSX is and how it can be used. Let's get started already.

What JSX is

JSX is a syntax extension for JavaScript. Basically, it extends JavaScript so that HTML/XML like structures can be used with JavaScript. It allows developers to use HTML syntax to compose JavaScript components. This makes it possible to have a clear and familiar syntax for defining DOM tree structures with attributes.

Although it looks a lot like HTML, it actually belongs to a JS file. Since it's an extension for JavaScript, your browser will not understand it unless it is compiled into plain JavaScript. So you need to use a JSX compiler such as Babel for it.

JSX is a JavaScript Expression

JSX expressions are JavaScript expressions too. When compiled, they actually become regular JavaScript objects. For instance, the code below:

const hello = <h1 className = "greet"> Hello World </h1>

will be compiled to

const hello = React.createElement {
	type: "h1",
	props: {
	className: "greet",  
	children: "Hello World" 
	}
}

Notice that className was used instead of class. I'll explain that shortly.

Since they are compiled to objects, JSX can be used wherever a regular JavaScript expression can be used. It can be saved in variables just like we did above, used in loops, passed as arguments to functions, can be returned from functions, stored in arrays and objects... wherever JavaScript expressions can be used.

Nesting in JSX

Just like HTML you can nest several lines of JSX within one element. To do that though, you need to nest all of them in brackets () like the example below.

(
	<div>
		<h1> Hello World!!! </h1>
		<p> I am a human </p>
	</div>
)

One outermost element please

A JSX expression must have only one outer element. Therefore, while this will work

const headings = (
	<div id = "outermost-element">
		<h1>I am a heading </h1>
		<h2>I am also a heading</h1> 
	</div>
);

this will not work

const headings = (
	<h1>I am a heading </h1>
	<h2>I am also a heading</h1>
);

For the love of camelCase

Since JSX is closer to JavaScript than HTML, JSX properties make use of camelCase naming convention instead of HTML attribute names. That was why in point 2, className was used and tabIndex is used instead of tabindex. This is also true of event listeners in JSX. While lowercase is used for event listeners in HTML, camelCase is used in JSX.

This will work in JSX

<button onClick = {handleClick}>Click Me</button>

This will not work in JSX

<button onclick = {handleClick}>Click Me</button>

JavaScript in JSX

You can embed JavaScript in JSX, but to do this, you need to make use of curly braces. For instance if you want to add `2+3` in a JSX expression, you'll do this like this.

<p> 2+3 = {2+3} </p>

will result to

2+3 = 5

Displaying JSX

For JSX to appear on the screen of a browser, it has to be rendered. ReactDOM.render() is the most common way to render JSX. ReactDOM is a JavaScript library which contains several methods that deal with the DOM in some way.

ReactDOM.render() takes the JSX expression, creates corresponding tree nodes and adds it to the DOM. That way your JSX expression appears on the screen. To get your JSX to appear onscreen, you pass two arguments to the ReactDOM.render(). The first argument is the JSX you want to render, which could the raw JSX itself or the name of a variable which contains JSX. The second argument is the target element in the html file where you want the JSX to be appended to.

To understand better, look at the following example.

const names = (
	<ul>
		<li>Sarah</li>
		<li>Annabel</li>
	</ul>
);

ReactDOM.render(names , document.getElementById("app"));

Try it on Codepen

Self Closing Tags in JSX

For HTML elements that have self closing tags such as <img>, <hr>, <input> and br, the forward slash before the closing angle bracket should be included in JSX. While this is optional in HTML, it is compulsory in JSX.

while this is good in JSX

<hr />

this is not good in JSX

<hr>

Don't forget the Keys

When making a list in JSX, your list should include a JSX attribute called Keys. Keys are similar to id and they are used internally by React to keep track of the list items. Without this, React might scramble the order of the list. So if the order of your list is important, the key attribute is important. Below is how you use keys.

const toDO = (
	<ul>
		<li key = "todo-1"> Design </li>
		<li key = "todo-2"> Develop </li>
		<li key = "todo-3"> Be Awesome </li>
	</ul>
);

And there you have it, 9 things you should know about JSX. Did I miss anything? I'll love to know about it.

← All Articles