JSX Rules and Syntax

JSX — JavaScript + XML

JSX is a syntax extension that lets you write HTML-like markup inside JavaScript. Babel (or the React compiler) transforms it into React.createElement calls at build time. Modern React with the new JSX transform doesn't even need import React from 'react' at the top of every file.

Key rules

• Every component must return a single root element (wrap siblings in a <>…</> Fragment if needed).
• Use className instead of class, and htmlFor instead of for.
• Self-closing tags must be closed: <img />, <input />.
• JavaScript expressions go inside curly braces: {variable}, {2 + 2}.
• Inline styles are objects: style={{ color: 'red', fontSize: 16 }}.

function UserCard({ name, avatarUrl }) {
  return (
    <div className="card">
      <img src={avatarUrl} alt={name} />
      <p>Welcome, <strong>{name}</strong>!</p>
    </div>
  );
}