работа с библиотеками Redux, React Hook Forms, React Router, Formik, ESLint live coding на каждом занятии и разработка Single Page Application по итогу индивидуальное общение с лектором и техническое интервью для 3 лучших студентов курса
React.js ― самая популярная библиотека JavaScript последние 5 лет.
Чтобы не писать полотна кода всякий раз, когда надо добавить новую фичу в приложение, и не отлавливать баги, когда из-за сложной структуры приложение начинает тормозить, ― используйте React.js. Изучить самую популярную библиотеку JavaScript вы можете на курсе.
Программа курса
01 занятие
02.12
19:00 (UTC + 2)
Основные функции React.js
Повторите основные принципы работы современной версии JavaScript [ES6] и инструменты, необходимые для работы в ней. Получите обзор дополнительных библиотек для управления состоянием, формами и маршрутизацией в React.js-приложении. Узнайте, какие функции есть в React.js по умолчанию, а для каких нужны сторонние библиотеки. На примере ознакомьтесь с алгоритмом построения React.js-приложения.
02 занятие
04.12
11:00 (UTC + 2)
Среда разработки React.js
Создайте и запустите базовое приложение Create React App. Узнайте, какие зависимости нужны для работы с React.js, и установите их. Разберите структуру файла package.json. Настройте и запустите локальный сервер для разработки. Напишите React.js-приложение, используя скелет Create React App.
03 занятие
09.12
19:00 (UTC + 2)
JSX и DOM
Изучите базовые принципы рендеринга элементов React.js [DOM, VirtualDOM, Tree reconciliation]. Ознакомьтесь с синтаксисом JSX и узнайте, как он транслируется в Javascript. Научитесь описывать элементы React.js в JSX, используя условную логику и ветвления.
04 занятие
11.12
11:00 (UTC + 2)
Классовые компоненты React.js
Изучите жизненный цикл React.js-компонентов и узнайте, при каких условиях они могут обновляться. Напишите сложный React.js-компонент, включите в него другие компоненты, используя, например, передачу свойств. Научитесь управлять жизненным циклом React.js-компонента.
05 занятие
16.12
19:00 (UTC + 2)
Функциональные компоненты React.js
Разберите отличия функциональных компонентов от классовых. Перепишите классовый React.js-компонент в функциональный. Научитесь управлять жизненным циклом функционального React.js-компонента.
06 занятие
18.12
11:00 (UTC + 2)
Хуки в React.js
Узнайте, что такое [хуки]. Разберите на примерах, в каких случаях стоит их применять, а в каких ― нет. Научитесь применять встроенные хуки для создания динамических компонентов, экономии вычислительных ресурсов, управления историей браузера и запросов к серверу. Напишите собственные хуки.
07 занятие
23.12
19:00 (UTC + 2)
События в React.js
Ознакомьтесь с отличиями в написании обработчиков событий в React.js и стандартном JavaScript. Научитесь менять состояния элементов React.js в зависимости от действий пользователя. Изучите основные атрибуты, ответственные за обработку событий. Научитесь управлять состоянием компонента в его дочерних компонентах.
08 занятие
25.12
11:00 (UTC + 2)
CSS и медиафайлы
Научитесь изменять стили элементов React.js в зависимости от состояния их компонентов. Попробуйте стилизировать компоненты с помощью встроенных объектов CSS [a.k.a. inline styles], CSS-файлов, сгенерированных из JavaScript-объектов, CSS-модулей. Ознакомьтесь со способами загрузки медиафайлов.
09 занятие
13.01
19:00 (UTC + 2)
Формы в React.js
Разберите принцип работы управляемых полей формы в React.js. Научитесь проверять поля формы на корректность и менять внешний вид и поведение формы в зависимости от этого. Ознакомьтесь с библиотеками Formik и React Hook Form и примените их в своей работе.
10 занятие
15.01
11:00 (UTC + 2)
Маршрутизация в React.js
Разберите отличия между клиентской и серверной маршрутизацией. Изучите библиотеку React Router для описания клиентской маршрутизации. Узнайте, как избежать ошибок 404 при переходе между маршрутами. Научитесь использовать историю браузера для перехода между страницами и получать адрес и параметры из текущего URL при помощи хуков.
11 занятие
20.01
19:00 (UTC + 2)
Flux и Redux
Ознакомьтесь с философией Flux и Unidirectional Data Flow, а затем ― с известной имплементацией Flux под названием Redux. Изучите все этапы изменения состояния отдельных частей приложения при помощи нескольких функций Reducer. Научитесь применять библиотеку Redux для управления состоянием React.js-приложения в ответ на действия пользователя.
12 занятие
22.01
11:00 (UTC + 2)
Тестирование
Установите тестовый фреймворк Jest и ознакомьтесь с его тестовыми сценариями. Изучите алгоритм тестирования на примерах, а затем самостоятельно протестируйте React.js-приложение. Научитесь использовать снимки [snapshots] для регрессионного тестирования изменений.
13 занятие
27.01
19:00 (UTC + 2)
Анализ и развертывание
Настройте библиотеку ESLint для проверки правильности заданного стиля кода. Научитесь структурировать файлы скриптов и стилей в приложении React так, чтобы код было легко читать, а приложение ― удобно масштабировать. Ознакомьтесь с принципами CI/CD. Разверните статичное React.js-приложение на GitHub Pages для публичного доступа.
14 занятие
30.01
11:00 (UTC + 2)
Презентация и разбор курсовых проектов
Повторите все темы курса. Презентуйте проект, работу над которым начали со второго занятия. Получите фидбек от лектора.
После курса вы сможете:
- писать архитектуру полноценных приложений и продвинутых сайтов самостоятельно с помощью React.js
- работать с популярными frontend-библиотеками: React Hook Forms, React Router, Formik
- разбивать приложение на логические части и компоненты
- компилировать и тестировать React.js-компоненты, поддерживать стиль и чистоту кода
- деплоить приложения, написанные на React.js
- внедрять React.js в имеющиеся приложения JavaScript
- применять React.js в работе и разрабатывать SPA с нуля
Кому будет полезен курс
- Frontend Developers (beginner)
Если вы:
- знаете базовый синтаксис JavaScript
- понимаете и применяете основные концепции frontend-разработки
- хотите повысить качество своего кода и разрабатывать приложения на стеке React.js
- Frontend Developers
Если вы:
- разрабатываете пользовательские интерфейсы > 1 года
- знаете другие фреймворки и библиотеки для frontend
- устали писать полотна запутанного кода на JavaScript для каждой новой фичи
- хотите проектировать сложные и быстрые приложения с помощью React.js
- Backend Developers
Если вы:
- кодите на своем языке > 1 года
- знакомы с основами JavaScript и CSS
- хотите освоить frontend-разработку и создавать современные пользовательские интерфейсы
- хотите стать fullstack-разработчиком
Необходимые знания:
JavaScript
знаете базовый синтаксис языка, умеете писать функции и объекты
HTML + CSS
понимаете основы HTML и CSS
Клиент-серверная архитектура
понимание клиент-серверной архитектуры будет плюсом
Лектор
Станислав Сапранков 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 [Ансбах, Германия]
14 онлайн-занятий 7 домашних заданий + финальный проект 20 часов теории + практика
Записаться Дипломный проект
Со второго занятия студенты разрабатывают туристическое приложение. Оно помогает подбирать локации для путешествий исходя из пожеланий пользователя, например, может учитывать текущую погоду в выбранных местах.
Студенты могут развивать этот проект и дальше, как PET-проект.
Заявка на курс
Оставьте заявку, мы свяжемся и уточним, подходит ли вам курс и сколько он стоит
-
14 занятий для того, чтобы получить новую работу
-
практика на каждом занятии
-
финальный проект, который можно добавить в портфолио