React JSX
JSX stands for JavaScript XML.
JSX enables us to write HTML in React.
JSX makes it easy to build and add HTML in React.
Coding JSX
JSX allows us to write HTML elements with JavaScript and insert them into the DOM without using the createElement() and/or appendChild() methods.
JSX turns HTML tags into React elements.
You do not have to utilize JSX, although it makes it easier to develop React applications.
Here are two instances. The first uses JSX, but the second does not:
Example 1
JSX:
const myElement = <h1>I Love JSX!</h1>;
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);
Example 2
Without JSX:
const myElement = React.createElement('h1', {}, 'I do not use JSX!');
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);
As demonstrated in the first example, JSX allows us to express HTML right within JavaScript code.
JSX is a JavaScript extension based on ES6 that is transformed into standard JavaScript at runtime.
Expressions in JSX
JSX allows you to write expressions inside curly braces { }.
The expression may be a React variable, a property, or any other acceptable JavaScript expression. JSX will run the expression and produce this result:
Example
Execute the expression 5 + 5:
const myElement = <h1>React is {5 + 5} times better with JSX</h1>;
Inserting a Large Block of HTML
To write HTML on many lines, place 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>
);
One Top Level Element
The HTML code must be enclosed in a single top-level element.
So, if you want to write two paragraphs, place them inside a parent element, such as a div element.
Example
Wrap two paragraphs inside a single DIV element.
const myElement = (
<div>
<p>I am a paragraph.</p>
<p>I am a paragraph too.</p>
</div>
);
If the HTML is incorrect or there is a missing parent element, JSX will throw an error.
You can also use a “fragment” to wrap numerous lines. This will avoid adding unnecessary nodes to the DOM.
A fragment resembles an empty HTML tag: <></>.
Example
Wrap two paragraphs inside a fragment:
const myElement = (
<>
<p>I am a paragraph.</p>
<p>I am a paragraph too.</p>
</>
);
Elements Must be Closed
JSX respects XML conventions, therefore HTML elements must be properly closed.
Example
Close empty elements with />
const myElement = <input type="text" />;
JSX will generate an error if the HTML is not correctly closed.
Attribute class = className
The class attribute is commonly used in HTML, however because JSX is rendered as JavaScript, and the class keyword is a reserved word in JavaScript, you cannot use it in JSX.
Use the attribute className instead.
JSX fixed this by using className instead. When rendered, JSX converts className attributes to class attributes.
Example
Use attribute className instead of class in JSX:
const myElement = <h1 className="myclass">Hello World</h1>;
Conditions - if statements
React supports if statements, but not within JSX.
To utilize conditional statements in JSX, place the if statements outside of the JSX, or use a ternary expression instead:
Option 1:
Use if statements outside of JSX code.
Example
If x is less than 10, write “Hello”; otherwise, “Goodbye”:
const x = 5;
let text = "Goodbye";
if (x < 10) {
text = "Hello";
}
const myElement = <h1>{text}</h1>;
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>;
NOTE To embed a JavaScript expression in JSX, wrap it with curly braces, {}.
