Cheatsheets / Learn React

JSX

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>
);
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>
);

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>;

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 <br />
a 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'
);

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>

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 dom/client';
compiled before it reaches a web browser. The code
block shows some example JavaScript code that will
const container =
need to be 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>
);

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
// above will be rendered as <h1>100</h1>
must 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.

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.

Print Share