5/1/25, 2:11 PM Introduction to React: JSX Cheatsheet | Codecademy

Cheatsheets / Introduction to React

JSX

Nested JSX elements

In order for the code to compile, a JSX expression must const myClasses = (
have exactly one outermost element. In the below
<a href="https://www.codecademy.com">
block of code the <a> tag is the outermost element.
<h1>
Sign Up!
</h1>
</a>
);

JSX Syntax and JavaScript

JSX is a syntax extension of JavaScript. It’s used to import React from 'react';
create DOM elements which are then rendered in the
import { createRoot } from 'react-
React DOM.
A JavaScript file containing JSX will have to be compiled dom/client';
before it reaches a web browser. The code block shows
some example JavaScript code that will need to be
const container =
compiled.
document.getElementById('app');
const root = createRoot(container);
root.render(<h1>Render me!</h1>);

Multiline JSX Expression

A JSX expression that spans multiple lines must be const myList = (

wrapped in parentheses: ( and ) . In the example
<ul>
code, we see the opening parentheses on the same line
as the constant declaration, before the JSX expression <li>item 1</li>
begins. We see the closing parentheses on the line <li>item 2</li>
following the end of the JSX expression.
<li>item 3</li>
</ul>
);

https://www.codecademy.com/learn/bwa-intro-to-react/modules/react-101-jsx-u/cheatsheet 1/7
5/1/25, 2:11 PM Introduction to React: JSX Cheatsheet | Codecademy

JSX syntax and HTML

In the block of code we see the similarities between const title = <h1>Welcome all!</h1>
JSX syntax and HTML: they both use the angle bracket
opening and closing tags ( <h1> and </h1> ).
When used in a React component, JSX will be rendered
as HTML in the browser.

JSX attributes

The syntax of JSX attributes closely resembles that of const example = <h1 id="example">JSX
HTML attributes. In the block of code, inside of the
Attributes</h1>;
opening tag of the <h1> JSX element, we see an id
attribute with the value "example" .

ReactDOM JavaScript library

The JavaScript library react-dom/client contains the import React from 'react';
createRoot() method, which is used to create a React
import { createRoot } from 'react-
root at the HTML element used as an argument. The
React root renders JSX elements to the DOM by taking dom/client';
a JSX expression, creating a corresponding tree of DOM
nodes, and adding that tree to the DOM.
const container =
The code example begins by creating a React root at
the HTML element with the id app and storing it in document.getElementById('app');
root . Then, using root ‘s render() method, the JSX const root = createRoot(container);
used as an argument is rendered.

root.render(<h1>This is an example.
</h1>);

Embedding JavaScript in JSX

JavaScript expressions may be embedded within JSX let expr = <h1>{10 * 10}</h1>;
expressions. The embedded JavaScript expression must
// above will be rendered as <h1>100</h1>
be wrapped in curly braces.
In the provided example, we are embedding the
JavaScript expression 10 * 10 within the <h1> tag.
When this JSX expression is rendered to the DOM, the
embedded JavaScript expression is evaluated and
rendered as 100 as the content of the <h1> tag.

https://www.codecademy.com/learn/bwa-intro-to-react/modules/react-101-jsx-u/cheatsheet 2/7
5/1/25, 2:11 PM Introduction to React: JSX Cheatsheet | Codecademy

The Virtual Dom

React uses Virtual DOM, which can be thought of as a

blueprint of the DOM. When any changes are made to
React elements, the Virtual DOM is updated. The Virtual
DOM finds the differences between it and the DOM and
re-renders only the elements in the DOM that changed.
This makes the Virtual DOM faster and more efficient
than updating the entire DOM.

JSX className

In JSX, you can’t use the word class ! You have to use // When rendered, this JSX expression...
className instead. This is because JSX gets
const heading = <h1 className="large-
translated into JavaScript, and class is a reserved
word in JavaScript. heading">Codecademy</h1>;
When JSX is rendered, JSX className attributes are
automatically rendered as class attributes. // ...will be rendered as this HTML
<h1 class="large-heading">Codecademy</h1>

JSX and conditional

In JSX, && is commonly used to render an element // All of the list items will display if
based on a boolean condition. && works best in
// baby is false and age is above 25
conditionals that will sometimes do an action, but other
times do nothing at all. const tasty = (
If the expression on the left of the && evaluates as <ul>
true, then the JSX on the right of the && will be <li>Applesauce</li>
rendered. If the first expression is false, however, then
{ !baby && <li>Pizza</li> }
the JSX to the right of the && will be ignored and not
rendered. { age > 15 && <li>Brussels
Sprouts</li> }
{ age > 20 && <li>Oysters</li> }
{ age > 25 && <li>Grappa</li> }
</ul>
);

https://www.codecademy.com/learn/bwa-intro-to-react/modules/react-101-jsx-u/cheatsheet 3/7
5/1/25, 2:11 PM Introduction to React: JSX Cheatsheet | Codecademy

JSX conditionals

JSX does not support if/else syntax in embedded // Using ternary operator
JavaScript. There are three ways to express
const headline = (
conditionals for use with JSX elements:
1. a ternary within curly braces in JSX <h1>
2. an if statement outside a JSX element, or { age >= drinkingAge ? 'Buy Drink' :
3. the && operator.
'Do Teen Stuff' }
</h1>
);

// Using if/else outside of JSX

let text;

if (age >= drinkingAge) { text = 'Buy

Drink' }
else { text = 'Do Teen Stuff' }

const headline = <h1>{ text }</h1>

// Using && operator. Renders as empty

div if length is 0
const unreadMessages = [ 'hello?',
'remember me!'];

const update = (
<div>
{unreadMessages.length > 0 &&
<h1>
You have {unreadMessages.length}
unread messages.
</h1>
}
</div>
);

https://www.codecademy.com/learn/bwa-intro-to-react/modules/react-101-jsx-u/cheatsheet 4/7
5/1/25, 2:11 PM Introduction to React: JSX Cheatsheet | Codecademy

Embedding JavaScript code in JSX

Any text between JSX tags will be read as text content, <p>{ Math.random() }</p>
not as JavaScript. In order for the text to be read as
JavaScript, the code must be embedded between curly
braces { } . // Above JSX will be rendered something
like this:
<p>0.88</p>

JSX element event listeners

In JSX, event listeners are specified as attributes on // Basic example

elements. An event listener attribute’s name should be
const handleClick = () => alert("Hello
written in camelCase, such as onClick for an
onclick event, and onMouseOver for an world!");
onmouseover event.
An event listener attribute’s value should be a function.
const button = <button onClick=
Event listener functions can be declared inline or as
variables and they can optionally take one argument {handleClick}>Click here</button>;
representing the event.

// Example with event parameter

const handleMouseOver = (event) =>
event.target.style.color = 'purple';

const button2 = <div onMouseOver=

{handleMouseOver}>Drag here to change
color</div>;

Setting JSX attribute values with embedded JavaScript

When writing JSX, it’s common to set attributes using const introClass = "introduction";
embedded JavaScript variables.
const introParagraph = <p className=
{introClass}>Hello world</p>;

https://www.codecademy.com/learn/bwa-intro-to-react/modules/react-101-jsx-u/cheatsheet 5/7
5/1/25, 2:11 PM Introduction to React: JSX Cheatsheet | Codecademy

JSX .map() method

The array method map() comes up often in React. It’s const strings = ['Home', 'Shop', 'About
good to get in the habit of using it alongside JSX.
Me'];
If you want to create a list of JSX elements from a given
array, then map() over each element in the array,
returning a list item for each one. const listItems = strings.map(string =>
<li>{string}</li>);

<ul>{listItems}</ul>

JSX empty elements syntax

In JSX, empty elements must explicitly be closed using a <br />

closing slash at the end of their tag: <tagName /> .
<img src="example_url" />
A couple examples of empty element tags that must
explicitly be closed include <br> and <img> .

React.createElement() Creates Virtual DOM Elements

The React.createElement() function is used by React // The following JSX...

to actually create virtual DOM elements from JSX.
const h1 = <h1 className="header">Hello
When the JSX is compiled, it is replaced by calls to
React.createElement() . world</h1>;
You usually won’t write this function yourself, but it’s
useful to know about.
// ...will be compiled to the following:
const h1 = React.createElement(
'h1',
{
className: 'header',
},
'Hello world'
);

https://www.codecademy.com/learn/bwa-intro-to-react/modules/react-101-jsx-u/cheatsheet 6/7
5/1/25, 2:11 PM Introduction to React: JSX Cheatsheet | Codecademy

JSX key attribute

In JSX elements in a list, the key attribute is used to <ul>

uniquely identify individual elements. It is declared like
<li key="key1">One</li>
any other attribute.
Keys can help performance because they allow React <li key="key2">Two</li>
to keep track of whether individual list items should be <li key="key3">Three</li>
rendered, or if the order of individual items is
<li key="key4">Four</li>
important.
</ul>

Print Share

https://www.codecademy.com/learn/bwa-intro-to-react/modules/react-101-jsx-u/cheatsheet 7/7