JSX and Rendering

JSX: JavaScript + XML

JSX is a syntax extension for JavaScript that lets you write HTML-like code inside your JavaScript files. It was designed to make component code readable and expressive.

Under the hood, JSX is compiled to plain JavaScript function calls. When you write <h1>Hello</h1>, Babel transforms it into React.createElement("h1", null, "Hello").

Rendering to the DOM

React renders your components into a real DOM element using ReactDOM.render(). In modern React (18+), you use createRoot instead.

Expressions in JSX

You can embed any JavaScript expression inside JSX using curly braces. This is where React gets its power.

const name = "Alice"; return <p>Hello, {name}!</p>

You can use any valid JavaScript expression: variables, function calls, ternaries, and more.