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:

• Babel transforms JSX into React.createElement() calls
• 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 {}