JSX (JavaScript XML) is a syntax extension for JavaScript that allows us to describe the structure of UI components.
It allows you to write HTML-like code directly in your JavaScript code.
It makes it easier to define and render React elements by resembling the structure of HTML.
JSX gets transformed into JavaScript by tools like Babel or SWC before it's rendered in the browser.
You can embed any valid JavaScript expression inside JSX by wrapping it in curly braces {}. This allows you to toggle classes, calculate values, or map through arrays dynamically.
Since JSX is closer to JavaScript than HTML, React uses camelCase property naming conventions instead of HTML attribute names.
A JSX expression must have exactly one outermost element. If you need to return multiple elements, you must wrap them in a parent (like a <div>) or a Fragment (<>...</>).