Обзор курса
Примечания:
Курс дает обзор реакции и начинается со следующего:
Зачем реагировать?
1. Гибкость
2. Опыт разработчиков
3. Корпоративные инвестиции
4. Поддержка сообщества
5. Производительность
6- Тестируемость
React не ограничивается только внешним интерфейсом, поскольку его также можно использовать для рендеринга на стороне сервера, такого как NEXT.js, Gatsby и Phenom
Facebook использовал React для постепенной замены своего PHP-приложения, отображаемого на стороне сервера.
React стабилен, потому что он был разработан Facebook и используется и поддерживается Facebook. Также многие компании полагаются на реакцию.
Чтобы создать свои компоненты, вам не нужно начинать с нуля. Бесплатные и зрелые компоненты уже есть. Например:
- Office UI Fabric от Microsoft, они делают пользовательские интерфейсы похожими на офис Microsoft.
- Material UI — реализация руководства Google по дизайну материалов.
- React bootstrap — популярная библиотека, содержащая компоненты реакции, упрощающие работу с бутстрапом.
- Github также содержит прекрасный список компонентов реакции, которые можно использовать напрямую. Это репо — хороший пример.
React router можно использовать для обработки маршрутизации в вашем приложении. Redux и Mobx — два популярных варианта обработки сложных потоков данных.
Jest (также разработанный Facebook) можно использовать для автоматизированного тестирования.
У React более 90 тысяч запусков на GitHub
Что касается производительности, React не вносит изменения в DOM напрямую, потому что это очень затратная операция. Он изменяет «виртуальный DOM».
React также имеет размер около 35 КБ при минимизации и сжатии, что делает его хорошим выбором с точки зрения ограничений пропускной способности.
Что такое JSX?
Изучение JSX тривиально. Вот различия между HTML и JSX:
HTML
для
JSX
htmlДля
HTML
класс
JSX
className
HTML
‹цвет стиля=”красный”›
JSX
‹style={{color:’red’}}›
HTML
‹!- -комментарий- -›
JSX
{*/ комментарий /*}
Как преобразовать форму HTML в JSX?
Есть в основном три разных способа сделать это…
1- С помощью текстового редактора будет достаточно простого поиска и замены, поскольку различия между HTML и JSX тривиальны.
2- Существует онлайн-компиляция по следующей ссылке.
3- Используйте свой терминал со следующими пакетами npm (npmtojsx)
Хорошо еще и то, что babel и typescript теперь работают с React и позволяют вам использовать будущие функции JS уже сегодня, даже до того, как все браузеры предложат полную поддержку. Они транспилируют JSX React для вас. Он также минимизирует и связывает ваш код и даже включает поддержку автоматического тестирования, поэтому вам даже не нужно настраивать среду разработки или производственной сборки для работы с JSX.
Как избежать конфликта версий при реакции?
1- стандартизируйте версию
2- обновите React при обновлении библиотек
3- обновите как команда.
Я читаю старый учебник?
Существует множество руководств, которые научат вас реагировать, просто убедитесь, что руководство, которое вы читаете, не устарело.
Чтобы различать старые и новые учебные пособия, здесь приведены функции, извлеченные из React Core.
(старый)
импортировать {render} из «реакции»;
(новое)
импортировать {render} из 'react-dom';
(старый)
React.createClass
(новый)
var crc = требуется ('создать-реагировать-класс')
(старый)
импортировать {PropTypes} из 'react';
(новый )
импортировать PropTypes из 'prop-types';
(старый)
примеси: [mixInNameHere]
(новый)
Компоненты высшего порядка, рендеринг реквизита
Создать-реагировать-приложение
Создать-реагировать-приложение — отличная отправная точка или хороший шаблон, который включает в себя следующее:
1- Автоматическое тестирование
2- Транспиляция
3- Объединение
4- Linting
5 – Автоматическая сборка
Flow от facebook добавляет в ваш javascript статическую проверку типов, обеспечивает безопасность типов.
Обзор:
Хммм… Курс представляет собой всего лишь предварительный просмотр реакции, но он не предоставил ни одного реального примера реакции. Лично мне нравятся курсы, демонстрирующие фреймворк/библиотеку на примере из реальной жизни, но я бы порекомендовал этот курс, если вы хотите узнать некоторую информацию о реакции. Он короткий и дает точное описание реакции, когда его использовать и сравнить его с другими аналогичными продуктами, которые выполняют ту же работу.
