What is JSX and why does React use it?

What is JSX:

• JavaScript XML - a syntax extension for JavaScript
• Looks like HTML but gets compiled to JavaScript function calls
• Not required for React but recommended for readability

How JSX Works:

• JSX gets compiled to function calls that create React elements
• Modern transform (React 17+): Compiles to jsx() / jsxs() from react/jsx-runtime — no need to import React in files that only use JSX
• Legacy transform: Compiled to React.createElement() calls (required import React in every file)
• Each JSX element becomes a plain JavaScript object describing the UI — this is called a 'React element'

Key Differences from HTML:

• Use className instead of class
• Use htmlFor instead of for
• Style accepts objects, not strings
• All tags must be closed (including self-closing)
• camelCase for event handlers (onClick, onChange)

Benefits:

• Visual representation of UI structure
• Compile-time error checking
• Full JavaScript expressions within {}