4/2/25, 10:36 a.m.

React JSX

 Tutorials  Exercises  Services   Sign Up Log in

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C

React JSX
❮ Previous Next ❯

What is JSX?
JSX stands for JavaScript XML.

JSX allows us to write HTML in React.

JSX makes it easier to write and add HTML in React.

Coding JSX
JSX allows us to write HTML elements in JavaScript and place them in the DOM without
any createElement() and/or appendChild() methods.

JSX converts HTML tags into react elements.

You are not required to use JSX, but JSX makes it easier to write React applications.

Here are two examples. The first uses JSX and the second does not:

Example 1
https://www.w3schools.com/REACT/react_jsx.asp 1/11
4/2/25, 10:36 a.m. React JSX

JSX:
 Tutorials  Exercises  Services   Sign Up Log in

const myElement = <h1>I Love JSX!</h1>;

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(myElement);

Run Example »

Example 2
Without JSX:

const myElement = React.createElement('h1', {}, 'I do not use JSX!');

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(myElement);

Run Example »

As you can see in the first example, JSX allows us to write HTML directly within the
JavaScript code.

JSX is an extension of the JavaScript language based on ES6, and is translated into
regular JavaScript at runtime.

Get Certified!
school
w3 s
5
CE

02

TI 2
Complete the React modules, do the exercises, take the exam and become
R

FI .
ED

w3schools certified!!

$95 ENROLL

https://www.w3schools.com/REACT/react_jsx.asp 2/11
4/2/25, 10:36 a.m. React JSX

 Tutorials  Exercises  Services   Sign Up Log in

Expressions in JSX
HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C
With JSX you can write expressions inside curly braces { } .

The expression can be a React variable, or property, or any other valid JavaScript
expression. JSX will execute the expression and return the result:

Example
Execute the expression 5 + 5 :

const myElement = <h1>React is {5 + 5} times better with JSX</h1>;

Run Example »

Inserting a Large Block of HTML

To write HTML on multiple lines, put the HTML inside parentheses:

Example
Create a list with three list items:

const myElement = (
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Cherries</li>
</ul>
);

Run Example »

https://www.w3schools.com/REACT/react_jsx.asp 3/11
4/2/25, 10:36 a.m. React JSX

 Tutorials  Exercises  Services   Sign Up Log in

One Top Level Element
HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C
The HTML code must be wrapped in ONE top level element.

So if you like to write two paragraphs, you must put them inside a parent element, like a
div element.

Example
Wrap two paragraphs inside one DIV element:

const myElement = (
<div>
<p>I am a paragraph.</p>
<p>I am a paragraph too.</p>
</div>
);

Run Example »

JSX will throw an error if the HTML is not correct, or if the HTML misses a parent
element.

Alternatively, you can use a "fragment" to wrap multiple lines. This will prevent
unnecessarily adding extra nodes to the DOM.

A fragment looks like an empty HTML tag: <></> .

Example
Wrap two paragraphs inside a fragment:

const myElement = (
<>
https://www.w3schools.com/REACT/react_jsx.asp 4/11
4/2/25, 10:36 a.m. React JSX

<p>I am a paragraph.</p>
 Tutorials
<p>I Exercisestoo.</p>
am a paragraph  Services   Sign Up Log in
</>
HTML
 ); CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C

Run Example »

Elements Must be Closed

JSX follows XML rules, and therefore HTML elements must be properly closed.

Example
Close empty elements with />

const myElement = <input type="text" />;

Run Example »

JSX will throw an error if the HTML is not properly closed.

Attribute class = className

The class attribute is a much used attribute in HTML, but since JSX is rendered as
JavaScript, and the class keyword is a reserved word in JavaScript, you are not
allowed to use it in JSX.

Use attribute className instead.

https://www.w3schools.com/REACT/react_jsx.asp 5/11
4/2/25, 10:36 a.m. React JSX

JSX solved this by using className instead. When JSX is rendered, it translates
 Tutorials  Exercises  Services 
className attributes into class attributes.
 Sign Up Log in

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C

Example
Use attribute className instead of class in JSX:

const myElement = <h1 className="myclass">Hello World</h1>;

Run Example »

Conditions - if statements
React supports if statements, but not inside JSX.

To be able to use conditional statements in JSX, you should put the if statements
outside of the JSX, or you could use a ternary expression instead:

Option 1:

Write if statements outside of the JSX code:

Example
Write "Hello" if x is less than 10, otherwise "Goodbye":

const x = 5;
let text = "Goodbye";
if (x < 10) {
text = "Hello";
}

const myElement = <h1>{text}</h1>;

https://www.w3schools.com/REACT/react_jsx.asp 6/11
4/2/25, 10:36 a.m. React JSX

Run Example »
Tutorials  Exercises  Services   Sign Up Log in

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C

Option 2:

Use ternary expressions instead:

Example
Write "Hello" if x is less than 10, otherwise "Goodbye":

const x = 5;

const myElement = <h1>{(x) < 10 ? "Hello" : "Goodbye"}</h1>;

Run Example »

Note that in order to embed a JavaScript expression inside JSX, the JavaScript must be
wrapped with curly braces, {} .

❮ Previous Next ❯

Track your progress - it's free! Sign Up Log in

https://www.w3schools.com/REACT/react_jsx.asp 7/11
4/2/25, 10:36 a.m. React JSX

 Tutorials  Exercises  ADVERTISEMENT

Services   Sign Up Log in

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C

https://www.w3schools.com/REACT/react_jsx.asp 8/11
4/2/25, 10:36 a.m. React JSX

COLOR PICKER 
 Tutorials  Exercises  Services  Sign Up Log in

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C


ADVERTISEMENT

ADVERTISEMENT ADVERTISEMENT

https://www.w3schools.com/REACT/react_jsx.asp 9/11
4/2/25, 10:36 a.m. React JSX

 Tutorials  Exercises  Services   Sign Up Log in

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C

 PLUS SPACES GET CERTIFIED

FOR TEACHERS FOR BUSINESS CONTACT US

Top Tutorials Top References

HTML Tutorial HTML Reference
CSS Tutorial CSS Reference
JavaScript Tutorial JavaScript Reference
How To Tutorial SQL Reference
SQL Tutorial Python Reference
Python Tutorial W3.CSS Reference
W3.CSS Tutorial Bootstrap Reference
Bootstrap Tutorial PHP Reference
PHP Tutorial HTML Colors
Java Tutorial Java Reference
C++ Tutorial Angular Reference
jQuery Tutorial jQuery Reference

Top Examples Get Certified

HTML Examples HTML Certificate
CSS Examples CSS Certificate
JavaScript Examples JavaScript Certificate
How To Examples Front End Certificate
SQL Examples SQL Certificate
Python Examples Python Certificate
W3.CSS Examples PHP Certificate
Bootstrap Examples jQuery Certificate
PHP Examples Java Certificate
Java Examples C++ Certificate

https://www.w3schools.com/REACT/react_jsx.asp 10/11
4/2/25, 10:36 a.m. React JSX
XML Examples C# Certificate

 jQuery Examples
Tutorials  Exercises  Services  XML Certificate
 Sign Up Log in

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C

    

FORUM ABOUT ACADEMY

W3Schools is optimized for learning and training. Examples might be simplified to
improve reading and learning.
Tutorials, references, and examples are constantly reviewed to avoid errors, but we
cannot warrant full correctness
of all content. While using W3Schools, you agree to have read and accepted our terms of
use, cookie and privacy policy.

Copyright 1999-2025 by Refsnes Data. All Rights Reserved. W3Schools is Powered by

W3.CSS.

https://www.w3schools.com/REACT/react_jsx.asp 11/11