Правила JSX: выражения, атрибуты и фрагменты
Используйте выражения JSX с { }, применяйте атрибуты в стиле camelCase (className, onClick) и возвращайте несколько элементов через фрагменты.
«Правила JSX: выражения, атрибуты и фрагменты» — бесплатный урок React Academy на CoddyKit. Это урок 1 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения React Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс React Academy содержит 3 уроков всего.
Что даёт JSX
Цель: освоить основы JSX — использовать { } для выражений, применять атрибуты в формате camelCase и объединять соседние элементы с помощью фрагментов.
Выражения и атрибуты
Выражения помещаются внутрь { } и могут быть переменными, вызовами функций или простыми математическими операциями. Для атрибутов используется camelCase, например className, htmlFor, onClick.
Демонстрация: выражения и атрибуты
Отрисовывайте динамические значения с помощью { } и используйте className/title/onClick как атрибуты в формате camelCase.
<div id="root"></div>
Фрагменты для соседних элементов
Возвращайте несколько соседних элементов с помощью фрагмента: либо <>...</>, либо <React.Fragment>. Фрагменты позволяют избежать лишних элементов-обёрток.
Демонстрация: фрагменты
Используйте короткие фрагменты <>, чтобы объединять соседние элементы; при этом дополнительные узлы DOM не создаются.
<div id="root"></div>
Советы и подводные камни
Советы:
- Используйте только выражения внутри { } (но не инструкции).
- Используйте className вместо класса.
- Предпочитайте фрагменты ненужным элементам-обёрткам.
Правило выражений JSX
Повторение
Повторение: помещайте динамические значения в { }, используйте атрибуты в стиле camelCase и объединяйте соседние элементы с помощью фрагментов, чтобы разметка оставалась чистой.
Часто задаваемые вопросы
Урок «Правила JSX: выражения, атрибуты и фрагменты» бесплатный?
Да — полный текст урока «Правила JSX: выражения, атрибуты и фрагменты» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс React Academy, подпишись на CoddyKit PRO. Курс React Academy содержит 3 уроков всего.
Чему я научусь в уроке «Правила JSX: выражения, атрибуты и фрагменты»?
Используйте выражения JSX с { }, применяйте атрибуты в стиле camelCase (className, onClick) и возвращайте несколько элементов через фрагменты. Ты практикуешь React Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать React Academy?
Предыдущий опыт не требуется. React Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 3.
Сколько времени занимает урок «Правила JSX: выражения, атрибуты и фрагменты»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке React Academy?
Да. Каждый урок React Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Правила JSX: выражения, атрибуты и фрагменты
- Списки и ключи; условный рендеринг
- Варианты стилизации: CSS Modules, встроенные стили и помощники классов