JSX (JavaScript XML) is a syntax extension that lets you write HTML-like code inside JavaScript. React transforms JSX into JavaScript function calls before running in the browser.
JSX is optional but strongly recommended — it makes your component code much more readable.
// JSX looks like HTML but has JavaScript rules:
// 1. className instead of class
<div className="container">Hello</div>
// 2. All tags must be closed (including self-closing)
<img src="photo.jpg" alt="Photo" />
<br />
// 3. Return one root element (or use a Fragment)
function Card() {
return (
<>
<h2>Title</h2>
<p>Content</p>
</>
);
}
// 4. Embed JavaScript expressions with { }
const name = 'Alice';
const element = <h1>Hello, {name}!</h1>;
// 5. Conditional rendering
const isLoggedIn = true;
return <div>{isLoggedIn ? 'Welcome!' : 'Please log in'}</div>;
// 6. Inline styles use camelCase objects
<div style={{ backgroundColor: '#f0f4f8', fontSize: '1rem' }}>
Styled div
</div>