React Fundamental 3: Using JSX

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:

// https://unpkg.com/@babel/standalone/babel.min.js
const id = "root";
const element = <h1 id={id}>Hey there</h1>

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

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

Here’s why JSX is so widely used and loved in the React world:

✅ Readable & expressive: Looks like HTML, which makes the UI structure easy to visualize.

✅ Powerful: You can embed JavaScript expressions using {}.

✅ Scoped: Since it’s all in JavaScript, your components, logic, and styles stay together — making your code more modular and maintainable.

Babel

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

Its main job is to convert modern JavaScript code (ES6+ or JSX) into older versions of JavaScript that can run in all browsers — even those that don’t support the latest features.

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.