JSX Deep Dive: Understanding JSX Syntax in React

What is JSX?

JSX is not a string or HTML. It is a syntax extension that React uses to describe UI elements.

Under the hood, JSX code is transformed into React.createElement calls that create React elements representing DOM nodes or other components.

• Looks like HTML but is actually JavaScript.
• Allows embedding JavaScript expressions inside curly braces {}.
• Must return a single root element per JSX expression.

JSX Syntax Rules

JSX has specific syntax rules that differ slightly from HTML to ensure it works well with JavaScript.

Understanding these rules helps avoid common errors and write clean React components.

• Use camelCase for attribute names (e.g., className instead of class).
• Close all tags, including self-closing tags like <img /> or <input />.
• Wrap multiple elements in a single parent element or use React fragments <>...</>.
• JavaScript expressions inside JSX must be wrapped in curly braces {}.

JSX Example

Here is a simple example of JSX used in a React component to render a greeting message.