в благотворительный фонд «Вернись живым»
- ру
- укр
React.js: Redux та MobX, CSS Modules и Styled Components
Об интенсиве
Для кого
- ✔️ Освоили JavaScript, но для трудоустройства нужен React
- ✔️ Прошли frontend-курсы, но React знаете поверхностно
- ✔️ Самоучки, которым нужен наставник и практика на больших проектах
- ✔️ Нужен рефреш и больше практики по React на хуках, а также современным инструментам, которые используют вместе с этой библиотекой
Вы изучите технологии
- ✔️ React v.18 на хуках
- ✔️ Строгая типизация: TypeScript
- ✔️ Стейт-менеджеры: Redux, MobX
- ✔️ Асинхронный Redux: Redux Thunk и Redux Saga
- ✔️ Формы: React Hook Form
- ✔️ Стили: Styled Components, CSS Modules
- ✔️ Сеть: React Query
- ✔️ Тестирование: Jest, React Testing Library
Вы научитесь
- ✔️ Работать с компонентами, хуками, а также особенностями разработки бизнес-логики с помощью кастомных хуков
- ✔️ Использовать TypeScript по назначению, чтобы он помогал, а не наоборот
- ✔️ Формировать правильную архитектуру приложения
- ✔️ Использовать лучшие подходы стилизации: CSS-модули и Styled Components
- ✔️ Создавать эффективные формы, а также их валидировать посредством применения оптимального подхода к валидации
- ✔️ Работать с Redux c использованием новых хуков useDispatch и useSelector, лучших практик и минимумом написанного кода
- ✔️ Работать с MobX, а также понимать его отличия от Redux
- ✔️ Тестировать React-компоненты, хуки, а так же Redux и MobX
- ✔️ Работать в команде по Agile-методологии
Профит после обучения
- ✔️ Уверенные знания по технологиям курса
- ✔️ Готовое портфолио: Виджет погоды, Органайзер, Фитнес-трекер, Медиатека
- ✔️ Прокачанные soft skills в групповой разработке по Agile
- ✔️ Уверенность на собеседованиях
- ✔️ Помощь при трудоустройстве или на фрилансе
- ✔️ Старт в разработку на позицию Trainee React Developer с зарплатой от $500-650, а после
испытательного срока — Junior React Developer с зарплатой от $650-950
Гарантия
- ✔️ 1-й месяц работы полностью покроет стоимость 10-ти недельного обучения
- ✔️ Никаких рисков. Мы вернём деньги, если не понравится обучение в первую неделю
От экспертов своего дела
Мы успешно провели:
25 потоков по React, 12 по Redux, 4 по webpack, 10 по JavaScript и 5 по Backend. В 2019 году мы запустили новые курсы по Docker и Redis, в 2020 году — GraphQL и TypeScript, а также ввели курсы по вёрстке. В 2021 году — Next.js. Наша школа покрывает полный стек по профессиям Frontend и Fullstack-разработчик.
Программа курса
Неделя 1
+Урок 1: Введение в React
Друг, с этого урока мы начинаем погружение в удивительный мир веб-разработки применяя лучшие практики наших экспертов.
Подробнее...
Введение
- Что такое React?
- Что такое Virtual DOM?
- Что такое reconciliation?
- Алгоритм рендеринга React.
Настройка окружения
- Конфигурация стартовой точки.
- Настройка редактора для комфортной работы с React.
- Подготовка браузера.
JSX
- Что такое JSX?
- Создание атомарных элементов.
- Правила работы с JSX.
Компоненты
- Что такое компонент?
- Создание функциональных компонентов.
- Композиция.
- Популярные ошибки при работе с React-компонентами.
Практика
- Научимся настраивать проект для разработки.
- Конвертируем HTML & CSS разметку в полноценный React-компонент.
- Сделаем первые полноценные компоненты с помощью React.
+Урок 2: Работа с данными в React
Разработка становиться особо интересной с добавлением интерактива! В этом уроке мы научимся оживлять приложение динамикой.
Подробнее...
Пропсы, потомки и контекст
- Как работает поток данных в React?
- Для решения каких задач нужны пропсы.
- Правила применения пропс.
- Популярные ошибки при работе с пропс.
- Что такое потомки React?
- Как пользоваться потомками правильно?
- Знакомство с React контекст.
- Когда применять контекст хорошо, а когда плохо?
Хуки
- Как работают React-хуки?
- Разбор основных хуков: useState, useContext.
Состояние
- Что такое стейт?
- Как правильно управлять состоянием компонента?
- Популярные ошибки при работе с состоянием.
Практика
- Наполним наши компоненты данными с помощью пропс и потомков.
- Научимся правильно переиспользовать компоненты.
- Оживим наши компоненты с помощью состояния.
Неделя 2
+Урок 3: Работа с сетью в React
Фактически все приложения в интеренете в той или иной форме общаются с сервером. Мы на практике разберёмся как отправлять запросы на сервер. А так же оптимизируем наше приложение на максимальную производительность.
Подробнее...
Продвинутые хуки
- Выполнение логики на разных этапах жизненного цикла компонента с помощью хука useEffect.
- Оптимизация производительности с помощью хуков useCallback и useMemo.
Сеть
- Введение в концепцию общения клиент-сервер.
- Fetch API.
- React Query.
Практика
- Научимся оптимизировать приложение для максимальной производительности.
- Наполним приложение реальными данными с сервера.
+Урок 4: Роутинг в React
Не секрет, что полноценное приложение — это естественно, не одна страница, а целый комплекс! В этом уроке мы научимся связывать React-приложение в настоящий Single-Page Application (SPA) с помощью react-router.
Подробнее...
Теория
- Что такое SPA-приложение?
- Как правильно использовать DOM-интерфейсы для клиентской навигации?
- Концепт публичных и приватных страниц.
- Лучшие практики при работе с навигацией в SPA.
Практика
- Научимся создавать страницы в React-приложении.
- Изучим особенности работы с приватными и публичными страницами.
Неделя 3
+Урок 5: Грамотное составление форм в React приложении
Научившись азам создания базы для SPA, мы перейдём к изучению эффективых приёмов составления форм. Научимся не только создавать разные по сложности формы, но и управлять их состоянием, а также валидировать и оформлять их осмысленную композицию.
Подробнее...
Теория
- Нативный подход составления форм.
- Создание форм с помощью библиотеки react-hook-form.
- Валидация форм с помощью мощного валидатора yup.
- Популярные ошибки при работе с формами.
- Лучшие практики при работе с формами.
Практика
- Научимся создавать простые формы.
- Изучим особенности при работе со сложными формами.
- Научимся валидировать формы.
+Урок 6: Знакомство с MobX
MobX — это альтернативная библиотека для стейт-менеджмента по отношению к Redux. Библиотека MobX придерживается немного иного подхода в построении хранилищ и мутациям данных. С изучением этой библиотеки мы научимся выносить состояние компонента во внешние хранилища данных.
Подробнее...
Теория
- Что такое MobX?
- Знакомство с базовой моделью обмена данных MobX - React.
- Знакомство с observables и subscriptions.
- MobX против Redux.
- Лучшие практики применения MobX.
Практика
- Подключим MobX к проекту.
- Применим лучшие практики MobX.
Неделя 4
Персональный проект "Виджет погоды" на JavaScript, MobX, CSS-modules
Неделя 5
+Урок 7: Знакомство с Redux
И вот, настало время научиться работать с централизованным состоянием в React-приложении. В этом уроке мы изучим ключевые аспекты связи React и Redux.
Подробнее...
Теория
- Что такое Redux и зачем он нужен в React-приложении?
- Как правильно подключить Redux к React-приложению.
- Объявления атомарных инструкций с помощью Action.
- Описание бизнес-логики с помощью Reducer.
- Управление состоянием с помощью Store.
- Вызов действия внутри React-компонента.
- Чтение Redux состояния внутри React-компонента.
- Лучшие практики при работе с Redux.
- Правильная композиция Redux-составляющей проекта.
Практика
- Подключим Redux к React.
- Научимся правильно работать с Redux в React-приложении.
+Урок 8: Асинхронный Redux (бонус)
Научимся делать запросы к API с помощью перехватчика Redux Thunk и Redux Saga. Изучим особенности при работе с асинхронным кодом в React-приложении.
Подробнее...
Redux Saga
- Концепция «перехватчик».
- Асинхронность и Redux.
- Введение в понятие эффектов Redux Saga.
- Блокирующие и не блокирующие эффекты.
- Отмена задач.
- Лучшие практики по перехвату и обработке ошибок.
Redux Thunk
- Отправка REST-запросов с помощью Redux Thunk.
- Популярные ошибки при работе с асинхронными операциями.
- Лучшие практики при работе с разными типами запросов.
Практика
- Научимся загружать данные с удалённого API.
- Научимся отправлять данные на удалённый API.
Неделя 6
+Урок 9: Переход на TypeScript
Экосистема современного фронтенд давно перешла к использованию инструментов, делающих жизнь разработчиков (и не только) лучше. Один из таких инструментов — TypeScript. Вместе мы правильно настроим тайпскриптовый микроклимат проекта, чтобы TypeScript приносил пользу и помогал писать код.
Подробнее...
Теория
- Почему TypeScript?
- Введение в статическую строгую типизацию.
- Знакомство с базовыми типами и аннотациями.
- Как правильно подключить TypeScript к React-проекту?
- Как правильно переводить JavaScript React-приложение на TypeScript?
- Лучшие практики использования TypeScript в React-приложении.
Практика
- Подключим TypeScript к проекту.
- Применим лучшие практики TypeScript.
+Урок 10: Тестирование программного кода
Повысим стабильность React-приложения с помощью тестов. Узнаем какие типы тестов бывают, а также разберём какие грани React-приложения стоит покрывать тестами в первую очередь. Научимся тестировать React-компоненты.
Подробнее...
Теория
- Ключевые особенности концепции Test Driven Development (TDD).
- Ключевые особенности концепции Behavioural Driven Development (BDD).
- Что такое интеграционное тестирование?
- Что такое end-to-end тестирование?
- Знакомство с фреймворком для тестирования JavaScript Jest.
- Тестирование React компонентов при помощи React Testing Library.
- Тестирование React.
- Тестирование Redux.
- Тестирование MobX.
Практика
- Покроем тестами React-составляющую приложения.
- Покроем тестами Redux-составляющую приложения.
- Покроем тестами MobX-составляющую приложения.
Неделя 7
+Урок 11: Styled Components (видеоурок)
Существует два больших лагеря, скандирующих за стилизацию приложения через классический CSS и за стилизацию в JavaScript (CSS in JS). В данном уроке мы подробно разберём лучшее на данный момент решения для стилизации React-приложения посредством JavaScript — styled-components.
Подробнее...
Теория
- Что такое CSS in JS?
- Чем хорош данный подход?
- Каковы преимущества и недостатки по сравнению с классическим подходом стилизации через CSS-файлы?
- Как составлять правильную композицию Styled-компонентов?
- Как правильно применять Styled-компоненты с TypeScript?
Практика
- Научимся секретным методологиям применения styled-components
- Освоим лучшие практики при использовании данной библиотеки
Неделя 8
Персональный проект "Менеджер задач" на TypeScript, Redux, styled-components
Неделя 9
Групповой проект по Agile-методологии
Неделя 10
+Подведение итогов основного обучения
Итоги работы над персональными проектами.
Подробнее...
Персональный проект "Фитнес трекер" — стек на выбор
Выберите тариф участия
Refresh
для тех, кто планирует освежить свои знания
- Миникурс по Git
- 10 live-занятий с записью
- Саппорт в общем чате
- Домашки с проверкой
- 2 собственных проекта для портфолио
- Групповой проект по Agile
- Поддержка курс-менеджера
- Финальное тестирование
- Онлайн-сертификат
- Доп. материалы для углубленного изучения
- Исходные коды и презентации
- Доступ к материалам курса 6 месяцев
- Карьерный блок:
- Поможем оформить резюме
- Подготовим к работе в компании
*оплата частями до 5 платежей от Monobank/Privatbank
Optimal
для тех, кто хочет освоить новые технологии
- Всё, что входит в тариф Refresh, а также:
- Персональный наставник
- 9 персональных сессий с наставником
- Фидбек по домашкам
- Дополнительный проект для портфолио
- Референтные версии 3 персональных проектов
- Неограниченный доступ к материалам курса
- Карьерный блок:
- Подготовим к работе на фрилансе
- Поможем заработать на первом заказе
*оплата частями до 5 платежей от Monobank/Privatbank
Оформить участие
Куратор программы
Андрей Присняк
Ведущий разработчик в Лектруме. 7 лет опыта работы с крупными международными outsource- и outstaff-компаниями. 10 лет опыта ИТ-наставничества.
Автор курсов по JavaScript, Backend, Docker и Redis.
Ответы на вопросы
- ➕ Какими необходимыми навыками я должен обладать перед началом курса?
- Для участия в курсе опыт коммерческой разработки не нужен. Но чтобы не возникало сложностей в процессе обучения, необходимо иметь базовые навыки работы с HTML и CSS, а также уверенно владеть JavaScript&ECMAScript. Если есть сомнения, напиши нам в чат-бот и получи тест для проверки знаний.
- ➕ Я очень хорошо знаю React и хочу быть у вас наставником.
- Да, это возможно. Мы с радостью с тобой будем сотрудничать, если у тебя 3+ года опыта в коммерческой разработке с инструментами данного курса, ты успешно прошёл наш тест и интервью c техническим руководителем курса. Напиши нам в чат-бот и получили ссылку на тест. Желаем удачи.
- ➕ Могу ли я перейти на пакет Optimal, если уже оплатил курс?
- Да, для этого нужно обратиться к нам в чат-бот и мы пришлём вам счет на доплату.
- ➕ Чем вы лучше других обучающих компаний?
- Во-первых, у нас большая экспертиза в образовании, во-вторых, мы очень фанатично относимся к качеству курса и поддержки наставника, а в третьих, мы не просто учим, а ежедневно пишем на том стеке, которому обучаем. Мы практики, теоретики, а еще идеалисты.
- ➕ Какой уровень скиллов у ваших экспертов курса?
Мы понимаем, какую важную функцию выполняет наставник в обучении и поэтому с нами сотрудничают преподаватели не ниже Senior-уровня и наставники не ниже Middle-уровня, которые во время обучения делятся своим опытом, лучшими практиками со студентами.
- ➕ У меня остались вопросы/Я всё ещё сомневаюсь.
- Оставьте заявку на получение бесплатной консультации и мы с удовольствием вас проконсультируем, посоветуем или просто пообщаемся.