JSX

JSX is syntactic sugar for `React.createElement`. It lets you write HTML-like trees inside JavaScript with expressions in curly braces. Attributes use camelCase (`className`, `onClick`); self-closing tags must end with `/`.

JSX escapes text children by default, which mitigates XSS when rendering user strings. Fragments `<>...</>` group siblings without extra DOM nodes. A component must return a single root or a fragment.

Interviewers may ask what this compiles to and how conditional or list rendering fits the same model.

					const label = <span className="badge">{count}</span>;
				

On interviews, explain the concept with a concrete example and name the behavior interviewers probe.

Common pitfalls include hiding data flow, over-splitting components, and putting side effects in render.

The trade-off is often clarity versus reuse or explicit props versus convenience.

Checklist:

• Know JSX maps to `createElement`.
• Use `className` and camelCase DOM props.
• Keep expressions in braces simple and pure.