Article: React JSX: Curly Braces in your HTML Elements

React JSX is an XML-like extension to ECMAScript without any defined semantics.

• By Mensah Alkebu-Lan
• 02 November 2022

Table of Contents

• Overview
• References

Overview

JSX stands for JavaScript XML. It is an XML-like extension to ECMAScript without any defined semantics.

Those familiar with React know it can be used to produce React elements. JSX comes with the full power of JavaScript. Since you now can write HTML in React, it means you no longer have to put markup and logic in separate files.

It is not intended to be implemented by engines or browsers. JSX expressions become regular JavaScript function calls and evaluate to JavaScript objects when compiled.

It means expressions like the one below have meaning.

const myElement = <img src='/images/avatar-of-user.png' />

Needless to say, this is not valid JavaScript, but it is JSX code. Here, you see an HTML tag is assigned to a JavaScript variable. It is written directly within the JavaScript code. Because JSX allows you to use curly braces to embed expressions, you can also do the following to make the elements dynamic.

const myElement = <img src={user.avatarUrl}/>

Here, a JavaScript expression is embedded in an HTML attribute. One thing to keep in mind is JSX is closer to JavaScript than HTML. For example, HTML attributes are in camel case. There are also HTML attributes that are reserved words in JavaScript, so the solution for things like HTML’s ‘class’ attribute is it becomes ‘className’ when writing JSX code.

The HTML can be written on multiple lines. When doing so, there must be at least one top level element, and this element must be wrapped in parentheses.

const myElement = (
<div>
	<p>paragraph 1</p>
	<p>paragraph 2</p>
</div>)

There’s no shame when starting out in writing JSX in JavaScript files. React makes that easy by giving you the ability to import JavaScript code that allows you to convert JSX code into React code. A simple example would be the following:

import React from 'react';
import '.App.css';

function App() {
	return <h1>Hello, World</>;
}

export default App;

References

“JSX.” Meta Open Source. Accessed 1 November 2022.

“Introducing JSX – React.” React. Accessed 1 November 2022.

“React JSX.” W3Schools. Accessed 1 November 2022.

Chavan, Yogesh. “JSX in React – Explained with Examples.” freeCodeCamp, 1 February 2021. Accessed 1 November 2022.

Morgan, Joe. “How To Create React Elements with JSX.” DigitalOcean, 13 April 2020. Accessed 1 November 2022.