JSX is a syntax similar to (X)HTML, but it is transpiled to JavaScript. This section highlights some of the rules and conventions of JSX.
You can write HTML directly in JavaScript using JSX.
export default function Hello () {
return <span>Hello</span>;
}The above code snippet is a React component that returns a <span> element with the text “Hello”. The syntax looks like HTML, but it is actually JSX.
In JSX, all DOM properties and attributes (including event handlers) should be camelCased. So, for example, the HTML attribute tabindex corresponds to the attribute tabIndex in JSX. As another example, the event handler onclick must be provided as onClick in JSX.
const handleLogOut = () => alert("You are signed out!");
export default function Logout(){
return (
<button onClick={handleLogOut}>
Sign out!
</button>
);
}A notable exception is the class attribute, which is a reserved keyword in JavaScript. Therefore, you should use className instead of class in JSX.
export default function Header(){
return (
<div className="title">
My cool application!
</div>
);
}You can mix JavaScript with JSX. The JavaScript bits must be enclosed between {}.
export default function Greetings(){
const name = "Ali";
return <h1>Hello {name}</h1>;
} Moreover, the JavaScript inside the {} must be an expression (return a value). This means you cannot use statements like if, for, or while directly inside JSX. Instead, you can use ternary expressions, logical operators, or functions that return values.
Since the JavaScript inside JSX must be an expression, you cannot use if-statements directly. Instead, you can use ternary expressions.
export default function Greetings({ isLoggedIn }){
return (
<div>
The user is <b>{isLoggedIn ? "currently" : "not"}</b> logged in.
</div>
);
}You can also use the boolean operators with truthy or falsy values to create conditional statements!
export default function Greetings({ isLoggedIn }){
return (
<div>
{isLoggedIn && "The user is currently logged in."}
{!isLoggedIn && "The user is not logged in."}
</div>
);
}Much like if statements, you cannot directly use loops inside JSX. Instead, you must use alternative approaches to, e.g., iterate over a list. For example, the array operations such as map, filter, and reduce are great choices.
const users = [
{id: 1, name: "Mike"},
{id: 2, name: "Peter"},
{id: 3, name: "John"},
]
export default function UserList(){
return (
<ul>
{
users.map((user, index) => {
return <li key={index}>Name: {user.name}</li>
})
}
</ul>
);
}Notice the key attribute given to <li> element in the above code snippet. A “key” is a special string attribute you need to include when creating lists of elements. Keys help React identify which items have changed, are added, or are removed. The best way to pick a key is to use a string that uniquely identifies a list item among its siblings.
You can use React components in JSX. The component name must start with an uppercase letter.
function Hello () {
return <span>Hello</span>;
}
function World () {
return <span>World</span>;
}
function HelloWorld () {
return (
<div>
<Hello/> <World/>!
</div>
);
}
export default HelloWorld;Notice how the HelloWorld component uses the Hello and World components. The Hello and World components are used as if they were HTML elements.
Moreover, notice how the <Hello/> and <World/> look like HTML elements with self-closing tags (such as <img /> or <input />). In HTML, you can eliminate the self-closing tag. In JSX, however, you must include it.
export default function Logo () {
return <img src="logo.png" />; // Do not write <img src="logo.png">
}In the earlier example, why did we wrap the <Hello/> and <World/> components in a <div>? Why not just return them directly?
function HelloWorld () {
return <Hello/> <World/>!;
}The reason is that a React component must return a single React element. Therefore, adjacent JSX elements must be wrapped in an enclosing tag.
function HelloWorld () {
return (
<div>
<Hello/> <World/>!
</div>
);
}You can always use a <div> to wrap JSX elements. Alternatively, you can use React fragments (since React 16.2):
function HelloWorld () {
return (
<React.Fragment>
<Hello/> <World/>!
</React.Fragment>
);
}The JSX equivalent for React fragment is the empty tag:
function HelloWorld () {
return (
<>
<Hello/> <World/>!
</>
);
}Notice multi-line return JSX is wrapped in parentheses. This is not strictly necessary, but it is a good practice. For example, the following code snippet is valid:
function HelloWorld () {
return <div>
<Hello/> <World/>!
</div>;
}In the above code snippet, the <div> tag is not wrapped in parentheses. However, the opening tag <div> must be on the same line as the return statement. It is all too easy to make a mistake and forget to put the opening tag on the same line. Therefore, the safe practice is to always wrap multi-line return JSX in a pair of parentheses.