Important most things you should know about JSX

What JSX is

JSX is a syntax extension for JavaScript. Basically, it extends JavaScript so that constructs like HTML/XML 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’s actually a JS file. Since it’s an extension to JavaScript, your browser won’t understand it unless it’s compiled into plain JavaScript. So it would help if you used a JSX compiler like Babel for that.

JSX is a JavaScript Expression

JSX expressions are also JavaScript expressions. When compiled, it actually becomes a regular JavaScript object. For example, the following code:

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.

Because they are compiled for objects, JSX can be used wherever regular JavaScript expressions can be used. They can be saved in variables as we did above, used in loops, passed as arguments to functions, returned from functions, stored in arrays and objects… anywhere JavaScript expressions can be used.

Nesting in JSX

Just like HTML, you can nest several lines of JSX within one element. To do that, 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 use camelCase naming convention instead of HTML attribute names. That was why 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 that 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 be the raw JSX itself or the name of a variable that contains JSX. The second argument is the target element in the HTML file to which you want the JSX to be appended to.

To understand better, look at the following example.

const names = (
	<ul>
		<li>Teach</li>
		<li>Developer</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>
);