JSX stands for JavaScript XML and it allows us to write HTML directly within React. This makes it easier to create and manage HTML structures within React applications.
Coding with JSX
JSX allows us to write HTML elements directly in JavaScript and place them in the DOM without using createElement()
and/or appendChild()
methods. JSX converts HTML tags into React elements. While using JSX is not mandatory, it simplifies writing React applications.
Here are two examples: one with JSX and one without.
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 converted into regular JavaScript at runtime.
Using JSX
const myElement = <h1>I Love Learning JSX!</h1>; const root = ReactDOM.createRoot(document.getElementById('root')); root.render(myElement);
Without JSX
const myElement = React.createElement('h1', {}, 'I am not using JSX!'); const root = ReactDOM.createRoot(document.getElementById('root')); root.render(myElement);
Expressions in JSX
With JSX, you can write expressions inside curly braces {}
. These expressions can be React variables, properties, or any valid JavaScript expressions. JSX will execute the expression and return the result.
Execute the expression 5 + 5 EXAMPLE
const myElement = <h1>React is {5 + 5} times better with JSX</h1>;
Inserting a Large Block of HTML
To write HTML over multiple lines, enclose the HTML code within parentheses.
Create a list with three items EXAMPLE
const myElement = ( <ul> <li>Oranges</li> <li>Mangoes</li> <li>Grapes</li> </ul> );
One Top Level Element
The HTML code must be wrapped in a single top-level element. If you need to write two paragraphs, place them inside a parent element, such as a <div>
.
Wrap two paragraphs inside a <div>
element EXAMPLE
JSX will throw an error if the HTML is not correctly structured or missing a parent element. Alternatively, you can use a “fragment” which prevents adding unnecessary nodes to the DOM.
A fragment looks like an empty HTML tag: <></>
.
Wrap two paragraphs inside a fragment EXAMPLE
const myElement = ( <> <p>I am a beginner at React.</p> <p>I am learning fast!</p> </> );
Elements Must Be Closed
JSX follows XML rules, so HTML elements must be properly closed.
Close empty elements with a self-closing tag EXAMPLE
const myElement = <input type="text" />;
JSX will throw an error if the HTML elements are not properly closed.
Attribute class = className
The class
attribute is commonly used in HTML. However, since the class
keyword is reserved in JavaScript, JSX uses className
instead. When JSX is rendered, className
attributes are converted to class
attributes.
Using className
instead of class
in JSX EXAMPLE
const myElement = <h1 className="myClass">Hello, World!</h1>;
Conditions – if Statements
React supports if statements but not inside JSX. To use conditional statements in JSX, place the if statements outside the JSX or use a ternary expression.
Option 1: Write if statements outside JSX:
Write “Hello” if x is less than 10, otherwise “Goodbye” EXAMPLE
const x = 5; let text = "Goodbye"; if (x < 10) { text = "Hello"; } const myElement = <h1>{text}</h1>;
Option 2: Use ternary expressions:
Write “Hello” if x is less than 10, otherwise “Goodbye” EXAMPLE
When embedding a JavaScript expression in JSX, remember to wrap the JavaScript with curly braces {}
.
const x = 5; const myElement = <h1>{x < 10 ? "Hello" : "Goodbye"}</h1>;