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

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

Скрытый контент (код, слайды, ...) для подписчиков. Открыть →
Дмитрий Елисеев
elisdn.ru
Комментарии (24)
Arunas

Спасибо.

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

Спасибо!

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

Супер.

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

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

Ответить
Andrey

Спасибо!)

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

Спасибо !

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

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

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

Офигенно!

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

Спасибо

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

Красава!

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

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

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

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

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

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

Спасибо, не успел еще посмотреть Slim+React. Начну после этого курса

Ответить
kashamamina

а почему в гите у вас компонент лота больше не принимает ключ и ничего не делает с ним, хотя в компоненте лотов вы его передаете туда?

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

Теперь с ключами работает сам React внутри своего JSON-дерева.
Нам теперь присваивать ключи div-ам не нужно.

Ответить
kashamamina

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

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

как он отслеживает изменения если нигде в реальном дереве эти ключи не хранятся?

Настоящий ReactDOM намного сложнее и постоянно совершенствуется. Вместо прямого сравнения виртуального дерева с реальным он использует подход со сравнением сохранённого старого и переданного нового виртуальных деревьев, высчитывая разницу и формируя набор изменений. И уже потом во второй фазе применяет этот набор мутаций к реальному дереву. Такой подход производительнее, но чреват риском появления рассинхронизации реального дерева, если что-то пойдёт не так. Так что ключи как раз хранятся и сравниваются в старом и новом виртуальных деревьях, а не в реальном дереве.

Ответить
kashamamina

спасибо

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

как мне проверить что я нужному элементу присвоил нужный ключ?

React сразу отобразит ошибку в JavaScript-консоли браузера, если у чего-то нет ключа или если вдруг ключи повторяются.

Ответить
Максим

Так плавно перейти к Реакту. Снимаю шляпу!

Ответить
Анна

Ваау, я столько лет избегала и боялась реакта, а после ваших объяснений все кажется таким простым и понятным! Спасибо вам огромное.

Ответить
Pavell

Спасибо! очень полезно.

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

Это очень круто! Спасибо.

Ответить
Ник

пушка

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

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

Yandex
MailRu
GitHub
Google