Frontend Academy · Lesson

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.

JSX: Syntax and Transpilation is a free Frontend Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Frontend Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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' });

JSX Rules: One Root Element

JSX expressions must have exactly one root element. Wrap siblings in a <div> or use Fragments (<></> or <React.Fragment>) to avoid adding extra DOM nodes.

// Error: adjacent elements need a wrapper
return (
  <h1>Title</h1>
  <p>Body</p>
);

// Use Fragment:
return (
  <>
    <h1>Title</h1>
    <p>Body</p>
  </>
);

className and htmlFor

JSX attributes use camelCase. Because class and for are JavaScript reserved words, use className and htmlFor instead.

<div className="card active">
  <label htmlFor="email">Email</label>
  <input id="email" type="email" />
</div>

Self-Closing Tags

In JSX, all tags must be properly closed. Elements with no children must use a self-closing slash: <img />, <br />, <input />.

Expressions in JSX: {}

Embed any JavaScript expression inside JSX with curly braces. Variables, function calls, ternaries, and arithmetic all work. Statements (if, for) don't.

const name = 'Alice';
const count = 5;

return (
  <div>
    <h1>Hello, {name}!</h1>
    <p>You have {count} messages.</p>
    <p>Double: {count * 2}</p>
    {isLoggedIn ? <Dashboard /> : <Login />}
  </div>
);

JSX and Strings

Adjacent text and JSX expressions are automatically concatenated. You can mix text and expressions freely inside an element.

<p>Welcome, {user.name}! You joined on {formatDate(user.createdAt)}.</p>

Rendering Nothing: null and false

Return null or false to render nothing. Both are valid JSX values that produce no DOM output. Useful for conditional rendering.

function Banner({ show }: { show: boolean }) {
  if (!show) return null;  // renders nothing
  return <div className="banner">Important notice!</div>;
}

Style Attribute — Object Syntax

Inline styles in JSX use an object, not a string. Property names are camelCase.

<div style={{ backgroundColor: '#f7fafc', padding: '16px', borderRadius: '8px' }}>
  Styled box
</div>

JSX Is JavaScript

Since JSX compiles to JavaScript, you can put JSX in variables, return it from functions, pass it as props, and store it in arrays. React elements are plain JavaScript objects.

const elements = ['apple', 'banana', 'cherry'].map(fruit => (
  <li key={fruit}>{fruit}</li>
));

return <ul>{elements}</ul>;

TypeScript and JSX: .tsx Files

Use the .tsx extension for TypeScript files containing JSX. TypeScript type-checks JSX, catching prop type errors and missing props at compile time.

Quick Check

Why do we use className instead of class in JSX?

Recap: JSX

JSX is syntactic sugar for React.createElement(). One root element or Fragment per expression. className, htmlFor for reserved word attributes. Self-close all void elements. Embed expressions with {}. Return null/false to render nothing. Inline styles use camelCase object syntax. JSX is JavaScript — treat it as a value.

Frequently asked questions

Is the “JSX: Syntax and Transpilation” lesson free?

Yes — the full text of “JSX: Syntax and Transpilation” is free to read here on the web, and the Frontend Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Frontend Academy course, upgrade to CoddyKit PRO.

What will I learn in “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. You practise Frontend Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Frontend Academy?

No prior experience is required. Frontend Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “JSX: Syntax and Transpilation” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Frontend Academy lesson?

Yes. Every Frontend Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Frontend Academy