React Tutorials
React Introduction
React Get Started
React Render HTML
React JSX
React Components
React Class
React Props
React Events
React Conditionals
React Lists
React Forms
React Router
React Memo
React CSS Styling
React Sass Styling
React ES6
React ES6
ES6 Classes
ES6 Arrow Functions
ES6 Variables
ES6 Array Methods
ES6 Destructing
ES6 Spread Operator
ES6 Modules
ES6 Ternary Operator
React Hooks
What is Hook?
useState
useContext
useRef
useReducer
useCallback
useMemo
Custom Hooks
Previous
React JSX
What is JSX
JSX stands for JavaScript XML.
JSX allows us to write HTML in React
JSX makes it easy to write and add HTML to React.
Coding JSX
JSX allows us to write HTML features in JavaScript and place them in DOM without any means of createElement() and / or appendChild().
JSX converts HTML tags into responsive objects.
You do not have to use JSX, but JSX makes it easy to write React applications.
Here are two examples. The first one does not use JSX and the second does not:
Example 1
JSX
const myelement = <h1>I Love JSX!</h1>;
ReactDOM.render(myelement, document.getElementById('root'));
Example 2
Without JSX
const myelement = React.createElement('h1', {}, 'I do not use JSX!');
ReactDOM.render(myelement, document.getElementById('root'));
As you can see from the first example, JSX allows us to write HTML directly within a JavaScript code.
JSX is a JavaScript-based JavaScript language extension, and is translated into standard JavaScript during operation.
Expressions in JSX
With JSX you can write expressions within the folded parentheses {}.
An expression can be a React variable, or a location, or another valid JavaScript expression. JSX will extract a quote and return the 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 in multiple lines, insert HTML inside brackets:
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
HTML code should be wrapped with ONE high-quality item.
So if you like to write two paragraphs, you have to put them inside the parent object, like the 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>
);
JSX will make a mistake if HTML is incorrect, or if HTML misses the parent feature.
Alternatively, you can use "episode" to wrap multiple lines. This will prevent you from adding unnecessarily additional nodes to the DOM.
Episode looks like a blank 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 complies with XML rules, so HTML components must be properly encrypted.
Example
Close empty elements with />
const myelement = <input type="text" />;
JSX will crash if HTML is not properly encrypted.
Attribute class = className
The class attribute is the most widely used attribute in HTML, but since JSX translates as JavaScript, and the class keyword is a JavaScript-protected word, you are not allowed to use it in JSX.
Use the attribute className instead.
JSX solved this by using className instead. When JSX is provided, it translates className attributes into 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 inside JSX.
In order to use the conditional statements in the JSX, you must state that if the statements are outside the JSX, or you can use the ternary expression instead:
Option 1:
Write if statements are outside 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>;
Option 2:
Instead, use the following expressions:
Example
Write "Hello" if x is less than 10, otherwise "Goodbye":
const x = 5;
const myelement = <h1>{(x) < 10 ? "Hello" : "Goodbye"}</h1>;
Note that in order to embed a JavaScript expression within JSX, JavaScript must be wrapped in folded parentheses, {}.