Освойте мощную библиотеку пользовательского интерфейса от Facebook
14 онлайн-занятий
по четвергам и субботам
На курсе вы изучите самую популярную библиотеку JavaScript, чтобы больше никогда не писать полотна кода с нуля, когда нужно добавить новую фичу в приложение, и не отлавливать баги, когда из-за сложной структуры приложение начинает подвисать.
Вы повысите качество своего кода, научитесь разрабатывать приложения на стеке React.js и создадите собственный проект, который не стыдно добавить в портфолио.
Вы познакомитесь с основными концепциями написания React.js-приложения, научитесь проектировать, писать, тестировать и деплоить приложения с помощью этой библиотеки.
Вы освоите фронтенд, научитесь работать с популярными библиотеками, совместимыми с React.js [React Hook Forms, React Router, Formik, ESLink], разбивать приложение на логические части и компоненты и создадите полноценное SPA.
Airbnb, Facebook, PayPal, Netflix, Instagram, Twitter, WhatsApp и другие всемирно известные компании используют библиотеку React.js для своего фронтенда. Если вы тоже хотите создавать современные и удобные пользовательские интерфейсы, изучите React.js на нашем курсе.
Вначале мы разберем классовые и функциональные компоненты React.js и научимся управлять их жизненным циклом. Затем будем соединять компоненты в приложение, проектировать, писать, тестировать и деплоить приложения на React.js. А по итогам курса ― создадим полноценное single page application с нуля.
Вы детально изучите структуру веб-страниц и приложений, написанных на React.js, затем рассмотрите каждый компонент отдельно и научитесь создавать компоненты самостоятельно исходя из задач бизнеса.
На каждом занятии будут live coding sessions, вы сможете выполнять задания параллельно с лектором. А 3 лучших студента получат индивидуальные консультации по итогам курса.
Вы будете работать с популярными frontend-библиотеками: React Hook Forms, React Router, Formik. Научитесь разбивать приложение на логические части и компоненты, писать архитектуру полноценных приложений и продвинутых сайтов самостоятельно с помощью React.js.
Вы сможете внедрить React.js в существующее приложение на JavaScript, облегчить код и ускорить отладку. Также сможете претендовать на позицию React.js Frontend Developer.
Повторите основные принципы работы современной версии JavaScript [ES6] и инструменты, необходимые для работы в ней. Получите обзор дополнительных библиотек для управления состоянием, формами и маршрутизацией в React.js-приложении. Узнайте, какие функции есть в React.js по умолчанию, а для каких нужны сторонние библиотеки. На примере ознакомьтесь с алгоритмом построения React.js-приложения.
Создайте и запустите базовое приложение Create React App. Узнайте, какие зависимости нужны для работы с React.js, и установите их. Разберите структуру файла package.json. Настройте и запустите локальный сервер для разработки. Напишите React.js-приложение, используя скелет Create React App.
Изучите базовые принципы рендеринга элементов React.js [DOM, VirtualDOM, Tree reconciliation]. Ознакомьтесь с синтаксисом JSX и узнайте, как он транслируется в Javascript. Научитесь описывать элементы React.js в JSX, используя условную логику и ветвления.
Изучите жизненный цикл React.js-компонентов и узнайте, при каких условиях они могут обновляться. Напишите сложный React.js-компонент, включите в него другие компоненты, используя, например, передачу свойств. Научитесь управлять жизненным циклом React.js-компонента.
Разберите отличия функциональных компонентов от классовых. Перепишите классовый React.js-компонент в функциональный. Научитесь управлять жизненным циклом функционального React.js-компонента.
Узнайте, что такое [хуки]. Разберите на примерах, в каких случаях стоит их применять, а в каких ― нет. Научитесь применять встроенные хуки для создания динамических компонентов, экономии вычислительных ресурсов, управления историей браузера и запросов к серверу. Напишите собственные хуки.
Ознакомьтесь с отличиями в написании обработчиков событий в React.js и стандартном JavaScript. Научитесь менять состояния элементов React.js в зависимости от действий пользователя. Изучите основные атрибуты, ответственные за обработку событий. Научитесь управлять состоянием компонента в его дочерних компонентах.
Научитесь изменять стили элементов React.js в зависимости от состояния их компонентов. Попробуйте стилизировать компоненты с помощью встроенных объектов CSS [a.k.a. inline styles], CSS-файлов, сгенерированных из JavaScript-объектов, CSS-модулей. Ознакомьтесь со способами загрузки медиафайлов.
Разберите принцип работы управляемых полей формы в React.js. Научитесь проверять поля формы на корректность и менять внешний вид и поведение формы в зависимости от этого. Ознакомьтесь с библиотеками Formik и React Hook Form и примените их в своей работе.
Разберите отличия между клиентской и серверной маршрутизацией. Изучите библиотеку React Router для описания клиентской маршрутизации. Узнайте, как избежать ошибок 404 при переходе между маршрутами. Научитесь использовать историю браузера для перехода между страницами и получать адрес и параметры из текущего URL при помощи хуков.
Ознакомьтесь с философией Flux и Unidirectional Data Flow, а затем ― с известной имплементацией Flux под названием Redux. Изучите все этапы изменения состояния отдельных частей приложения при помощи нескольких функций Reducer. Научитесь применять библиотеку Redux для управления состоянием React.js-приложения в ответ на действия пользователя.
Установите тестовый фреймворк Jest и ознакомьтесь с его тестовыми сценариями. Изучите алгоритм тестирования на примерах, а затем самостоятельно протестируйте React.js-приложение. Научитесь использовать снимки [snapshots] для регрессионного тестирования изменений.
Настройте библиотеку ESLint для проверки правильности заданного стиля кода. Научитесь структурировать файлы скриптов и стилей в приложении React так, чтобы код было легко читать, а приложение ― удобно масштабировать. Ознакомьтесь с принципами CI/CD. Разверните статичное React.js-приложение на GitHub Pages для публичного доступа.
Повторите все темы курса. Презентуйте проект, работу над которым начали со второго занятия. Получите фидбек от лектора.