Now that you understand what JSX is, let’s talk about how to write it correctly. JSX has a specific syntax that must be followed, and there are best practices that will help you avoid common mistakes.
In JSX, every component must return a single element. This doesn’t mean you can only have one HTML element, but that all your HTML elements must be wrapped in one “parent” container.
For example, if you try to return two sibling elements without a parent container, you will get an error:
// This will cause an error
return (
<h1>Hello</h1>
<p>Welcome to React</p>
);
To fix this, you need to wrap them in a single parent element, like a <div> or a <React.Fragment>:
// This is correct
return (
<div>
<h1>Hello</h1>
<p>Welcome to React</p>
</div>
);
A good practice is to use <React.Fragment> when you don’t want to add extra HTML elements to your page but still need a parent wrapper.
Unlike regular HTML, JSX requires that every tag must be properly closed, even the ones that don’t usually need a closing tag in HTML, like <img>, <input>, or <br>.
In HTML, you might write this:
<img src="image.jpg">
But in JSX, you must close it with a self-closing tag like this:
<img src="image.jpg" />
This rule applies to all elements that don’t have a closing tag in regular HTML, such as <input />, <br />, and <hr />.
In JSX, all HTML tags must be written in lowercase, like <div>, <h1>, and <p>. However, when you create your own components (which you’ll learn about soon), those components must start with an uppercase letter.
For example, this is how you’d create a custom component:
// Correct
function MyComponent() {
return <h1>This is my custom component</h1>;
}
// Incorrect (will cause an error)
function mycomponent() {
return <h1>This is my custom component</h1>;
}
This distinction helps React know whether you’re using a standard HTML element or a custom component you’ve created.
One of the most powerful features of JSX is that you can embed JavaScript code directly within it. To do this, you simply use curly braces `` around your JavaScript code.
For example, you can display a JavaScript variable inside JSX like this:
const name = "Medi";
return <h1>Hello, {name}!</h1>;
The curly braces `name` allow you to insert the value of the `name` variable into the JSX, and React will display it as "Hello, Medi!" in the browser.
In regular HTML, attributes like `class` and `onclick` are written in lowercase. However, in JSX, you need to use **camelCase** for attributes. This means that the first word is lowercase, and any subsequent words are capitalized.
For example:
// HTML
<button class="btn">Click Me</button>
// JSX (using camelCase)
<button className="btn">Click Me</button>
Notice that `class` becomes `className` in JSX because `class` is a reserved word in JavaScript. Similarly, `onclick` becomes `onClick`, and `tabindex` becomes `tabIndex`.
Adding comments in JSX is slightly different from regular JavaScript or HTML. In JSX, you use curly braces `` and `/* */` to add comments.
Here’s how you add a comment inside JSX:
return (
<div>
{/* This is a comment in JSX */}
<h1>Hello, World!</h1>
</div>
);
If you try to use the regular HTML comment <!-- -->, it won’t work in JSX. Always use the JavaScript-style comments with curly braces and `/* */`.
One of the best practices in JSX is to keep your code clean and easy to read. Break long lines into multiple lines to make your code easier to understand.
For example, instead of writing a long JSX element in one line, break it into multiple lines like this:
return (
<div>
<h1>Hello, Medi</h1>
<p>Welcome to React</p>
</div>
);
This makes your code more readable and maintainable, especially when working in larger teams or when revisiting your code after some time.
Understanding JSX syntax and following best practices will make your code cleaner, easier to debug, and more maintainable. JSX might look a little strange at first, but once you get the hang of it, it will become second nature. The most important things to remember are:
Following these best practices will help you avoid common mistakes and make your React components much easier to work with as you build more complex apps.
Now that you’re familiar with JSX syntax and best practices, let’s move on to exploring **Attributes in JSX**. This will help you understand how to make your JSX elements more dynamic by adding properties like `className`, `src`, `href`, and more.