Введение в GSX 0:00 Евгений Паромский продолжает изучение React. В прошлом видео разбирался концептуальный уровень GSX. Сегодня будет рассмотрен GSX на прикладном уровне.
Определение типов элементов в GSX 0:58 HTML элементы определяются с маленькой буквы. Кастомные компоненты определяются с большой буквы. Компоненты должны быть доступны в области видимости GSX.
Динамическое определение типов элементов 1:58 Для динамического определения типа элемента создаётся переменная. Пример: передача формы и типа элемента.
Дочерние элементы в GSX 4:53 Дочерние элементы определяются между открывающим и закрывающим тегами. Можно использовать динамические значения из скрипта.
Отображение различных типов данных 5:53 Текст отображается как текст. Числа приводятся к строке и отображаются как текст. Булевые значения игнорируются. Объекты не отображаются.
Массивы React-элементов 8:48 Массивы React-элементов требуют уникальных ключей. Ключи должны быть стабильными и уникальными. Пример использования функции Map для отрисовки списка данных.
Условный рендеринг 12:41 Условный рендеринг позволяет отрисовать элемент в зависимости от условия. Условия часто основаны на динамическом состоянии компонента. Внутри фигурных скобок можно использовать только выражения, которые всегда возвращают значение. Логический оператор `||` используется для условного рендеринга.
Условный рендеринг в React 15:36 Использование логических операторов `&&` и `||` для условного рендеринга. Пример: отображение элемента в зависимости от значения переменной.
Альтернативный подход к условному рендерингу 16:33 Создание объекта с ключами, соответствующими возможным значениям. Пример: выбор элемента по ключу `type`. Преимущества: чистота кода и удобство чтения.
Функции для условного рендеринга 18:30 Определение функций, возвращающих значения в зависимости от условий. Возможность использования JavaScript внутри функций.
Атрибуты HTML-элементов в React 20:20 Атрибуты называются через CamelCase, кроме `data-` и `aria-`. Атрибут `className` используется для задания классов элементов. Динамическое задание классов с помощью JavaScript.
Атрибут `style` 23:18 `style` в React — это объект, позволяющий задавать CSS-свойства. Ключи свойств используются в CamelCase. Пример: задание цвета текста.
Обработчики событий 25:16 Атрибуты для обработчиков событий начинаются с `on`. Функция в фигурных скобках вызывается при срабатывании события. Различие между `onclick` и `onMouseDown`.
Передача HTML в React 26:15 Возможность передачи HTML в React через атрибут `innerHTML`. Предупреждение о безопасности при использовании этого атрибута.
Заключение 28:11 Подведение итогов: работа с GSX, типы элементов, условный рендеринг, HTML-атрибуты. Анонс следующей части: взаимодействие GSX с компонентами и работа с состоянием.
