React Fundamental 3: Using JSX

JSX is more intuitive than the raw React API and is easier to understand when reading the code. It’s fairly simple HTML-like syntactic sugar on top of the raw React APIs:

const element = <h1 id="greeting">Hey there</h1>

// ↓ ↓ ↓ ↓ compiles to ↓ ↓ ↓ ↓

const element = createElement('h1', {
    id: 'greeting',
    children: 'Hey there',
})

Because JSX is not actually JavaScript, you have to convert it using something called a code compiler. Babel is one such tool.

If you can train your brain to look at JSX and see the compiled version of that code, you’ll be MUCH more effective at reading and using it! I strongly recommend you give this some intentional practice.