В этом курсе вы изучите все аспекты модернизации существующего приложения React, чтобы оно могло использовать преимущества новейших функций фреймворка и хорошо работать долгие годы.
В этом курсе мы рассмотрим все способы модернизации существующего приложения React — от инструментов и линтинга до тестирования и хуков. React — это мощная, чрезвычайно популярная среда JavaScript, но поддерживать приложения в актуальном состоянии со всем, что она может предложить, сложно, особенно при работе с более крупными бизнес-приложениями корпоративного уровня, за которые отвечают многие разработчики.
Почему этот курс
«Руководство по модернизации корпоративного приложения React» охватывает все, что вам нужно знать, чтобы уверенно работать с приложением React любого размера и в любом состоянии, и оставить его лучше, чем когда вы его нашли.
В то время как многие учебные пособия по React начинаются с последней версии React или замалчивают все другие вещи, необходимые для обеспечения непрерывной работы приложений, жизненно важных для успеха компании, этот курс не делает этого. В 54 уроках, охватывающих 10 модулей, он решает многие вопросы, которые необходимо учитывать при создании и обслуживании больших и сложных приложений React.
Модули курса
По мере прохождения этого курса вы получите более глубокое понимание того, как и почему появились React Hooks, важность различных типов автоматизированного тестирования и конфигурации проекта, а также то, как использовать системы проектирования для улучшения вашего приложения. Вы получите подробное представление о том, как модернизировать приложение React в реальном сценарии, приведя его в соответствие с сегодняшними стандартами разработки.
Часть первая: инструменты и настройка
Первая часть этого курса будет состоять из ознакомления с нашим примером приложения и выполнения скрытой работы, чтобы настроить его на успех.
Мы узнаем, почему появились React Hooks и как их использовать, как успешно обновить устаревшее приложение React и как использовать такие инструменты, как Volta, ESLint и Prettier, для улучшения кода приложения и опыта разработки.
- Модуль 0: Встречайте Hardware Handler — наше устаревшее, но многообещающее приложение React.
- Модуль 1: React Hooks — зачем они были созданы, проблемы, которые они решают, и как работают самые распространенные из них.
- Модуль 2: Обновление приложения React — наше приложение нуждается в обновлении для использования хуков, и мы упростим разработку с помощью Volta.
- Модуль 3: Конфигурация проекта. Добавление Prettier и ESLint в наше приложение значительно улучшит качество кода.
Часть вторая: рефакторинг кода
С нашим приложением, настроенным на успех, мы приступим к рефакторингу Hardware Handler.
Я покажу вам свою стратегию преобразования компонентов класса в функциональные, и мы пошагово пройдемся по файлам, сохраняя функциональность приложения нетронутой, обновляя его для использования хуков, включая пользовательские хуки и Context API.
- Модуль 4: Классы в функции — мы возьмем каждый компонент класса и превратим его в функциональный компонент.
- Модуль 5: Пользовательские хуки — мы определим, где пользовательские хуки могут еще больше упростить наши функциональные компоненты.
- Модуль 6: Context API — несколько стратегически размещенных контекстов React завершат наши улучшения кода.
Часть третья: тестирование
Обновленное приложение — это только полдела для приложений корпоративного уровня; команды разработчиков также должны быть уверены в своем дальнейшем успехе, поскольку приложения расширяются в размерах и масштабах.
Мы добавим автоматическое тестирование в наше приложение, используя широко распространенные среды тестирования React Testing Library и Cypress.
- Модуль 7: Интеграционное тестирование — популярная комбинация Jest и библиотеки тестирования React будет использоваться для модульного тестирования небольших частей нашего приложения.
- Модуль 8: Сквозное тестирование — простота написания e2es с помощью Cypress Studio поразит вас.
Бонус: дизайн-системы
Наконец, я включил специальный бонусный модуль о том, как внедрить дизайн-системы в уже существующее приложение и систематически переключать компоненты. Системы проектирования и библиотеки компонентов быстро завоевывают популярность, особенно в крупных организациях с большим количеством приложений и команд разработчиков.
Умение эффективно использовать один из них является важным навыком для изучения.
- Модуль 9: Ant Design — мы заменим компоненты надежной системы дизайна, чтобы обрабатывать более сложные взаимодействия нашего приложения.
Нижняя линия
В 10 модулях мы шаг за шагом пройдем путь от устаревшего во всех отношениях до современного высокого стандарта, предоставив вам достаточную практику и практические примеры на этом пути.
Если вы хотели стать более уверенными в своих навыках React и посмотреть, что нужно для создания корпоративных приложений в современном мире, этот курс для вас.
