Компоненты React и синтаксис JSX

В прошлом эпизоде мы перешли на описание элементов в формате JSON. Получилось понятно, но громоздко. Поэтому сегодня для удобства упростим код виджетов, добавив функцию-фабрику создания виртуальных элементов.

Далее исследуем и внедрим оригинальные элементы React и на рендерер ReactDOM. И в итоге разберём и подключим Babel для модификации синтаксиса JavaScript и внедрим синтаксис JSX для удобного HTML-подобного написания компонентов.

• 00:01:17 - Функция createElement
• 00:02:30 - Указание ключа элемента списка
• 00:04:06 - Значение props по умолчанию
• 00:06:02 - Передача дочерних элементов
• 00:08:34 - Переписывание остальных компонентов
• 00:10:31 - Проверка результата
• 00:11:45 - Подключение библиотеки React
• 00:15:26 - Переход на ReactDOM
• 00:17:29 - Задача упрощения кода
• 00:18:57 - Внедрение нового синтаксиса
• 00:20:39 - Кастомный тип скрипта
• 00:23:55 - Преобразование языков
• 00:25:37 - Пример нового синтаксиса
• 00:27:28 - Автоподхват скриптов
• 00:29:23 - Подключение Babel
• 00:32:20 - Синтаксис JSX
• 00:33:49 - Переписывание компонентов на JSX
• 00:36:12 - Обзор результата

На этом с представлением мы разобрались. В следующих эпизодах активно займёмся управлением состоянием.