Vezuvio
Магистр
- 22 Мар 2016
- 9.468
- 226.990
Продвинутый Frontend. В Production на React (2023)
Автор: ulbitv.ru
Курс идеально подойдет 2 категориям людей:
Конфигурация
Полная конфигурация проекта с нуля (Webpack). Настроим React, Typescript, Babel, scss, css modules, также настроим тестовую среду, jest, rtl, storybook, loki, webdriwer IO. Большое кол-во плагинов, лоадеров + граммотная декомпозиция конфига.
UI
Библиотека компонентов. Более 15 UI компонентов, включая мода льные окна с порталами, выпадающие списки\меню, сайдбар, кнопки с разными темами, скелетоны, аватары, вертикальные и горизонтальные стеки и тд. Будем писать как свои решения так и опробуем headless библиотеки. Все компоненты будем делать доступными и семантичными.
Архитектура
Архитектура. Модули. Декомпозиция. Бизнес сущности. Слабая связанность и переиспользование.
Оптимизация
Оптимизация. Перерисовки и как с ними бороться. Анализ размера бандла. Использование бандл анализаторов. Асинхронные компоненты. Асинхронные Redux редюссеры. Reducer manager и создание небольшой библиотечки по внедрению асинхронных редюсеров. Изоляция модулей. Throttle и debounce. Инъекция эндпоинтов для лучшего code splitting.
Реальные задачи
Решение большого кол-ва задач из реальной разработки (фильтры, поиск, сортировки, бесконечные ленты, многоблочные страницы, комментарии и тд). Похоже на то, что было в фундаментальном курсе, но в разы больше и сделано технически интереснее.
Темы и стили
CSS модули и темизация. Создадим правильную структуру стилей и внедрим 3 цветовые темы нашего приложения (темная, светлая, оранжевая). Организуем стили так, что внедрить новую тему будет стоить 5 минут. Адаптивный дизайн интерфейса.
Сторибук и скриншотные тесты
С нуля настроим Storybook и будем описывать story case для каждого компонента и всех его состояний. Научимся делать скриншотные тесты, что позволит делать регрессионое тестирование нашего интерфейса.
Unit и RTL тесты
С нуля настроим тестовую среду для unit jest тестов и тестов на компоненты с помощью React Testing Library. Будем тестировать каждый разработа нный модуль (селекторы, async thunks, редюсеры, компоненты).
e2e тестирование
В самом конце разработки покроем разработанные модули E2E тестами.
Линтинг
Настроим под себя code-style, в частности настроим ESlint и stylelint. Для eslint реализуем самописный плагин в виде отдельного npm пакета, который будет проверять правильность модульных импортов (относительные или абсолютные).
Ошибки
Научимся правильно обрабатывать ошибки и реализуем ErrorBoundary. Посмотрим на практике как он работает.
Роутинг
React-router-dom V6. Конечно в нашем приложении будет несколько страниц, этим никого не удивишь. Настроим доступы для этих страниц, по авторизованности, либо по ролям. Также для сохранения минимального размера бандла научимся выносить страницы в отдельные чанки.
Скачать:
Автор: ulbitv.ru
Курс идеально подойдет 2 категориям людей:
- Люди, которые в данный момент ищут работу или близки к этому.
- Действующие junior или middle разработчики, которые хотят повысить профессиональный уровень.
Конфигурация
Полная конфигурация проекта с нуля (Webpack). Настроим React, Typescript, Babel, scss, css modules, также настроим тестовую среду, jest, rtl, storybook, loki, webdriwer IO. Большое кол-во плагинов, лоадеров + граммотная декомпозиция конфига.
UI
Библиотека компонентов. Более 15 UI компонентов, включая мода льные окна с порталами, выпадающие списки\меню, сайдбар, кнопки с разными темами, скелетоны, аватары, вертикальные и горизонтальные стеки и тд. Будем писать как свои решения так и опробуем headless библиотеки. Все компоненты будем делать доступными и семантичными.
Архитектура
Архитектура. Модули. Декомпозиция. Бизнес сущности. Слабая связанность и переиспользование.
Оптимизация
Оптимизация. Перерисовки и как с ними бороться. Анализ размера бандла. Использование бандл анализаторов. Асинхронные компоненты. Асинхронные Redux редюссеры. Reducer manager и создание небольшой библиотечки по внедрению асинхронных редюсеров. Изоляция модулей. Throttle и debounce. Инъекция эндпоинтов для лучшего code splitting.
Реальные задачи
Решение большого кол-ва задач из реальной разработки (фильтры, поиск, сортировки, бесконечные ленты, многоблочные страницы, комментарии и тд). Похоже на то, что было в фундаментальном курсе, но в разы больше и сделано технически интереснее.
Темы и стили
CSS модули и темизация. Создадим правильную структуру стилей и внедрим 3 цветовые темы нашего приложения (темная, светлая, оранжевая). Организуем стили так, что внедрить новую тему будет стоить 5 минут. Адаптивный дизайн интерфейса.
Сторибук и скриншотные тесты
С нуля настроим Storybook и будем описывать story case для каждого компонента и всех его состояний. Научимся делать скриншотные тесты, что позволит делать регрессионое тестирование нашего интерфейса.
Unit и RTL тесты
С нуля настроим тестовую среду для unit jest тестов и тестов на компоненты с помощью React Testing Library. Будем тестировать каждый разработа нный модуль (селекторы, async thunks, редюсеры, компоненты).
e2e тестирование
В самом конце разработки покроем разработанные модули E2E тестами.
Линтинг
Настроим под себя code-style, в частности настроим ESlint и stylelint. Для eslint реализуем самописный плагин в виде отдельного npm пакета, который будет проверять правильность модульных импортов (относительные или абсолютные).
Ошибки
Научимся правильно обрабатывать ошибки и реализуем ErrorBoundary. Посмотрим на практике как он работает.
Роутинг
React-router-dom V6. Конечно в нашем приложении будет несколько страниц, этим никого не удивишь. Настроим доступы для этих страниц, по авторизованности, либо по ролям. Также для сохранения минимального размера бандла научимся выносить страницы в отдельные чанки.
У вас нет прав на просмотр ссылок, пожалуйста: Вход или Регистрация
Скачать:
Скрытый контент для групп: SuperVIP
Последнее редактирование модератором:
