В первом блоке мы установим у всех участников курса набор инструментов, необходимых для продвижения по темам. В этом блоке будут проведены индивидуальные установочные консультации, на которых мы определим индивидуальные цели на курс, исходя из вашего личного опыта в разработке. По итогу этого блока вы научитесь самостоятельно настраивать сборку SPA-приложения с любым css препроцессором с помощью webpack. А также получите базовое представление о языке Typescript и особенностях его настройки и применения.

• На первом занятии мы покажем необходимый набор инструментов, как их установить и настроить. Вы узнаете, как настроить сборку проекта на React с нуля.
• Познакомитесь с основами языка Typescript и его отличиями от JavaScript.

Во время второго блока будут сформированы команды, консультации перейдут в режим командных встреч. На таких встречах мы определимся с проектом, сформируем набор функционала, который и будет нашей целью на курс. Вы разработаете макеты и к концу блока сверстаете все страницы командного проекта на React.

• Познакомимся с историей появления веб-фреймворков, обсудим достоинства и недостатки React, начнем разрабатывать первые компоненты на React.
• Изучим best practise по организации структуры React приложения. Углубимся в детали рендеринга React компонентов. Начнем применять современный подход CSS-IN-JS стилизации React компонентов на базе styled-components.
• Научимся правильно работать с основными составляющими React компонентов — Props и State, которые помогут добавить гибкость компонентам. Разберемся с правильным методом взаимодействия с DOM элементами из React компонентов.
• Продолжим изучать API React, посмотрим способы взаимодействия с дочерними компонентами, узнаем, как избежать проблемы с бесконечными прокидываниями props с помощью context. Познакомимся с альтернативным подходом расширения возможностей React компонента.
• Разберем жизненный цикл компонента, поймем, как в него внедряться, что позволит обогащать компоненты новыми видами логики.
• Поймем, как React смог полностью уйти от классовых компонентов в сторону функциональных с помощью нового паттерна Hooks. Познакомимся с основными хуками React.
• Выясним, как именно работает переключение между страницами без перезагрузки, а также внедрим в работу React-Router.
• Научимся разрабатывать мультиязычные React приложения.
• Рассмотрим способы для внедрения гибкости в стилизации интерфейса, работу с темами (например, светлая/темная), работу с иконками и анимациями на примере lotty.

На этом этапе вы реализуете свой сервер на Node.js при помощи библиотеки Express.js. Реализуете api для командного проекта. Научитесь работать в программе postman. Познакомитесь с основами использования docker образа на примере работы с базой данных Mongodb.

• Знакомство с Node.js, её историей появления и основами работы пакетного менеджера.
• Выясните, как Node.js работает с файлами, как создаются и публикуются модули, познакомитесь с особенностями этого процесса.
• Научитесь поднимать сервер на Node.js с помощью фреймворка Express.js.
• Продолжение изучения особенностей сервера на Express.js.

После прохождения этого блока вы будете понимать, как в современном React приложении происходит взаимодействие с api бэкенда. Научитесь разрабатывать и администрировать стабовые заглушки для локальной разработки, узнаете, как сделать конфигурируемое микрофронтенд приложение для работы с реальным сервером.

• Для углубленного понимания механизма работы state менеджера Redux напишем свой вариант и разберемся с основами применения Redux.
• Посмотрим на практике, как и для чего применяется Redux в его классическом виде.
• Освоите применение и поймете концепцию селекторов с применением хуков и без них.
• На основе предыдущих знаний рассмотрим более современный вариант применения Redux благодаря библиотеке @reduxjs/toolkit.
• Разберемся в тонкостях работы с сервером и местом Redux в этом процессе.

В этом блоке мы изучим, как и зачем тестировать веб-приложение. Вы научитесь тестировать своё приложение и поднимете тестовое покрытие кода до уровня промышленного стандарта в 80%. Вы освоите принципы тестирования приложения на примере библиотеки Jest.

• Поговорим, зачем вообще нужно писать тесты и как делать это быстро и эффективно.
• Освоите настройку с нуля тестового фреймворка Jest.
• Продолжение предыдущей темы с уклоном в Unit тестирование.
• Увидите, как добавить в проект UI-тесты.

В этом блоке мы изучим технологии, которые будут использоваться во всех современных веб-приложениях, которые становятся доступными после отказа от поддержки от Internet Explorer.

• Познакомимся с идеей одностраничного приложения.
• Выясним, как написать свою библиотеку компонентов.
• Освоим многопоточность на Node.js.
• Напишем чат на веб-сокете. Вы собственными руками взломаете его на занятии. а также научитесь защищаться от таких атак
• Посмотрим на создание собственного видеочата на двоих.
• Познакомимся с основами настройки сервера на Nginx и балансировкой. Также узнаем, как подружить поисковики с нашим SPA-приложением.