Компоненты 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 - Обзор результата

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

Скрытый контент
Комментарии (12)
Arunas

Спасибо.

Ответить
Руслан

Спасибо!

Ответить
Александр Кулик

Супер.

Ответить
Aёct'ann

Это был шикарный урок, спасибо!

Ответить
Andrey

Спасибо!)

Ответить
Александр

Спасибо !

Ответить
Алекс

Благодарю, оч дохотчиво

Ответить
Артём

Офигенно!

Ответить
Денис

Спасибо

Ответить
Тимур

Красава!

Ответить
Сергей

Мне кажется в браузере перегонять все неочень эффективно. Если этого jsx очень много он должен сначала перегнаться в createElement при помощи babel, а потом в json самим реактом. Это только в режиме разработки так и для продакшнеа готовят скомпиленный файл где уже все перегнано? P.S. Спасибо, познавательно!

Ответить
Дмитрий Елисеев

Это только у нас мы делаем это в браузере. Так можно делать для своих небольших скриптов.

А при полноценной разработке устанавливают полноценное React-приложение как у нас в проекте аукциона в эпизоде про React с девелоперским сервером и со сборкой через Webpack для продакшена.

Ответить
Зарегистрируйтесь или войдите чтобы оставить комментарий

Или войти через:

Google
GitHub
Yandex
MailRu