Компоненты 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
Чтобы не пропускать новые эпизоды подпишитесь на наш канал @deworkerpro в Telegram
Спасибо.
Спасибо!
Супер.
Это был шикарный урок, спасибо!
Спасибо!)
Спасибо !
Благодарю, оч дохотчиво
Офигенно!
Спасибо
Красава!
Мне кажется в браузере перегонять все неочень эффективно. Если этого jsx очень много он должен сначала перегнаться в createElement при помощи babel, а потом в json самим реактом. Это только в режиме разработки так и для продакшнеа готовят скомпиленный файл где уже все перегнано? P.S. Спасибо, познавательно!
Это только у нас мы делаем это в браузере. Так можно делать для своих небольших скриптов.
А при полноценной разработке устанавливают полноценное React-приложение как у нас в проекте аукциона в эпизоде про React с девелоперским сервером и со сборкой через Webpack для продакшена.
Спасибо, не успел еще посмотреть Slim+React. Начну после этого курса
а почему в гите у вас компонент лота больше не принимает ключ и ничего не делает с ним, хотя в компоненте лотов вы его передаете туда?
Теперь с ключами работает сам React внутри своего JSON-дерева.
Нам теперь присваивать ключи div-ам не нужно.
а эти ключи можно как-то отследить вообще, а то я не могу найти информацию о том, где он хранит эти ключи, как он что сравнивает в итоге. вот как он отслеживает изменения если нигде в реальном дереве эти ключи не хранятся?. мне получается просто полагаться на замечания реакта, что там то ты забыл ключи, там-то они не уникальны, а как мне проверить что я нужному элементу присвоил ннужный ключ и т д
Настоящий ReactDOM намного сложнее и постоянно совершенствуется. Вместо прямого сравнения виртуального дерева с реальным он использует подход со сравнением сохранённого старого и переданного нового виртуальных деревьев, высчитывая разницу и формируя набор изменений. И уже потом во второй фазе применяет этот набор мутаций к реальному дереву. Такой подход производительнее, но чреват риском появления рассинхронизации реального дерева, если что-то пойдёт не так. Так что ключи как раз хранятся и сравниваются в старом и новом виртуальных деревьях, а не в реальном дереве.
спасибо
React сразу отобразит ошибку в JavaScript-консоли браузера, если у чего-то нет ключа или если вдруг ключи повторяются.
Так плавно перейти к Реакту. Снимаю шляпу!
Ваау, я столько лет избегала и боялась реакта, а после ваших объяснений все кажется таким простым и понятным! Спасибо вам огромное.
Спасибо! очень полезно.
Или войти через: