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

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

Скрытый контент
Комментарии (19)
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-консоли браузера, если у чего-то нет ключа или если вдруг ключи повторяются.

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

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

Google
GitHub
Yandex
MailRu