JSX: Syntax and Transpilation
Write JSX, understand how Babel compiles it to React.createElement calls, and apply the rules: one root element, className, and self-closing tags.
What Is JSX?
JSX (JavaScript XML) is a syntax extension that lets you write HTML-like markup inside JavaScript. It's not a browser feature — Babel or TypeScript transforms it into JavaScript function calls before it runs.
JSX Transpilation
Babel transforms JSX to React.createElement() calls. With the new JSX transform (React 17+), you don't need to import React — Babel injects the necessary imports automatically.
// JSX:
const element = <h1 className="title">Hello</h1>;
// Compiled to (new transform):
import { jsx as _jsx } from 'react/jsx-runtime';
const element = _jsx('h1', { className: 'title', children: 'Hello' });All lessons in this course
- JSX: Syntax and Transpilation
- Functional Components and Props
- useState Hook: State and Re-renders
- Lists Keys and Conditional Rendering