What are the rules of JSX?

Beginner

Answer

Key JSX rules:

  1. Must return a single parent element or use React Fragment
  2. Use camelCase for attributes: className instead of class, onClick instead of onclick
  3. Close all tags: Self-closing tags must end with />
  4. Use curly braces for JavaScript expressions: {variable} or {expression}
  5. Boolean attributes: disabled={true} or just disabled
// Correct JSX
function MyComponent() {
  return (
    <div className="container">
      <img src="image.jpg" alt="Description" />
      <p>Count: {count}</p>
    </div>
  );
}