- ру
- ук
Комплексный курс по React
с современными технологиями
О курсе
Курс будет полезен, если вы:
- ✔️ Выпускники курса JavaScript и ECMAScript для продвинутых
- ✔️ Фронтенд-разработчики, которые повышают свой профессиональный уровень
- ✔️ Бекенд-разработчики, которые переходят в фуллстек
Что вы получите после курса
- 🥇 Детально разберётесь с работой классовых компонентов, хуков, а также особенностями описания бизнес-логики с помощью кастомных хуков
- 🤓 Навыки работы с Redux по-новому с использованием хуков useSelector и useDispatch
- 😎 Навыки разработки и тестирования классовых компонентов, а также кастомных хуков
- 💼 3 персональных продакшн-проекта в своё портфолио
- 🏋️♀️ Появится уверенность на собеседованиях
- 💪 Прокачаете soft skills в групповой разработке
- 🚀 Должность Trainee React Developer с зарплатой от $550-650, а после Junior React Developer с зарплатой от $650-850
Теория
8 live-уроков (4 недели), которые проходят по понедельникам и четвергам в 19:30 по Киеву и Москве. Продолжительность занятия — 2 часа. Каждый участник получает максимум внимания. Занятия проходят в интерактивном формате — живое общение в реальном времени.
13 видеоуроков по работе с классовыми компонентами в React.
Если вы пропустили занятие или желаете повторить тему — не переживайте! Вам будет предоставлен доступ к записям уроков.
Практика
Практика (5 недель) — это работа с персональными проектами, а также участие в групповой разработке по Agile-методологии.
Материалы
Мы предоставляем неограниченный доступ к учебным материалам курса: записи уроков в видео- и аудио-формате, истории чатов, домашние задания c решениями от преподавателя, исходные коды примеров, которые использовались на уроках, а также списки полезных материалов.
Поддержка
Помощников достаточно! К твоим услугам преподаватель, ментор и целое коммьюнити — Lectrum Club. В курс включена проверка домашних заданий, персональных проектов и тестов, а также индивидуальные занятия с экпертом — поддержки получите столько, сколько вам нужно.
Как проходит обучение
- 💻 Общение в интерактивном формате (видео + аудио)
- 📝 Домашние задания
- 📖 3 персональных проекта
- 👨⚕️ Групповой проект в формате Agile-спринта
- ❓ Комплексное тестирование
- 🎥 24/7 доступ ко всем записям занятий
- 👨🎓 Поддержка от преподавателя и общение с группой в закрытом канале Lectrum Club
От экспертов своего дела
Мы успешно провели:
19 потоков по React, 12 по Redux, 4 по webpack, а также обучили 5 потоков по JavaScript и 3 по Backend. В 2019 году мы запустили новые курсы по Docker и Redis, а в 2020 году — GraphQL и TypeScript.
Структура курса
Неделя 1
+Урок 1: Введение в React
Друг, с этого урока мы начинаем погружение в удивительный мир веб-разработки применяя лучшие практики наших экспертов. 🚀
Подробнее...
Введение
- Что такое React?
- Что такое Virtual DOM?
- Что такое reconciliation?
- Алгоритм рендеринга React.
Настройка окружения
- Конфигурация стартовой точки.
- Настройка редактора для комфортной работы с React.
- Подготовка браузера.
JSX
- Что такое JSX?
- Создание атомарных элементов.
- Правила работы с JSX.
Компоненты
- Что такое компонент?
- Создание функциональных компонентов.
- Композиция.
- Популярные ошибки при работе с React-компонентами.
Практика
- Научимся настраивать проект для разработки.
- Конвертируем HTML & CSS разметку в полноценный React-компонент.
- Подключаем библиотеку для стилизации styled-components.
- Сделаем первые полноценные компоненты с помощью React.
+Урок 2: Работа с данными в React
Разработка становиться особо интересной с добавлением интерактива! В этом уроке мы научимся оживлять приложение динамикой. 🏎
Подробнее...
Пропсы, потомки и контекст
- Как работает поток данных в React?
- Для решения каких задач нужны пропсы.
- Правила применения пропс.
- Популярные ошибки при работе с пропс.
- Что такое потомки React?
- Как пользоваться потомками правильно?
- Знакомство с React контекст.
- Когда применять контекст хорошо, а когда плохо?
Хуки
- Как работают React-хуки?
- Разбор основных хуков: useState, useEffect, useCallback, useMemo, useContext.
Состояние
- Что такое стейт?
- Как правильно управлять состоянием компонента?
- Популярные ошибки при работе с состоянием.
Сеть
- Введение в концепцию общения клиент-сервер.
- Fetch API.
- React Query, Swr.
Практика
- Наполним наши компоненты данными с помощью пропс и потомков.
- Научимся правильно переиспользовать компоненты.
- Оживим наши компоненты с помощью состояния.
Неделя 2
+Урок 3: Роутинг в React
Не секрет, что полноценное приложение — это естественно, не одна страница, а целый комплекс! В этом уроке мы научимся связывать React-приложение в настоящий Single-Page Application (SPA) с помощью react-router.
Подробнее...
Теория
- Что такое SPA-приложение?
- Как правильно использовать DOM-интерфейсы для клиентской навигации?
- Концепт публичных и приватных страниц.
- Лучшие практики при работе с навигацией в SPA.
Практика
- Научимся создавать страницы в React-приложении.
- Изучим особенности работы с приватными и публичными страницами.
+Урок 4: Грамотное составление форм в React приложении
Научившись азам создания базы для SPA, мы перейдём к изучению эффективых приёмов составления форм. Научимся не только создавать разные по сложности формы, но и управлять их состоянием, а также валидировать и оформлять их осмысленную композицию.
Подробнее...
Теория
- Нативный подход составления форм.
- Создание форм с помощью библиотеки react-hook-form.
- Валидация форм с помощью мощного валидатора yup.
- Популярные ошибки при работе с формами.
- Лучшие практики при работе с формами.
Практика
- Научимся создавать простые формы.
- Изучим особенности при работе со сложными формами.
- Научимся валидировать формы.
Неделя 3
+Урок 5: Знакомство с Redux
И вот, настало время научиться работать с централизованным состоянием в React-приложении. В этом уроке мы изучим ключевые аспекты связи React и Redux.
Подробнее...
Теория
- Что такое Redux и зачем он нужен в React-приложении?
- Как правильно подключить Redux к React-приложению.
- Объявления атомарных инструкций с помощью Action.
- Описание бизнес-логики с помощью Reducer.
- Управление состоянием с помощью Store.
- Вызов действия внутри React-компонента.
- Чтение Redux состояния внутри React-компонента.
- Лучшие практики при работе с Redux.
- Правильная композиция Redux-составляющей проекта.
Практика
- Подключим Redux к React.
- Научимся правильно работать с Redux в React-приложении.
+Урок 6: Асинхронный Redux
Научимся делать запросы к API с помощью перехватчика Redux Thunk. Изучим особенности при работе с асинхронным кодом в React-приложении.
Подробнее...
Redux Thunk
- Концепция «перехватчик».
- Асинхронность и Redux.
- Отправка REST-запросов с помощью Redux Thunk.
- Популярные ошибки при работе с асинхронными операциями.
- Лучшие практики при работе с разными типами запросов.
Практика
- Научимся загружать данные с удалённого API.
- Научимся отправлять данные на удалённый API.
Неделя 4
Персональный проект "Виджет погоды" на JavaScript, Redux, CSS-modules
Неделя 5
+Урок 7: Переход на TypeScript
Экосистема современного фронтенд давно перешла к использованию инструментов, делающих жизнь разработчиков (и не только) лучше. Один из таких инструментов — TypeScript. Вместе мы правильно настроим тайпскриптовый микроклимат проекта, чтобы TypeScript приносил пользу и помогал писать код.
Подробнее...
Теория
- Почему TypeScript?
- Введение в статическую строгую типизацию.
- Знакомство с базовыми типами и аннотациями.
- Как правильно подключить TypeScript к React-проекту?
- Как правильно переводить JavaScript React-приложение на TypeScript?
- Лучшие практики использования TypeScript в React-приложении.
Практика
- Подключим TypeScript к проекту.
- Применим лучшие практики TypeScript.
+Урок 8: Знакомство с MobX
MobX — это альтернативная библиотека для стейт-менеджмента по отношению к Redux. Поэтому, научившись работать с классическим Redux, мы изучим MobX. В результате приобретём навыки работы с обеими бибилиотеками и поймём преимущества и недостатки каждой из них.
Подробнее...
Теория
- Что такое MobX?
- Знакомство с базовой моделью обмена данных MobX - React.
- Знакомство с observables и subscriptions.
- MobX против Redux.
- Лучшие практики применения MobX.
Практика
- Подключим MobX к проекту.
- Применим лучшие практики MobX.
Неделя 6
+Урок 9: Тестирование программного кода
Повысим стабильность React-приложения с помощью тестов. Узнаем какие типы тестов бывают, а также разберём какие грани React-приложения стоит покрывать тестами в первую очередь. Научимся тестировать React-компоненты.
Подробнее...
Теория
- Ключевые особенности концепции Test Driven Development (TDD).
- Ключевые особенности концепции Behavioural Driven Development (BDD).
- Что такое интеграционное тестирование?
- Что такое end-to-end тестирование?
- Знакомство с фреймворком для тестирования JavaScript Jest.
- Тестирование React.
- Тестирование Redux.
- Тестирование MobX.
Практика
- Покроем тестами React-составляющую приложения.
- Покроем тестами Redux-составляющую приложения.
- Покроем тестами MobX-составляющую приложения.
+Урок 10: Styled Components (бонус)
Существует два больших лагеря, скандирующих за стилизацию приложения через классический CSS и за стилизацию в JavaScript (CSS in JS). В данном уроке мы подробно разберём лучшее на данный момент решения для стилизации React-приложения посредством JavaScript — styled-components.
Подробнее...
Теория
- Что такое CSS in JS?
- Чем хорош данный подход?
- Каковы преимущества и недостатки по сравнению с классическим подходом стилизации через CSS-файлы?
- Как составлять правильную композицию Styled-компонентов?
- Как правильно применять Styled-компоненты с TypeScript?
Практика
- Научимся секретным методологиям применения styled-components
- Освоим лучшие практики при использовании данной библиотеки
Неделя 7
Персональный проект "Менеджер задач" на TypeScript, MobX, styled-components
Неделя 8
Групповой проект по Agile-методологии
Неделя 9
Подведение итогов основного обучения
Итоги работы над персональными проектами.
Персональный проект "Фитнес трекер" — стек на выбор
Выберите тариф участия
Lite
- Миникурс по Git
- 10 live-занятий с записью
- 13 видеоуроков по работе с классами в React
- Саппорт в общем чате
- Домашки с проверкой
- 2 собственных проекта для портфолио
- Групповой проект по Agile
- Поддержка саппорт-менеджера
- Финальное тестирование
- Онлайн-сертификат
- Доп. материалы для углубленного изучения
- Исходные коды и презентации
- Доступ к материалам курса 12 мес.
- Карьерный блок:
- Поможем оформить CV
- Подготовим к работе в компании
Standard
- Всё, что в ходит в тариф Lite, а также:
- Персональный ментор
- 9 персональных сессий с ментором
- Фидбек по домашкам
- Дополнительный проект для портфолио
- Референтные версии 3 персональных проектов
- Пожизненный доступ к материалам курса
- Карьерный блок:
- Подготовим к работе на фрилансе
- Поможем заработать на первом заказе
Бронирование
Куратор программы
Дима Вакациенко
Тьютор, ментор и локомотив фронта в Lectrum
Senior Engineer в Boosta
6 лет опыта в IT
Евангелист React, адепт идеального кода. Тьютор с большим опытом менторства
Создатель обучающих курсов
Ответы на вопросы
- ➕ Какими необходимыми навыками я должен обладать перед началом курса?
- Для участия в курсе опыт коммерческой разработки не нужен. Но чтобы не возникало сложностей в процессе обучения, необходимо иметь базовые навыки работы с HTML и CSS, а также уверенно владеть JavaScript&ECMAScript. Если есть сомнения, напиши нам в чат-бот и получи тест для проверки знаний.
- ➕ Какая информация будет содержаться в сертификате, если я не буду разрабатывать персональные проекты?
- Онлайн-сертификат будет с информацией о прослушанном курсе, без оценки.
- ➕ Я очень хорошо знаю React и хочу быть у вас ментором.
- Да, это возможно. Мы с радостью с тобой будем сотрудничать, если у тебя 3+ года опыта в коммерческой разработке с инструментами данного курса, ты успешно прошёл наш тест и интервью c техническим руководителем курса. Напиши нам в чат-бот и получили ссылку на тест. Желаем удачи.
- ➕ Могу ли я перейти на более продвинутый тариф, если уже оплатил курс?
- Да, для этого нужно обратиться к нам в чат-бот и мы пришлём вам счет на доплату.
- ➕ Чем вы лучше других обучающих компаний?
- Во-первых, у нас большая экспертиза в образовании, во-вторых, мы очень фанатично относимся к качеству курса и менторской поддержки, а в третьих, мы не просто учим, а ежедневно пишем на том стеке, которому обучаем. Мы практики, теоретики, а еще идеалисты.
- ➕ Я могу вернуть деньги за курс?
Да, возврат денег возможен в течение суток после начала первого урока. Например, урок начался в 19:30 и на следующий день до этого времени возможно вернуть сумму за вычетом стоимости 1 урока. Для этого необходимо отправить запрос о возврате денег на электропочту.
Если вы прошли больше 3 уроков и запрашиваете возврат средств, то материалы курса (записи 8 уроков, исходный код примеров, а также презентации) для вас остаются в неограниченном доступе, а возврат производится за практическую часть — 40% от стоимоcти курса.
- ➕ Какой уровень скиллов у ваших экспертов курса?
Мы понимаем, какую важную функцию выполняет наставник в обучении и поэтому с нами сотрудничают преподаватели не ниже Senior-уровня и менторы не ниже Middle-уровня, которые во время обучения делятся своим опытом, лучшими практиками со студентами.
- ➕ У меня остались вопросы/Я всё ещё сомневаюсь.
- Оставьте заявку на получение бесплатной консультации и мы с удовольствием вас проконсультируем, посоветуем или просто пообщаемся.