Компоненты 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 - Обзор результата
На этом с представлением мы разобрались. В следующих эпизодах активно займёмся управлением состоянием.
Скрытый контент
Чтобы не пропускать новые эпизоды подпишитесь на наш канал @deworkerpro в Telegram

Спасибо.
Спасибо!
Супер.
Это был шикарный урок, спасибо!
Спасибо!)
Спасибо !
Благодарю, оч дохотчиво
Офигенно!
Спасибо
Красава!
Мне кажется в браузере перегонять все неочень эффективно. Если этого jsx очень много он должен сначала перегнаться в createElement при помощи babel, а потом в json самим реактом. Это только в режиме разработки так и для продакшнеа готовят скомпиленный файл где уже все перегнано? P.S. Спасибо, познавательно!
Это только у нас мы делаем это в браузере. Так можно делать для своих небольших скриптов.
А при полноценной разработке устанавливают полноценное React-приложение как у нас в проекте аукциона в эпизоде про React с девелоперским сервером и со сборкой через Webpack для продакшена.
Или войти через: