What is JSX?
JSX stands for JavaScript XML. It lets you write HTML-like syntax directly in your JavaScript code. JSX is not valid JavaScript — it gets compiled to React.createElement() calls by tools like Babel or Vite.
JSX looks like HTML but has some key differences: you use className instead of class, htmlFor instead of for, and all tags must be closed.
Example
// JSX syntax
function Greeting() {
const name = "Priodemy";
const isLoggedIn = true;
return (
<div className="greeting">
<h1>Hello, {name}!</h1>
<p>2 + 2 = {2 + 2}</p>
<p>{isLoggedIn ? "Welcome back!" : "Please log in"}</p>
</div>
);
}- Use {expression} to embed JavaScript expressions in JSX
- Use className instead of class for CSS classes
- All JSX tags must be closed — including self-closing tags like
- JSX expressions must have one parent element — use or <> (fragment)
- You can use ternary operators and && for conditional content
Notes- JSX is optional — you can use React.createElement() directly, but JSX is much more readable and is the standard approach.
Fragments and Multiple Elements
React components must return a single root element. If you don't want to add an extra
to the DOM, use React Fragments (<> ) to group elements without adding a wrapper node.Example// Using fragments to avoid extra divs function UserInfo() { return ( <> <h2>John Doe</h2> <p>john@example.com</p> <p>Developer</p> </> ); } // This would cause an error (multiple root elements): // return ( // <h2>Title</h2> // <p>Text</p> // );Notes- Fragments let you group elements without adding extra nodes to the DOM. The short syntax <> is equivalent to
.