JSX: синтаксис и транспиляция
Пишите JSX, разбирайтесь, как Babel компилирует его в вызовы React.createElement, и применяйте правила: один корневой элемент, className и самозакрывающиеся теги.
«JSX: синтаксис и транспиляция» — бесплатный урок Frontend Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.
Что такое JSX?
JSX (XML для JavaScript) — это расширение синтаксиса, позволяющее писать разметку, похожую на HTML, внутри JavaScript. Это не функция браузера: Babel или TypeScript преобразует JSX в вызовы функций JavaScript до его выполнения.
Транспиляция JSX
Babel преобразует JSX в вызовы React.createElement(). При использовании нового преобразования JSX (React 17 и новее) импортировать React не нужно — Babel автоматически добавляет необходимые импорты.
// 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: один корневой элемент
Выражения JSX должны содержать ровно один корневой элемент. Оборачивайте соседние элементы в <div> или используйте фрагменты (<></> или <React.Fragment>), чтобы не добавлять лишние узлы DOM.
// Error: adjacent elements need a wrapper
return (
<h1>Title</h1>
<p>Body</p>
);
// Use Fragment:
return (
<>
<h1>Title</h1>
<p>Body</p>
</>
);className и htmlFor
Атрибуты JSX используют camelCase. Поскольку class и for являются зарезервированными словами JavaScript, вместо них используйте className и htmlFor.
<div className="card active">
<label htmlFor="email">Email</label>
<input id="email" type="email" />
</div>Самозакрывающиеся теги
В JSX все теги должны быть правильно закрыты. Элементы без дочерних элементов должны использовать косую черту самозакрытия: <img />, <br />, <input />.
Выражения в JSX: {}
Встраивайте любое выражение JavaScript в JSX с помощью фигурных скобок. Работают переменные, вызовы функций, тернарные выражения и арифметические операции. Операторы (if, for) — нет.
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 и строки
Соседний текст и выражения JSX автоматически объединяются. Внутри элемента можно свободно смешивать текст и выражения.
<p>Welcome, {user.name}! You joined on {formatDate(user.createdAt)}.</p>Ничего не отображать: null и false
Возвращайте null или false, чтобы ничего не отображать. Оба значения допустимы в JSX и не создают вывод в DOM. Это полезно для условного отображения.
function Banner({ show }: { show: boolean }) {
if (!show) return null; // renders nothing
return <div className="banner">Important notice!</div>;
}Атрибут style — синтаксис объекта
Встроенные стили в JSX задаются объектом, а не строкой. Имена свойств записываются в camelCase.
<div style={{ backgroundColor: '#f7fafc', padding: '16px', borderRadius: '8px' }}>
Styled box
</div>JSX — это JavaScript
Поскольку JSX компилируется в JavaScript, его можно помещать в переменные, возвращать из функций, передавать как свойства и хранить в массивах. Элементы React — это обычные объекты JavaScript.
const elements = ['apple', 'banana', 'cherry'].map(fruit => (
<li key={fruit}>{fruit}</li>
));
return <ul>{elements}</ul>;TypeScript и JSX: файлы .tsx
Используйте расширение .tsx для файлов TypeScript, содержащих JSX. TypeScript проверяет типы JSX и обнаруживает ошибки типов свойств и отсутствующие свойства во время компиляции.
Быстрая проверка
Почему в JSX мы используем className, а не class?
Итоги: JSX
JSX — это синтаксический сахар для React.createElement(). В каждом выражении должен быть один корневой элемент или фрагмент. Для атрибутов, совпадающих с зарезервированными словами, используйте className и htmlFor. Всегда закрывайте самозакрывающиеся элементы. Встраивайте выражения с помощью {}. Возвращайте null или false, чтобы ничего не отображать. Для встроенных стилей используйте синтаксис объекта с camelCase. JSX — это JavaScript, поэтому относитесь к нему как к значению.
Часто задаваемые вопросы
Урок «JSX: синтаксис и транспиляция» бесплатный?
Да — полный текст урока «JSX: синтаксис и транспиляция» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.
Чему я научусь в уроке «JSX: синтаксис и транспиляция»?
Пишите JSX, разбирайтесь, как Babel компилирует его в вызовы React.createElement, и применяйте правила: один корневой элемент, className и самозакрывающиеся теги. Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Frontend Academy?
Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «JSX: синтаксис и транспиляция»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Frontend Academy?
Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- JSX: синтаксис и транспиляция
- Функциональные компоненты и props
- Хук useState: состояние и повторные рендеры
- Списки, ключи и условный рендеринг