What is JSX?

JSX (JavaScript XML) is a syntax extension for JavaScript that lets you write HTML-like code directly within your React components. It makes your code more readable and expressive by describing what the UI should look like.

1. HTML in JavaScript

   • JSX lets you write markup inside your JavaScript code:

     JSX

   • This is transformed at build time into standard React.createElement() calls.

2. Not a Template Language

   • JSX is not HTML—it's syntactic sugar over JavaScript.

   • You can embed expressions using { } inside JSX. Example:

     JSX

3. JSX Must Be Wrapped in One Parent Element

   • JSX expressions must return a single root element.
   • Use a <div> or React fragment <>...</> if needed.

4. Attributes Use camelCase

   • Use className instead of class, htmlFor instead of for, etc., to match JavaScript naming conventions.

5. JSX Boosts Developer Experience ✨

   • Code is more readable, debuggable, and closer to the final UI.
   • Many IDEs offer autocompletion and linting support for JSX.