1. What is JSX Really?

JSX is syntax extension for JavaScript. It's not HTML, not a string, not a template language.

const element = <h1>Hello</h1>;

This is neither HTML nor JavaScript. It's JSX - a syntax that looks like HTML but is JavaScript underneath.

2. The Transformation Process

Step 1: You write JSX

<h1 id="title">Hello</h1>

Step 2: Babel transforms to JavaScript

React.createElement('h1', { id: 'title' }, 'Hello')

Step 3: React creates Virtual DOM object

{
    type: 'h1',
    props: {
        id: 'title',
        children: 'Hello'
    },
    key: null,
    ref: null
}

You already know step 3. JSX is just a way to avoid writing createElement manually.

3. Basic JSX Syntax

Single Element

const element = <h1>Hello</h1>;

With Attributes