React: JSX Power
LEVEL: FRONTEND MASTER
**JSX** (JavaScript XML) allows us to write HTML-like structures directly inside our JavaScript code. It is the heart of React's declarative nature.
1. Why JSX?
In traditional development, you keep logic (JS) and structure (HTML) in different files. React argues that they are inherently coupled. JSX lets you build **Components** that contain both.
2. Expression Embedding
You can put any valid JavaScript expression inside curly braces ``. This includes variables, function calls, or even math operations.
const element = <h1>Total: {2 + 2}</h1>;
3. The Fragment Rule
Since JSX is compiled into a single function call (`React.createElement`), it can only return **one** parent element. If you don't want to add extra DIVs to the DOM, use a **Fragment**.