Курс ідеально підійде 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. Звичайно в нашому додатку буде кілька сторінок, цим нікого не здивуєш. Налаштуємо доступи для цих сторінок, по авторизованості, або за ролями. Також для збереження мінімального розміру бандла навчимося виносити сторінки в окремі чанки.
i18n
Навчимося працювати з інтернаціоналізацією. Впровадимо в інтерфейс дві мови (російська та англійська). Також навчимося розбивати переклади на чанки і довантажувати їх порціями, щоб не збільшувати розмір бандла.
TypeScript
З нуля налаштуємо TS (tsconfig), подружимо його з вебпаком, попрацюємо з union типами, в загальному тайпскрипту буде багато.
Bebel
Налаштуємо Babel і в якості тренування підключимо плагінчик, який буде автоматично витягувати ключі для перекладів з коду і додавати в JSON файлики. Також реалізуємо свій власний плагін, який буде видаляти зайвий для нас код з Production збірки.
СІ/CD і
pre-commit хуки
Налаштуємо найпростіший ci pipeline, який буде проганяти за нас 3 види тестів, робити збірку проекту, Сторібука, проганяти код на лінтери. Також налаштуємо pre commit хуки за допомогою husky.
Нормалізація даних
Також приділимо увагу нормалізації даних. Поговоримо про саму концепцію і реалізуємо приклад в коді. Попрацюємо з EntityAdapter.
Віртуалізація
При роботі зі списками важливо не забути про Perfomance. Попрацюємо з віртуальними списками, на прикладі подивимося як можна підвищити продуктивність.
Інфраструктура
Інфраструктуру налаштуємо таким чином, щоб і сам проект, і тестове оточення, і Сторібук вміли використовувати всі фічі і працювати як єдине ціле. (TS, css modules, глобальні змінні збірки і тд).
Рефакторинг
В кінці розробки ми проаналізуємо вийшов код і постараємося його відрефакторити, розберемо слабкі місця, виправимо їх і зрозуміємо на конкретних прикладах, як варто декомпозувати і ізолювати модулі в додатку.
Запити та робота з даними
Вся робота з даними буде здійснюватися за допомогою Redux toolkit. Першу частину курсу ми будемо працювати в класичному стилі і для роботи з апі будемо використовувати axios інстанс, який заінжект в асінк thunks. Також, для того щоб зрозуміти і випробувати різні підходи до кінця курсу ми випробуємо RTK query. Навчимося асинхронно інжектити нові ендпоінти, щоб зберігати розмір бандла мінімальним (code splitting).
Звіти
Для скріншотних/юніт/компонентних тестів навчимося генерувати зручні звіти, за допомогою яких відстежувати роботу тестів стане простіше.
Кодогенерація
Реалізуємо свій скрипт, який буде генерувати нам фічі\ \ сутності з усією структурою папок і файлів, в яких буде вже все необхідне вміст.
Процес розробки
В ході розробки ми вирішимо велику кількість проблем, в живому форматі будемо шукати рішення, вивчати документацію, правильно складати запити для пошуку вирішення проблеми.
Міграція на React 18
В кінці розробки мігруємо проект з 17 на 18 версію реакта.
Дебаг
Навчимося використовувати різні дебаг інструменти: вкладка network, application в браузері, девтулзи реакта, редакція, бандланалізатори і тд.
Кільцеві залежності і babel плагін
Поговоримо про кільцевих залежностях, навчимося їх знаходити, а також реалізуємо свій babel плагін, який буде видаляти зайвий код зі збірки.
Повна конфігурація проекту з нуля (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. Звичайно в нашому додатку буде кілька сторінок, цим нікого не здивуєш. Налаштуємо доступи для цих сторінок, по авторизованості, або за ролями. Також для збереження мінімального розміру бандла навчимося виносити сторінки в окремі чанки.
i18n
Навчимося працювати з інтернаціоналізацією. Впровадимо в інтерфейс дві мови (російська та англійська). Також навчимося розбивати переклади на чанки і довантажувати їх порціями, щоб не збільшувати розмір бандла.
TypeScript
З нуля налаштуємо TS (tsconfig), подружимо його з вебпаком, попрацюємо з union типами, в загальному тайпскрипту буде багато.
Bebel
Налаштуємо Babel і в якості тренування підключимо плагінчик, який буде автоматично витягувати ключі для перекладів з коду і додавати в JSON файлики. Також реалізуємо свій власний плагін, який буде видаляти зайвий для нас код з Production збірки.
СІ/CD і
pre-commit хуки
Налаштуємо найпростіший ci pipeline, який буде проганяти за нас 3 види тестів, робити збірку проекту, Сторібука, проганяти код на лінтери. Також налаштуємо pre commit хуки за допомогою husky.
Нормалізація даних
Також приділимо увагу нормалізації даних. Поговоримо про саму концепцію і реалізуємо приклад в коді. Попрацюємо з EntityAdapter.
Віртуалізація
При роботі зі списками важливо не забути про Perfomance. Попрацюємо з віртуальними списками, на прикладі подивимося як можна підвищити продуктивність.
Інфраструктура
Інфраструктуру налаштуємо таким чином, щоб і сам проект, і тестове оточення, і Сторібук вміли використовувати всі фічі і працювати як єдине ціле. (TS, css modules, глобальні змінні збірки і тд).
Рефакторинг
В кінці розробки ми проаналізуємо вийшов код і постараємося його відрефакторити, розберемо слабкі місця, виправимо їх і зрозуміємо на конкретних прикладах, як варто декомпозувати і ізолювати модулі в додатку.
Запити та робота з даними
Вся робота з даними буде здійснюватися за допомогою Redux toolkit. Першу частину курсу ми будемо працювати в класичному стилі і для роботи з апі будемо використовувати axios інстанс, який заінжект в асінк thunks. Також, для того щоб зрозуміти і випробувати різні підходи до кінця курсу ми випробуємо RTK query. Навчимося асинхронно інжектити нові ендпоінти, щоб зберігати розмір бандла мінімальним (code splitting).
Звіти
Для скріншотних/юніт/компонентних тестів навчимося генерувати зручні звіти, за допомогою яких відстежувати роботу тестів стане простіше.
Кодогенерація
Реалізуємо свій скрипт, який буде генерувати нам фічі\ \ сутності з усією структурою папок і файлів, в яких буде вже все необхідне вміст.
Процес розробки
В ході розробки ми вирішимо велику кількість проблем, в живому форматі будемо шукати рішення, вивчати документацію, правильно складати запити для пошуку вирішення проблеми.
Міграція на React 18
В кінці розробки мігруємо проект з 17 на 18 версію реакта.
Дебаг
Навчимося використовувати різні дебаг інструменти: вкладка network, application в браузері, девтулзи реакта, редакція, бандланалізатори і тд.
Кільцеві залежності і babel плагін
Поговоримо про кільцевих залежностях, навчимося їх знаходити, а також реалізуємо свій babel плагін, який буде видаляти зайвий код зі збірки.
https://privatelink.de/?https://ulbitv.ru/frontend