• < Живой онлайн-курс >
  • < junior level >
  • < 20 часов теории + практика >
Оксана Носенко

Библиотека React.js для frontend-разработки

Создайте полноценное React-приложение с нуля за 14 занятий

О курсе

Чтобы не писать полотна кода всякий раз, когда надо добавить новую фичу в приложение, и не отлавливать баги, когда из-за сложной структуры приложение начинает тормозить, ― используйте React.js. Изучить самую популярную библиотеку JavaScript вы можете на курсе.

  • работа с библиотеками Redux, React Hook Forms,
    React Router, Formik, ESLint
  • live coding на каждом занятии и
    разработка Single Page Application по итогу
  • индивидуальное общение с лектором и техническое интервью
    для 3 лучших студентов курса

Специализация курса

курс подойдет
  • начинающим frontend-разработчикам
  • backend-разработчики
нужно
  • JavaScript - знать базовый синтаксис языка, умеете писать функции и объекты
  • HTML + CSS - понимать основы HTML и CSS
  • Клиент-серверная архитектура - понимание клиент-серверной архитектуры будет плюсом

02 декабря — 30 января

14 занятий (по четвергам и субботам)

Записаться на курс
Лилия Луценко

О лекторе

Станислав Сапранков

Software Developer Engineer в Amazon Web Services

  • разрабатывает backend- и frontend-системы обработки платежей, через которые ежедневно проходят сотни тысяч запросов пользователей, в Amazon Web Services [Берлин, Германия]
  • имеет действующие сертификаты Developer и SysOps Administrator от Amazon Web Services
  • > 6 лет опыта fullstack-разработки в продуктовых компаниях
  • 2 года разрабатывал центральные компоненты платформы FlixBus [Мюнхен, Германия]
  • разработал новый посадочный талон, страницу ввода персональных данных, страницу возврата билетов с помощью React.js
  • обеспечил непрерывный обмен данными между клиентами и платформой онлайн-продаж и разработал сложные решения для передачи данных в Tradebyte Software [Ансбах, Германия]
 

Программа

    • занятие 1
    • онлайн 02.12 на 19:00

    Занятие 1. Основные функции React.js

    Повторите основные принципы работы современной версии JavaScript [ES6] и инструменты, необходимые для работы в ней. Получите обзор дополнительных библиотек для управления состоянием, формами и маршрутизацией в React.js-приложении. Узнайте, какие функции есть в React.js по умолчанию, а для каких нужны сторонние библиотеки. На примере ознакомьтесь с алгоритмом построения React.js-приложения.

    • занятие 2
    • онлайн 04.12 на 11:00

    Занятие 2. Среда разработки React.js

    Создайте и запустите базовое приложение Create React App. Узнайте, какие зависимости нужны для работы с React.js, и установите их. Разберите структуру файла package.json. Настройте и запустите локальный сервер для разработки. Напишите React.js-приложение, используя скелет Create React App.

Показать всю программу свернуть программу
    • занятие 3
    • онлайн 09.12 на 19:00

    JSX и DOM

    Изучите базовые принципы рендеринга элементов React.js [DOM, VirtualDOM, Tree reconciliation]. Ознакомьтесь с синтаксисом JSX и узнайте, как он транслируется в Javascript. Научитесь описывать элементы React.js в JSX, используя условную логику и ветвления.

    • занятие 4
    • онлайн 11.12 на 11:00

    Классовые компоненты React.js

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

    • занятие 5
    • онлайн 16.12 на 19:00

    Занятие 5. Функциональные компоненты React.js

    Разберите отличия функциональных компонентов от классовых. Перепишите классовый React.js-компонент в функциональный. Научитесь управлять жизненным циклом функционального React.js-компонента.

    • занятие 6
    • онлайн 18.12 на 11:00

    Занятие 6. Хуки в React.js

    Узнайте, что такое [хуки]. Разберите на примерах, в каких случаях стоит их применять, а в каких ― нет. Научитесь применять встроенные хуки для создания динамических компонентов, экономии вычислительных ресурсов, управления историей браузера и запросов к серверу. Напишите собственные хуки.

    • занятие 7
    • онлайн 23.12 на 19:00

    События в React.js

    Ознакомьтесь с отличиями в написании обработчиков событий в React.js и стандартном JavaScript. Научитесь менять состояния элементов React.js в зависимости от действий пользователя. Изучите основные атрибуты, ответственные за обработку событий. Научитесь управлять состоянием компонента в его дочерних компонентах.

    • занятие 8
    • онлайн 25.12 на 11:00

    CSS и медиафайлы

    Научитесь изменять стили элементов React.js в зависимости от состояния их компонентов. Попробуйте стилизировать компоненты с помощью встроенных объектов CSS [a.k.a. inline styles], CSS-файлов, сгенерированных из JavaScript-объектов, CSS-модулей. Ознакомьтесь со способами загрузки медиафайлов.

    • занятие 9
    • онлайн 13.01 на 19:00

    Формы в React.js

    Разберите принцип работы управляемых полей формы в React.js. Научитесь проверять поля формы на корректность и менять внешний вид и поведение формы в зависимости от этого. Ознакомьтесь с библиотеками Formik и React Hook Form и примените их в своей работе.

    • занятие 10
    • онлайн 15.01 на 11:00

    Маршрутизация в React.js

    Разберите отличия между клиентской и серверной маршрутизацией. Изучите библиотеку React Router для описания клиентской маршрутизации. Узнайте, как избежать ошибок 404 при переходе между маршрутами. Научитесь использовать историю браузера для перехода между страницами и получать адрес и параметры из текущего URL при помощи хуков.

    • занятие 11
    • онлайн 20.01 на 19:00

    Flux и Redux

    Ознакомьтесь с философией Flux и Unidirectional Data Flow, а затем ― с известной имплементацией Flux под названием Redux. Изучите все этапы изменения состояния отдельных частей приложения при помощи нескольких функций Reducer. Научитесь применять библиотеку Redux для управления состоянием React.js-приложения в ответ на действия пользователя.

    • занятие 12
    • онлайн 22.01 на 11:00

    Тестирование

    Установите тестовый фреймворк Jest и ознакомьтесь с его тестовыми сценариями. Изучите алгоритм тестирования на примерах, а затем самостоятельно протестируйте React.js-приложение. Научитесь использовать снимки [snapshots] для регрессионного тестирования изменений.

    • занятие 13
    • онлайн 27.01 на 19:00

    Анализ и развертывание

    Настройте библиотеку ESLint для проверки правильности заданного стиля кода. Научитесь структурировать файлы скриптов и стилей в приложении React так, чтобы код было легко читать, а приложение ― удобно масштабировать. Ознакомьтесь с принципами CI/CD. Разверните статичное React.js-приложение на GitHub Pages для публичного доступа.

    • занятие 14
    • онлайн 30.01 на 11:00

    Презентация и разбор курсовых проектов

    Повторите все темы курса. Презентуйте проект, работу над которым начали со второго занятия. Получите фидбек от лектора.

После курса вы сможете:

  • писать архитектуру полноценных приложений и продвинутых сайтов самостоятельно с помощью React.js
  • работать с популярными frontend-библиотеками: React Hook Forms, React Router, Formik
  • разбивать приложение на логические части и компоненты
  • компилировать и тестировать React.js-компоненты, поддерживать стиль и чистоту кода
  • деплоить приложения, написанные на React.js
  • внедрять React.js в имеющиеся приложения JavaScript
  • применять React.js в работе и разрабатывать SPA с нуля

Заявка на курс

Оставьте заявку, мы свяжемся и уточним, подходит ли вам курс и сколько он стоит

Регистрируясь, вы соглашаетесь с условиями
договора-оферты и пполитикой конфиденциальности.

What if … :

  • 1. ... курс не понравился — можно вернуть деньги.
  • 2. ... не подходит график занятий — уточните, когда будет следующий поток.
  • 3. ... вы пропустили занятия — сохраняется запись.