Skip to main content

What is JSX?

Answer​

JSX (JavaScript XML) is a syntax extension that lets you write HTML-like code in JavaScript.

Example​

// JSX
const element = <h1>Hello, World!</h1>;

// Compiles to
const element = React.createElement("h1", null, "Hello, World!");

Key Rules​

  • Return a single root element
  • Close all tags (<img />)
  • Use className instead of class
  • Use camelCase for attributes (onClick)

Embedding JavaScript​

const name = "John";
const greeting = <h1>Hello, {name}!</h1>;

Why JSX?​

  • Familiar HTML-like syntax
  • Compile-time error checking
  • Prevents injection attacks (auto-escapes values)