На курсе вы научитесь:
- продвинутым возможностям Redux, Redux-Saga, Redux-thunk;
- создавать SPA-приложения и оптимизировать их для production;
- писать чистый и лаконичный код с TypeScript;
- применять интеграционные и юнит-тесты;
- работать в GraphQL, Apollo, Relay.
Также вы узнаете, как работает под капотом Webpack и Babel, освоите паттерны функционального программирования и научитесь их применять в React.
Для кого этот курс:
- JavaScript-разработчиков с навыками HTML/CSS;
- Backend-разработчиков, желающих стать Fullstack;
- начинающих React-разработчиков.
Программа обучения
В процессе обучения вы получите комплексные знания и навыки.
Модуль 1 — Preface
- Тема 1. Webpack + babel
- Тема Typescript (часть 1)
- Тема 3. Установка и настройка React
- Тема 4. Консультация по проекту
- Тема 5. JSX как основа ReactJS. Functional components
- Тема JSX + CSS
- Тема TDD + React
- Тема 8. CI/CD GitHub actions
Модуль 2 — React
- Тема 9. Typescript (часть 2)
- Тема Components Lifecycle
- Тема Консультация по React testing library
- Тема Списки, события, формы
- Тема 13. Основы функционального программирования
- Тема React patterns часть 1
- Тема React patterns часть 2
- Тема React-hooks
- Тема React hooks advanced
- Тема 18. React router
Модуль 3 — React + Redux
- Тема 19. Основные концепты Redux
- Тема 20. React + redux
- Тема Redux middwares and side effects
- Тема Redux toolkit
- Тема Redux-saga intro
- Тема 24. Redux-saga и интеграционное тестирование
- Тема Redux-saga basic concepts
- Тема Архитектура React-приложения
- Тема 27. Redux-saga advanced concept
Модуль 4 — Процесс разработки приложения, HTTP, WebSockets, GraphQL
- Тема 28. Процесс разработки React-приложения
- Тема 29. Продвинутая конфигурация приложения
- Тема 30. Test quality tools
- Тема HTTP and REST API
- Тема Потоки событий и WebSockets. WebWorkers и comlink для отложенной работы.
- Тема 33. Обзор GraphQL
Модуль 4 — Процесс разработки приложения, HTTP, WebSockets, GraphQL
- Тема 28. Процесс разработки React-приложения
- Тема 29. Продвинутая конфигурация приложения
- Тема 30. Test quality tools
- Тема HTTP and REST API
- Тема Потоки событий и WebSockets. WebWorkers и comlink для отложенной работы.
- Тема 33. Обзор GraphQL
Выпускной проект
В течении всего курса вы будете работать над проектом.
Будет предложено несколько вариантов на выбор:
- Разработка проекта, связанного с браузерной визуализацией. Аналог «conway’s game of life».
- Контроль расходов:
— регистрация чеков, сумм и дат;
— список чеков и квитанций;
— возможность строить графики со статистикой (в этом году/в прошлом году);
— хранение данных.
Выпускной работой студента станет доведение приложения, разрабатываемого на протяжении всего курса, до готовности к production.
После обучения вы:
- заберете с собой полный комплект обучающих материалов: видеозаписи всех вебинаров, презентации к занятиям, а также решение задач и проектов в виде кода на github и другие дополнительные материалы;
- получите сертификат о прохождении курса;
- приобретете опыт Frontend-разработки на React;
- получите приглашение пройти собеседование в компаниях-партнерах (эту возможность получают самые успешные студенты).
- Длительность — 3 месяца
- Онлайн в удобное время
- Обучение на практике
- Доступ к курсу навсегда
Кому подойдёт этот курс:
- Практикующим JavaScript-разработчикам
Вы освоите работу с фреймворком React.js, увеличите круг своих компетенций и задач, которые сможете выполнять на проекте — станете более конкурентоспособным сотрудником. - Frontend-разработчикам
js — один из самых популярных фреймворков в мире. Вы научитесь создавать изоморфные приложения на React Redux, типизировать их с помощью Typescript и работать с различными публичными сервисами.
Чему вы научитесь:
- Создавать приложения с нуля
Конфигурировать их с помощью Webpack или использовать готовые решения. - Работать с публичными API
Узнаете о механизмах OAuth и имплементациях в React. - Познакомитесь с Flux, Redux, Mobx
Узнаете подробности о состоянии приложения и работе с ним. - Профилировать свое приложение
Искать слабые места и оптимизировать их. - Тестировать свое приложение
Познакомитесь с библиотеками Jest и Enzyme. - Создавать SPA и RIA приложения с нуля
Будете применять разные подходы, с SSR или без него, включая деплой в облачный сервис Now.
Программа
Вас ждут 3 месяца теории и практики, которые добавят вам реальных знаний в разработке на JavaScript.
16 тематических модулей, 76 онлайн-уроков.
- Введение в React
- Что такое React. Основные преимущества
- Основы декларативного подхода
- Возможности React, компоненты, состояние, применения
- Экосистема React, основные библиотеки, из чего обычно состоит React-стек
- Создание проекта
- Конфигурация webpack на клиенте
- Конфигурация webpack на сервере
- Подключение к проекту HMR и SSR
- Подключение Typescript
- Подключение CSS modules, Jest, Enzyme
- Typescript
- Основы TypeScript. Типы
- Работа с массивами
- Работа с объектами и интерфейсами
- Типизация функций и типы TS
- Generics
- Классы
- Infer, typeof, keyof, Mapped Types
- Компоненты на примере новостной карточки Reddit
- Компоненты в React
- Состояния в Class Components
- Состояния в Functional Components
- Создание Layout приложения. Часть 1
- Создание Layout приложения. Часть 2
- Создание компонента новостной карточки
- Жизненный цикл компонента
- Hooks и функциональное программирование
- Каррирование и функции высшего порядка
- Hooks в React
- Map и Reduce в React
- Создание компонента dropdown c использованием hooks
- Compose, Pipe и их применение в React
- Компоненты — продвинутые темы. Введение в тестирование компонентов
- Адаптивные и неадаптивные компоненты. Mobile first и desktop first подходы
- Создание Dropdown-меню с использованием state
- Введение в unit-тесты и Jest
- Написание тестов для React компонента. Enzyme vs Snapshots
- Вспомогательные компоненты
- Работа с публичным API на примере Reddit
- Как работать с API
- Регистрируем аккаунт разработчика на Reddit
- OAuth2
- Страница авторизации пользователя
- Как структурировать API-запросы в приложении
- React Context
- Забираем из API данные пользователя
- Отображаем данные пользователя в компоненте через prop
- Используем React Context для работы с данными
- Обновляем данные через контекст
- Портал и форма
- Верстаем карточку поста, используя ReactPortal
- Ref и useRef React hook. Реализуем механизм click outside для скрытия модального окна
- Controlled и uncontrolled компоненты на примере поля комментария
- Сохраняем состояние формы, используя контекст
- Введение в Redux на примере поля для ввода комментария
- Введение в Redux
- Устанавливаем Redux, подключаем его к приложению
- Action + reducer
- Presentation Components/Container Components
- Использование Redux-Thunk на примере загрузки профиля пользователя
- Работа с асинхронными запросами в Redux
- Пишем простой logger middleware
- Подключаем thunk к приложению. Пишем свой первый асинхронный action
- Работа с асинхронным состоянием
- Пишем простой loader
- Формы на примере комментариев и карточки поста
- Экскурс в формы. Проблематика форм React
- Состояние полей. Различные подходы
- Какие можно использовать библиотеки и почему они могут мешать
- Сохраняем состояние формы, валидируем поля и выводим ошибки
- Доступности, нативные элементов и возможности работать с формой через табуляцию
- «Бесконечные» списки на примере ленты постов
- Работа с запросами к API
- Делаем загрузку ленты постов
- Виды бесконечных скроллов и пагинаций
- Делаем подгрузку ленты постов
- Эффективный рендеринг больших списков
- Сайдбар + роутинг
- Создаем сайдбар, используя более продвинутые практики
- Роутинг в SPA и в React
- Подключаем React Router
- Подключаем новостную ленту к роутеру
- Дополнительный функционал роутинга
- SSR + NextJS
- Серверный и статический рендеринг. Изоморфные приложения
- Делаем серверный рендеринг, используя express
- NextJS
- Переносим приложение на Next
- Деплой приложения в Zeit
- Бонусный модуль: Mobx.
Курс для начинающих разработчиков, которые уже освоили JavaScript и хотят расширить знания, чтобы работать над более сложными и интересными задачами. В процессе обучения вас ждёт практика на реальных проектах, максимально применимая в работе, и индивидуальный фидбэк от преподавателей.
Программа курса
- Компоненты
Библиотека React предоставляет нам возможность эффективной разработки современных фронтенд-приложений. В этом разделе мы ознакомимся с компонентным подходом, позволяющим создавать сложные интерфейсы на основе композиции простых блоков, научимся обрабатывать события и работать с внутренним состоянием компонентов, а также приобретём опыт работы с формами. - Продвинутые техники, одностраничные приложения
В этом блоке мы научимся организовывать сложные интерфейсы, используя композицию компонентов, интегрируемся с REST API, глубже изучим работу на основе современных подходов — хуков и Context API, а также научимся организовывать постраничную навигацию с помощью React Router. - Redux — управление состоянием
В этом разделе мы познакомимся с одним из ключевых навыков в разработке сложных приложений — управлением глобальным состоянием приложения. Мы начнём с простых инструментов: библиотеки Redux, лежащей в основе всего, и Redux Thunk для организации простых побочных эффектов, а закончим продвинутыми инструментами: Redux Observable и Redux Saga. - GIT — система контроля версий
в подарок
За 3 занятия вы научитесь работать с системой Git и с сервисом GitHub, сможете публиковать свои домашние работы и уже в процессе обучения сформируете первое портфолио (работодатели часто просят показать примеры вашего кода на GitHub).
- Дипломный проект
В рамках дипломного проекта вы создадите и развернёте в интернете полноценный фронтенд для интернет-магазина: с поиском, корзиной, оформлением заказа и постраничной навигацией.
Вашу квалификацию подтвердят документы установленного образца.
Программа обучения:
Неделя 1 — Введение в React.js
— Знакомимся с командой курса и одногруппниками.
— Изучаем JSX и Virtual DOM в React.
— Рассматриваем компонентный подход и способы передачи данных.
Неделя 2 — Паттерны React.js, тестирование
— Изучаем компоненты, элементы и экземпляры класса компонент.
— Рассматриваем библиотеку Recompose, паттерны high order components и Render Props.
— Разбираемся в преимуществах тестов, изучаем Jest, Enzyme, Snapshots.
Неделя 3 — Redux, роутинг
— Изучаем роутинг: Simple routing, роутинг со Switch, а также вложенный роутинг.
— Знакомимся с библиотекой Redux: основные понятия и концепции Store, Actions, Reducers, React-redux.
— Рассматривается middleware как способ работы с Sideeffect.
Неделя 4 — Redux-saga
— Изучаем библиотеку Redux-saga. Повторяем generator* functions. Учимся запускать их параллельно.
— Разбираем метод Take. Изучаем select, как способ получения данные из Store.
— Рассматриваем способы стилизации React приложения. Изучаем библиотеки ClassNames, StyledComponents, BrowserList, MaterialUI.
Неделя 5 — Формы, CI & DI & Client error handling
— Рассматриваем работу с формами с помощью библиотек Formik, Redux Forms, React Final Form.
— Рассматриваем методы обеспечения качества production кода. Разбираем такие инструменты как: Husky, TravisCI, HerokuNow.
— Изучаем набор полезных библиотек для разработки (Storybook, RamdaJS, Axios).
— Рассматриваем TypeScript.
Неделя 6 — Работа над проектом
— Доделываем приложение и отправляем на проверку.
Выпускной проект
- Во время первой половины курса мы займемся созданием дизайн системы: изучим React.js с помощью написания компонент от простых до сложных, а вторую половину занятий посвятим созданию приложения Loft-такси с помощью этого набора.
По окончании обучения вы получите сертификат.
LoftSchool знают и ценят работодатели, поэтому сертификат станет вашим дополнительным плюсом при трудоустройстве в IT-компанию.
Курс позволит освоить React от азов до создания полноценного SPA(single page application)-приложения с роутингом и продвинутым управлением состоянием.
Создадите 3 полноценных разноплановых проекта, которые можно как добавить себе в портфолио, так и сделать на базе них свои собственные уникальные проекты.
В курсе на практике создадите 3 полноценных разноплановых проекта, которые можно как добавить себе в портфолио, так и сделать на базе них свои собственные уникальные проекты.
- Узнаете все особенности последней версии React 17
- Научитесь работать и с классовыми, и с функциональными компонентами
- Разберётесь, чем отличаются управляемые и неуправляемые компоненты
- Научитесь использовать хуки
- Освоите работу с состоянием и жизненным циклом приложения
- Создадите SPA (single page application) с react-router
Для кого этот курс
- Для тех, кто хочет изучить самый популярный frontend фреймворк React JS и подготовить портфолио
- Для тех, кто пробовал сам изучать React, но по какой-либо причине не справился и хочет закрыть пробелы
- Для тех, кто хочет углубиться в веб-разработку и взять лучшее из современных практик
- Для тех, кто застрял на первых шагах профессии и хочет добрать компетенций к резюме
- Для тех, кто хочет получить актуальные навыки и стать более востребованным на рынке веб-разработки
ПЛАН КУРСА:
Программа обучения включает видео уроки по изучению React с нуля для начинающих. Благодаря практическим заданиям и примерам, Вы сможете закрепить полученные знания по использованию React JS на практике.
- ВВЕДЕНИЕ
- REACT С JSX И БЕЗ
- КЛАССОВЫЕ REACT-КОМПОНЕНТЫ
- РАБОТА С ФОРМАМИ В REACT
- ПРОЕКТ «ФИЛЬМЫ»
- ФУНКЦИОНАЛЬНЫЕ REACT-КОМПОНЕНТЫ
- ХУКИ ПОДРОБНО
- ПРОЕКТ «ВИТРИНА»
- ПРОДВИНУТОЕ УПРАВЛЕНИЕ СОСТОЯНИЕМ ПРИЛОЖЕНИЯ
- РОУТИНГ И SPA-ПРИЛОЖЕНИЕ
- ПОДВЕДЕНИЕ ИТОГОВ
ЗАВЕРШЕНИЕ КУРСА — ПОЛУЧЕНИЕ СЕРТИФИКАТА.
В ходе курса вы:
- изучите работу с реактом,
- научитесь прописывать на его основе программы и создадите одно полноценное приложение с красивым пользовательским дизайном.
План курса:
За курс вами будет изучена библиотека React JS, начиная от её установки и заканчивая реализацией небольшого веб проекта.
Прежде чем приступать к видео курсу вам стоит ознакомиться с языком JavaScript и Node JS, так как именно они являются основными платформами на которых построена библиотека React.
На курсе вы за три месяца разберётесь в этом стеке технологий. Вам предстоит изучать теорию в тренажёре, написать своё приложение и по желанию работать в командах над проектными задачами. Курс подойдёт тем, кто умеет верстать и знает основы JavaScript.
Сертификат — официальный документ о дополнительном образовании. Чтобы его получить, нужно сдать проектную работу.
Программа обучения:
Бесплатное входное тестирование
Около 2 часов
- Вам предстоит решить несколько задач по вёрстке и JavaScript и пройти тест по базовым технологиям. Это позволит понять, подойдёт ли вам курс, и получить рекомендации о том, что повторить перед стартом.
Погружение в React и Redux
4 недели, 80 часов
- В этом модуле вы изучите основы и инструментарий React. Научитесь работать с классовыми и функциональными компонентами и попрактикуетесь в их написании. Узнаете, как с помощью хуков привнести мощь классовых компонентов в функциональные. Создадите простую заготовку React-приложения посредством CRA и научитесь выполнять его отладку с применением плагина React DevTools.
Узнаете, что такое «состояние» в терминологии современных фреймворков и библиотек. Научитесь работать с одной из самых популярных библиотек для хранения состояния — Redux.
В проектной работе:
Вы сверстаете первый экран в приложении, подключите к нему Redux-хранилище и реализуете перетаскивание ингредиентов с помощью React DnD.
Роутинг, безопасность и TypeScript
4 недели, +1 неделя каникул, 80 часов
- Вы узнаете, как настраивать роутинг в SPA-приложении и создавать динамические маршруты. Научитесь работать с основными хуками в React Router. После этого изучите процессы аутентификации и авторизации пользователей — это поможет сделать так, чтобы доступ к определённым действиям и страницам приложения был только у авторизованных пользователей.
Затем погрузитесь в основы TypeScript и научитесь использовать его в React-приложениях.
В проектной работе:
Создадите новые страницы в приложении и настроите роутинг. Добавите регистрацию и авторизацию в приложение и защитите маршруты от неавторизованных пользователей. Перепишите код на TypeScript.
Протокол WebSocket и деплой приложения
4 недели, +1 проект в портфолио, 70 часов
- Вы завершите изучение TypeScript типизацией Redux. После этого реализуете соединение с сервером в режиме реального времени с использованием протокола WebSocket.
Познакомитесь с подходами к тестированию и узнаете больше об автоматизированном тестировании приложения. А также научитесь деплоить готовое приложение.
В проектной работе:
Создадите ленту заказов с использованием WebSocket и перепишите всё хранилище на TypeScript. Добавите к приложению тесты на Cypress и Jest, а после загрузите проект на удалённый сервер.
Карьерный трек (опционально)
От 40 часов
- Параллельно с основной программой мы помогаем с поиском первой работы или сменой текущей: продумываем стратегию и сопровождаем в процессе. Вместе c опытными IT-рекрутерами вы поработаете над резюме и оформите портфолио на GitHub.
За 4 месяца мы проведем вас по всем этапам работы с React: от основ — до рабочего приложения, которое вы самостоятельно создадите и протестируйте
Программа курса:
Модуль 1: Введение в React
Уроки:
- Создаём React приложение
- Пишем лейаут на JSX
- Что такое компоненты в React
- Создаём компоненты классы
- Создаём компоненты функции
- Ивенты и простые формы
- Пишем тесты для компонентов
- Контекст
- React хуки
- useState
- useEffect
- useReducer
- Пишем свой хук
Чему вы научитесь:
- Создавать React приложения
- Описывать лейаут приложения на JSX
- Объявлять компоненты
- Обрабатывать пользовательские события
- Тестировать компоненты
- Передавать данные через контекст по всему приложению
- Тестировать контекст
- Использовать React хуки, и работать со стейтом без классов
Модуль 2: Деплой React приложений
Уроки:
- Как деплоить приложения
- CI, CD и другие понятия связанные с деплоем
- Как настроить деплой с Github Actions
- Отслеживаем ошибки при помощи Sentry
Чему вы научитесь:
- Деплоить приложение на хостинг
- Настраивать автоматический деплой с Github Actions
- Настраивать автоматические тесты при деплое
- Отслеживать ошибки в продакшене с помощью Sentry.
- Получать качественные отчёты об ошибках в Sentry при помощи source maps.
Модуль 3: Навигация
Уроки:
- Основы навигации с React-router-dom
- Динамическая навигация
- Закрытые рауты — авторизация
- Передаём параметры в URL
- Хуки react-router-dom
- Тестируем навигацию
Чему вы научитесь:
- Делать многостраничные приложения
- Делать страницы, которые требуют авторизации
- Обрабатывать параметры в URL
- Работать с динамической навигацией
- Хуки react-router-dom
- Тестировать навигацию
Модуль 4: Формы
Уроки:
- Основы React Hook Form
- Обрабатываем ошибки — валидация полей
- Валидируем формы с Yup
- Нормализуем значения
- Отправляем файлы
- Тестируем формы
Чему вы научитесь:
- Получать данных из формы
- Обрабатывать ошибки
- Валидировать формы
- Нормализировать значения, приводить их к стандартному формату
- Отправлять файлы
- Тестировать формы
Модуль 5: Общение с сервером
Уроки:
- Загружаем данные с сервера
- Отправляем данные на сервер
- Обрабатываем ошибки сервера
- Работаем с данными при помощи ReactQuery
- Тестируем общение с сервером
Чему вы научитесь:
- Запрашивать данные с сервера из компонента
- Отправлять данные
- Отделять код для работы с сервером в отдельный слой.
Модуль 6: Работа со стейтом в Redux
Уроки:
- Что такое Redux
- Добавляем Redux в проект
- Работа с сервером в Redux
- Когда Redux не нужен / не подходит
- Тестирование Redux кода
Чему вы научитесь:
- Использовать Redux для хранения данных
- Подключать Redux к React приложению
- Выполнять запросы на сервер в Redux приложении
- Тестировать код использующий Redux
Модуль 7: Используем Redux-Toolkit
Уроки:
- Что такое Redux-Toolkit
- Создаём store
- Используем createReducer и createAction
- Используем slice
- Используем createAsyncThunk
Чему вы научитесь:
- Подключать Redux-Toolkit к приложению
- Создавать редьюсеры и экшены методами Redux-Toolkit
- Выполнять сетевые запросы при помощи Redux-Toolkit
Модуль 8: Стили
Уроки:
- Стили в React — обзор
- Инлайн стили
- Используем CSS
- CSS модули
- Styled-Components
- Storybook
Чему вы научитесь:
- Использовать инлайн стили
- Работать с CSS и SCSS
- Использовать CSS модули
- Стилизовать приложение при помощи styled-components
- Использовать Storybook для разработки, тестирования и демонстрации компонентов
Модуль 9: Авторизация
Уроки:
- Авторизация и аутентификация
- Авторизация по логину и паролю
- Аутентификация по одноразовому паролю OTP
Чему вы научитесь:
- Отличать авторизацию от аутентификации
- Подключать авторизацию по паролю
- Настраивать авторизацию с помощью сторонних сервисов
- Реализовывать авторизацию по одноразовым паролям
Модуль 10: Безопасность
Уроки:
- Начало работы
- Инъекции
- Уязвимости аутентификации
- XSS уязвимости
- DOR уязвимости
- Ошибки в настройках безопасности приложения
- Утечка приватной информации
- Уязвимости связанные с уровнем доступа
- CSRF — Cross Site Request Forgery
- Уязвимости в сторонних библиотеках
- Редиректы
Чему вы научитесь:
- Узнаете основные типы уязвимостей, как на клиенте, так и на сервере
- Узнаете, что такое XSS
- Как могут проводиться атаки на ваше приложение
- Как защититься от взлома
Модуль 11: Серверный рендеринг
Уроки:
- Базовый пример серверного рендера
- Серверный рендеринг с Next.js
- Статические сайты на Next.js
Чему вы научитесь:
- Понимать зачем нужен серверный рендеринг
- Отличать SSR от SSG
- Создавать React приложения, которые рендерятся на сервере
- Генерировать статические страницы при помощи NextJS
Бонусный модуль: Карьера разработчика
Уроки:
- Карьерная цель, план развития на 5 лет
- Резюме, LinkedIn, cover letter
- Собеседования
- Поиск работы
- Корпоративная и командная игра, софт-скиллы
Чему вы научитесь:
- Планировать развитие карьеры
- Ставить карьерные цели
- Грамотно составлять резюме
- Писать CV (Cover Letter)
- Эффективно взаимодействовать с командой
- Повышать свою ценность в компании.
На курсе вы разработаете 3 веб-приложения, освоите React и познакомитесь с его экосистемой – напишете первые тесты для ваших веб-приложений, а также создадите UI-библиотеку. Помимо технических навыков, получите soft-скиллы – опыт работы в команде и рекомендации по успешному прохождению собеседования.
Программа курса
- Введение
Разберём, как проходит процесс обучения, кому подойдет этот курс и какие инструменты будут изучаться. - Сложные концепции в JS
Углубимся в изучение JS. Рассмотрим продвинутые концепции, которые будут встречаться в дальнейшем и без понимания которых будет сложно перейти к изучению React.
- Деструктуризация
- Обработка ошибок
- Асинхронность
- Реактивность
- Регулярные выражения
- Новые возможности
- ФП в JS
- ООП в JS
- Прототип Pomadoro — приложения для личной продуктивности.
- Подготовка рабочего места
Подготовим рабочее место для того, чтобы писать грамотный и красивый код стало проще и удобнее. Научимся пользоваться консолью.
- Установка VSCode
- Установка NPM
- Работа с консолью
- Eslint
- Prettier
- Husky
- Добавляем возможность настраивать Pomadoro под себя. Автоматизируем таймер. Исправляем баги.
- React
Разберем базовые функции и основные концепции React. Поймем, что отличает функциональный подход от компонентного. Создадим первую форму на React.
- Cтарый React
- Новый React
- JSX
- React + CSS
- Основные принципы
- Модульность
- Создаем прототип экрана регистрации/логина.
- Redux
Узнаем про самую популярную библиотеку для React, разберем её концепции. Проанализируем плюсы и минусы данного подхода. Рассмотрим основные функции и совместим React и Redux.
- Плюсы
- Минусы
- Аналоги
- Основные сущности — store, type, action и reducer.
- Middleware
- Мутации
- Делаем To-Do лист. Выводим список из Redux.
- Продвинутая работа с React, React Thunk
Разберем более продвинутые концепции в React. Узнаем, как искать и исправлять баги в React. Напишем асинхронный код. Научимся создавать правильную форму входа и рассмотрим виды запросов.
- React изнутри
- Продвинутые хуки
- Кастомные хуки
- Лучшие практики
- Отладка кода
- Redux Thunk
- Работа с бэкендом
- Дорабатываем форму входа. Создаем список всех зарегистрированных пользователей. Реализуем фильтрацию.
- Маршрутизация. React Router
Разберем более продвинутые концепции в React. Узнаем, как искать и исправлять баги в React. Напишем асинхронный код. Научимся создавать правильную форму входа и рассмотрим виды запросов.
- React изнутри
- Продвинутые хуки
- Кастомные хуки
- Лучшие практики
- Отладка кода
- Redux Thunk
- Работа с бэкендом
- Объединяем все страницы в одно приложение. Создаем личный кабинет пользователя.
- Вспомнить всё!
Закрепим изученные технологии. Углубимся в работу с бэкендом и реализуем новую, более сложную, функциональность приложения.
- Рефакторинг приложения. Модальные окна. Продвинутая работа с бэкендом.
- Jest
Научимся тестировать код автоматизировано. Разберемся, как тестировать функциональность приложения и как это отличается от тестирования компонентов. Попробуем новый процесс разработки – TDD.
- Зачем нужны тесты?
- TDD
- Виды тестирования
- Пирамида тестирования
- Jest
- Синхронное тестирование
- Асинхронное тестирование
- Snapshot тестирование
- React Testing Library
- Покрываем код тестами. Пробуем TDD.
- Пишем стили правильно. Styled-Components. Storybook.
Узнаем, что такое css-in-js. Реализуем темную и светлую тему и переключатель между ними. Разберемся, как совместно с дизайнером разрабатывать хорошие интерфейсы. Создадим библиотеку компонентов в своем приложении.
- Styled-Components
- API
- Создание темы
- Storybook
- API
- Аддоны
- Мигрируем приложение с CSS на styled-components. Создаем библиотеку компонентов в Storybook. Создаем темную тему.
- Архитектура React приложений
Подготовка к созданию выпускного проекта. Разберём, как проектировать приложения, разобьемся на команды и выберем темы.
- Зачем нужна архитектура?
- Какие виды существуют?
- Плохая архитектура
- Хорошая архитектура
- Feture Slice
- Atomic
- Flux
- Dumb/Smart
- Собираем команду для итогового приложения. Распределяем задачи. Нулевой спринт.
- Мастер-класс
- Зачем писать код, если есть no-code
Узнаем про инструменты, которые могут ускорить и упростить создание приложений. Разберем на реальных кейсах плюсы и минусы такого подхода. Научимся применять no-code решения на практике.
- Что такое no-code и low-code
- Когда стоит использовать
- Когда не стоит использовать
- Удачные примеры
- Netlify
- Первый и второй спринт.
- Как найти работу
Рассмотрим виды компаний, разберем плюсы и минусы фриланса, поговорим о том, как составлять резюме и что писать в сопроводительном письме, проанализируем вопросы, которые задают на собеседовании, и научимся отвечать на них грамотно и уверено.
- Третий спринт. Завершение итогового приложения. Подготовка презентации.
- Подводим итоги
- Выбираем лучшее приложение
- Составляем роадмап на будущее
- Какие проекты можно ещё написать?
- Точки роста
Проекты курса:
- Pomadoro
- LMS
- Хакатон
Ваш сертификат, подтверждающий обучение в Skill-Branch, профессиональные знания и навыки.
Приложите его к CV или резюме, чтобы обойти конкурентов и получить престижную работу!
Разбираемые темы:
- Обзор современных возможностей JS (4 часа).
- Классы и наследование.
- Деструктуризация массивов и объектов.
- Спред-оператор.
- Иммутабельность.
- Чистые функции.
- Модель MVC.
- Асинхронность в JS: промисы, async/await.
- Работа с сервером.
- Использование this в коллбэках.
- Модули JS, импорт и экспорт.
- NPM и package.json.
- Webpack и сборка модулей.
- Загрузчики Webpack.
- Основы React (1 час, включая практику).
- JSX (2 часа, включая практику).
- State и Props (2 часа, включая практику).
- Расширенные вопросы. Жизненный цикл компонентов (2 часа, включая практику).
- Роутинг в React (2 часа, включая практику).
- Immutable.js (1 час).
- Архитектура FLUX (2 часа, включая практику).
- Основы REDUX (2 часа, включая практику).
- Продолжаем изучать REDUX (3 часа, включая практику).
- REDUX Dev Tools (0,5 часа + демонстрация).
- Часто задаваемые вопросы по REDUX (0,5 часа).
- Middleware в REDUX (0,5 часа).
- Асинхронные Actions (0,5 часа).
- Redux THUNK (2 часа, включая практику).
- Хуки в React(1 час).
Цели
- Научиться использовать React.js;
- Разобраться с архитектурным решением – FLUX, а также его имплементацией – Redux;
- Научиться применять React.js совместно с Redux.
Целевая аудитория
- Разработчики клиентской части приложений.
- Предварительная подготовка
- Базовые навыки работы с JavaScript.
После окончания курса выдаётся сертификат на бланке Luxoft Training.
После курса ты:
- Освоишь один из самых востребованных работодателями навык
- Сможешь уверенно работать с React и создавать сложные SPA-приложения
- Изучишь лучшие практики Frontend-разработки
- Перестанешь бояться вакансий, где требуется React
- Повысишь свою стоимость как разработчик
- Сможешь работать в лучших компаниях
Программа:
14 видео-уроков с заданиями + вебинары с ответами на вопросы
- Знакомство с React
- Ёмкий обзор React и его экосистемы. Познакомимся с основными понятиями, фундаментальными принципами, конфигурацией окружения, понятием компонента и его видами, JSX.
- Способы создания React-приложения
- Научимся создавать приложения разными способами и инструментами (c нуля, используя Webpack и Babel.JS / Create React App / Next.JS / Gatsby), с Server-Side Rendering’ом и без него.
- Стили в React-приложении
- Научимся задавать стили для React-приложения и управлять ими с помощью современных инструментов (PostCSS, styled-components, styled-jsx).
- Свойства и состояние компонента
- Изучим понятие свойств (properties) в компонентах. Научимся их передавать, осуществлять проверку типов. Разберемся с понятием и особенностями использования состояния компонента (state).
- Stateful- и Stateless- компоненты
- Введем понятие Stateless-компонента, узнаем преимущества использования такого подхода.
- Жизненный цикл компонента
- Изучим элементы жизненного цикла компонента, научимся использовать их на практике.
- Встроенные и пользовательские хуки (React Hooks)
- Соберем практики использования нового инструмента в библиотеке React для улучшения читаемости и повторного использования в коде.
- Тестирование с помощью Jest и React Testing Library
- В процессе разработки приложения мы будем писать тесты для наших компонентов с использованием Jest и React Testing Library.
- Взаимодействие с API
- Разработаем приложение, которое будет взаимодействовать со внешними API, получать и отправлять данные через API и отображать их на фронтенде.
- Роутинг в приложении (React Router), порталы (React Portals)
- Научимся матчить url и рендерить нужную страницу без перезагрузки, так, как это должно работать в Single Page Application. Разберем сложные кейсы, такие как обработка входящих параметров, редиректы, страницы ошибок, авторизованный доступ и модальные окна с использованием порталов
- Обработка событий
- Введем понятие синтетических событий в библиотеке React. Научимся их обрабатывать, реализуем drag’n’drop и научимся работать с буфером обмена.
- Контекст и аутентификация
- Подробно разберём новый механизм контекста в библиотеке React. Научимся эффективно применять его в приложении. Научимся работать с аутентификацией, localStorage и cookies.
- Способы создания форм
- Узнаем нюансы создания простых и сложных форм для приложения при помощи разных подходов и инструментов (без сторонних инструментов, React Hook Form, Formik)
- Production-сборка и Deployment
- Практикум по организации файловой структуры проекта, настройке окружения и подготовке сборки и деплоя приложения с последующим сопровождением.
Факультатив. Redux
- Декларативные подходы и middleware. Прикладное применение Redux с использованием в проекте.
По окончанию курса ты получишь именной сертификат. Сертификат выдается только тем участникам, кто успешно выполнил все задания курса.
На этом курсе вы научитесь делать настоящие проекты, такие же по уровню сложности, как в индустрии. И будете делать их правильно, чтобы после обучения выдавать результат высокого уровня, за который компании готовы платить.
Программа курса
- Первая неделя
Участие в живых лекциях, работа над проектом с личным наставником.
- Вторая неделя
Улучшим знания о React и компонентах. Разберём state, события и методы жизненного цикла компонента. Познакомимся с React Hooks и узнаем, как с их помощью заменить class-компоненты.
- Третья неделя
Знакомимся с Flux-архитектурой: действия (Actions), диспетчеры (Dispatcher), представления (Views) и хранилища (Stores). Подключаем к проекту Redux и обновляем кодовую базу.
- Четвёртая неделя
Поговорим о производительности React-приложений: какие есть особенности, на что следует обращать внимание при проектировании компонентов в первую очередь.
- Пятая неделя
Познакомимся с инструментами и методиками тестирования React-приложений. Настроим инфраструктуру для тестирования, напишем тесты для созданных компонентов.
- Шестая неделя
Подготовка проекта к итоговой защите и оценка его проверяющим наставником по критериям качества. Завершение работы над проектом и подготовка к итоговой защите.
- Седьмая неделя
Первая оценка проекта проверяющим наставником по критериям качества.
- Восьмая неделя
Улучшение проекта по замечаниям проверяющего наставника и подача на вторую оценку.
- Девятая неделя
Внесение финальных правок и получение итоговой оценки.
Вы научитесь:
- Работать с компонентами, хуками, а также особенностями разработки бизнес-логики с помощью кастомных хуков
- Использовать TypesScript по назначению, чтобы он помогал, а не наоборот
- Формировать правильную архитектуру приложения
- Использовать лучшие подходы стилизации: CSS-модули и Styled Components
- Создавать эффективные формы, а также их валидировать посредством применения оптимального подхода к валидации
- Работать с Redux c использованием новых хуков useDispatch и useSelector, лучших практик и минимумом написанного кода
- Работать с MobX, а также понимать его отличия от Redux
- Тестировать React-компоненты, хуки, а так же Redux и MobX
- Работать в команде по Agile-методологии
Программа курса:
Неделя 1
- Урок 1: Введение в React
Друг, с этого урока мы начинаем погружение в удивительный мир веб-разработки применяя лучшие практики наших экспертов.
Практика
- Научимся настраивать проект для разработки.
- Конвертируем HTML & CSS разметку в полноценный React-компонент.
- Сделаем первые полноценные компоненты с помощью React.
- Урок 2: Работа с данными в React
Разработка становиться особо интересной с добавлением интерактива! В этом уроке мы научимся оживлять приложение динамикой. 🏎
Практика
- Наполним наши компоненты данными с помощью пропс и потомков.
- Научимся правильно переиспользовать компоненты.
- Оживим наши компоненты с помощью состояния.
Неделя 2
- Урок 3: Работа с сетью в React
Фактически все приложения в интеренете в той или иной форме общаются с сервером. Мы на практике разберёмся как отправлять запросы на сервер. А также оптимизируем наше приложение на максимальную производительность.
Практика
- Научимся оптимизировать приложение для максимальной производительности.
- Наполним приложение реальными данными с сервера.
- Урок 4: Роутинг в React
Не секрет, что полноценное приложение — это естественно, не одна страница, а целый комплекс! В этом уроке мы научимся связывать React-приложение в настоящий Single-Page Application (SPA) с помощью react-router.
Практика
- Научимся создавать страницы в React-приложении.
- Изучим особенности работы с приватными и публичными страницами.
Неделя 3
- Урок 5: Грамотное составление форм в React приложении
Научившись азам создания базы для SPA, мы перейдём к изучению эффективых приёмов составления форм. Научимся не только создавать разные по сложности формы, но и управлять их состоянием, а также валидировать и оформлять их осмысленную композицию.
Практика
- Научимся создавать простые формы.
- Изучим особенности при работе со сложными формами.
- Научимся валидировать формы.
- Урок 6: Знакомство с MobX
MobX — это альтернативная библиотека для стейт-менеджмента по отношению к Redux. Библиотека MobX придерживается немного иного подхода в построении хранилищ и мутациям данных. С изучением этой библиотеки мы научимся выносить состояние компонента во внешние хранилища данных.
Практика
- Подключим MobX к проекту.
- Применим лучшие практики MobX.
Неделя 4
- Персональный проект «Виджет погоды» на JavaScript, MobX, CSS-modules
- Персональный проект «Виджет погоды» на JavaScript, MobX, CSS-modules
Неделя 5
- Урок 7: Знакомство с Redux
И вот, настало время научиться работать с централизованным состоянием в React-приложении. В этом уроке мы изучим ключевые аспекты связи React и Redux.
Практика
- Подключим Redux к React.
- Научимся правильно работать с Redux в React-приложении.
- Урок 8: Асинхронный Redux (бонус)
Научимся делать запросы к API с помощью перехватчика Redux Thunk и Redux Saga. Изучим особенности при работе с асинхронным кодом в React-приложении.
Практика
- Научимся загружать данные с удалённого API.
- Научимся отправлять данные на удалённый API.
Неделя 6
- Урок 9: Переход на TypeScript
Экосистема современного фронтенд давно перешла к использованию инструментов, делающих жизнь разработчиков (и не только) лучше. Один из таких инструментов — TypeScript. Вместе мы правильно настроим тайпскриптовый микроклимат проекта, чтобы TypeScript приносил пользу и помогал писать код.
Практика
- Подключим TypeScript к проекту.
- Применим лучшие практики TypeScript.
- Урок 10: Тестирование программного кода
Повысим стабильность React-приложения с помощью тестов. Узнаем какие типы тестов бывают, а также разберём какие грани React-приложения стоит покрывать тестами в первую очередь. Научимся тестировать React-компоненты.
Практика
- Покроем тестами React-составляющую приложения.
- Покроем тестами Redux-составляющую приложения.
- Покроем тестами MobX-составляющую приложения.
- Урок 11: Styled Components (видеоурок)
Существует два больших лагеря, скандирующих за стилизацию приложения через классический CSS и за стилизацию в JavaScript (CSS in JS). В данном уроке мы подробно разберём лучшее на данный момент решения для стилизации React-приложения посредством JavaScript — styled-components.
Практика
- Научимся секретным методологиям применения styled-components
- Освоим лучшие практики при использовании данной библиотеки
Неделя 7
- Персональный проект «Менеджер задач» на TypeScript, Redux, styled-components
- Персональный проект «Менеджер задач» на TypeScript, Redux, styled-components
Неделя 8
- Групповой проект по Agile-методологии
- Групповой проект по Agile-методологии
Неделя 9
- Подведение итогов основного обучения
- Итоги работы над персональными проектами.
- Персональный проект «Фитнес трекер» — стек на выбор.
Курс состоит из 4-х блоков:
- Знакомство с React, и его экосистемой.
- Построение приложений с React: Redux.js.
- React для SPA: react-router и продвинутые API Реакта.
- Куда развиваться дальше.
Программа курса:
Блок 1 — Знакомство с React и его экосистемой.
В этом блоке мы начнем с того, на чем остановились в скринкасте по Реакт. Научимся писать простые компоненты и узнаем, в чем принципиальное отличие React.js от других популярных фреймворков. Создадим первые компоненты, используя декларативный подход, познакомимся с экосистемой, научимся использовать сторонние компоненты и работать с формами.
- Разбираем как работает create-react-app.
- Глубже знакомимся с Реактом, Virtual DOM, JSX.
- Разбираем React Hooks, их отличия от стейта и lifecycle методов.
- Разберем примеры тестирования компонент с помощью Jest и Enzyme.
- Подключаем стили с css modules.
- Учимся переиспользовать код с помощью наследования, декораторов и кастомных хуков.
- Связь с DOM: keys & refs.
- Подключаем сторонние компоненты.
Блок 2 — Построение приложений с React: Redux.js
Когда приложения становятся сложнее и в них появляется интерактивность, приходиться задумываться про организацию бизнес-логики, настраивать потоки данных и взаимодействие с сервером. В процессе построения простого новостного приложения мы детально разберем самую популярную библиотеку для одностороннего потока данных, узнаем ее особенности и научимся использовать дев-тулзы.
- Особенности Redux.js: функциональный подход, Redux dev tools.
- Store как иммутабельный объект: Redux + Immutable.js.
- Настраиваем синхронный поток с Redux, переиспользуем созданные ранее компоненты.
- React-redux для связи компонентов с логикой.
- Мемоизированные селекторы reselect.
- Side-effects в Redux: создание и использование Middlewares.
- Получение данных от сервера.
- Асинхронные экшены с redux-thunk
Блок 3 — React для SPA: react-router и продвинутые API Реакта
Разработка single-page applications – одно из основных направлений фронтэнда. Мы разберем, как строить их, используя React. Научимся использовать react-router и продвинутые элементы API React.JS.
- Зачем нужен роутинг и как он устроен, проектируем структуру приложения.
- Разбираем react-router v5.
- Настраиваем вложенные роуты.
- Выбираем и настаиваем history для нашего приложения.
- Объединяем react-router и
- Учимся обрабатывать серверные ошибки и декларативно управлять роутером.
- Используем context – еще один механизм передачи данных.
- Обзор Advanced API react-router.
- Используем props.children для композиции компонентов.
- Анимации в React, CSSTransitionGroup.
Блок 4 — Куда развиваться дальше
На этот момент вы уже знаете все, что необходимо, для разработки React приложений. Но на этом рано останавливаться, вокруг Реакта выросла огромная экосистема. Мы обзорно пройдемся по основным возможностям для развития, разным платформам, библиотекам и вспомогательным инструментам. + Будет возможность разобрать интересующие именно вас вопросы.
- Работа с формами: redux-form, final-form, formik.
- Что ждать от React 17.
- React Native и React VR.
- GraphQL + Relay/Apollo.
- MobX vs Redux.
- Разные подходы к сайд-эффектам: redux-thunk, redux-loop, redux-saga, redux-observable.
Курсовой проект
- Сервис выбора ресторана и заказа еды.
На курсе ты научишься:
- Проектировать и строить полноценное приложение или продвинутый сайт на фреймворке React.js
- Использовать последние новинки современной вёрстки JSX и «Виртуальный DOM» в своей работе.
Полный план обучения на курсе React:
- Введение в экосистему фреймворка React
- Императивное и декларативное программирование
- Различные паттерны, применяемые с фреймворками
- Плюсы использования фреймворка
- Настройка первого React-компонента с использованием NPM, Babel, Webpack
- Работа с «props»/»state» компонента
- JSX
- React Router
- Работа с событиями
- Жизненный цикл компонента + AJAX, работа с модулем axios
- Reusable Components
- Redux
- Динамический рендеринг
- Работа с формами
- Использование Promises
- Деплой приложения.
Вы научитесь:
- cоздавать компоненты на основе ReactJS;
- настраивать жизненный цикл компонентов;
- отрисовывать форму по условию;
- обрабатывать события и управлять всплытием состояний.
Программа курса:
Модуль 1. Введение в React и JSX (4 ак. ч.)
- Что такое React?
- Какие задачи решает React?
- Установка библиотеки ES6 и JSX
- Встраиваемые выражения
- Определение атрибутов в JSX
- Указание дочерних элементов
- React-элементы
- Отрисовка элементов
- Обновление элементов
Модуль 2. React-компоненты, состояния и жизненный цикл (4 ак. ч.)
- Функциональные и классовые компоненты
- Отрисовка компонентов React
- Композиция элементов
- Извлечение компонентов
- Понятие состояния
- Преобразование функции в класс
- Локальное состояние класса
- Методы жизненного цикла
- Рекомендации по работе с состояниями
- Нисходящие потоки данных
Модуль 3. Условная отрисовка. Формы (4 ак. ч.)
- Отрисовка с условием
- Предотвращение отрисовки компонента
- Отрисовка нескольких компонентов
- Основной компонент списка
- Ключи
- Извлечение компонентов с ключами
- Размещение map() в JSX
- Контролируемые компоненты
- Теги
- Альтернатива контролируемым компонентам
Модуль 4. Всплытие состояний (4 ак. ч.)
- Всплытие состояний.
Основная часть курса:
108 уроков общей продолжительностью 16 часов
Основная часть курса состоит из тринадцати объемных блоков:
- Блок 1. Теория. Что такое React (5 уроков, 1 час)
- Блок 2. Теория. JSX-синтаксис (6 уроков, 1 час)
- Блок 3. Теория. Основы React (8 уроков, 1 час)
- Блок 4. Теория. Стилизация компонентов (6 уроков, 1 час)
- Блок 5. Теория. Компоненты React (14 уроков, 2 часа)
- Блок 6. Практика. Компоненты (17 уроков, 2 часа)
- Блок 7. Теория. React Router (10 уроков, 1 час)
- Блок 8. Практика. Роутинг (5 уроков, 0,5 часа)
- Блок 9. Практика. Формы (10 уроков, 2 часа)
- Блок 10. Практика. Работа с сервером (6 уроков, 1 час)
- Блок 11. Теория. Redux (11 уроков, 1,5 часа)
- Блок 12. Практика. Redux (9 уроков, 2 часа)
- Блок 13. Практика. React Hooks (14 уроков, 1,5 часа)
Бонусная часть курса:
48 уроков общей продолжительностью более 23 часов
Бонусная часть курса состоит из 5 новых видеокурсов, 2 из которых являются нашими полноценными коммерческими курсами:
- Бонус 1. Тестирование React (3 урока, 15 минут)
- Бонус Higher Order Components (4 урока, 24 минуты)
- Бонус 3. Премиум курс по JavaScript (24 урока, 19,5 часов)
- Бонус 4. Премиум курс по EcmaScript 6 (17 уроков, более 3 часов)
- Бонус 5. Анимации в React (5 уроков, 33 минуты)
Итоговый результат:
В качестве наглядного примера SPA-приложения мы выбрали приложение для создания и прохождения тестов. Именно оно и разрабатывается в курсе
Приложение состоит из двух частей: общей и администраторской.
- В администраторской части можно создавать тесты, для каждого из которых можно будет создавать вопросы и различные варианты ответов, а также указывать правильный вариант ответа.
- В общей части приложения отображаются созданные тесты, в которых конечный пользователь сможет выбрать и пройти любой выбранный тест, ответив на вопросы.
Цель курса:
Изучить философию и дух компонентного подхода современных javascript-фреймворков, научиться использовать React для решения практических задач.
Для новичков React сложнее, чем Vue.js. Но вакансий и заказов на фрилансе на нём больше.
Программа курса
- Простая сборка с webpack
- Основы компонентного подхода
- Понимание JSX
- Функциональные компоненты vs классы
- Классический React vs функции + хуки
- Изменение состояния и иммутабельность
- JSX и ветвления при рендеринге
- Рендеринг элементов в цикле
- Нюансы атрибута key
- Понимание основных хуков
- useState, useEffect, useRef
- Создание своих хуков
- Взаимодействие между компонентами
- Однонаправленный поток данных
- Обработка событий
- Модульный CSS vs CSS in JS
- Работа с формами
- Children — передача контента в компонент
- Проблемы большой иерархии компонентов
- Идеи хука useContext
- Идеи единого склада данных
- Состояние и хук useReducer
- Управление состоянием приложения
- Централизованный склад данных
- Понимание flux-архитектуры
- Redux, который бесит новичков
- Основы работы с Mobx
- Организация работы с Mobx
- Модули и rootStore
- Основы React Router
- Api History
- Создание небольшого SPA
- Общение с серверным API
- Fetch и промисы
- Обработка ошибок
- Подключение полифилов
- Построение архитектуры приложения
- Доработка SPA
- Применение изученных тем
- Сборка в production
- Перенос SPA на сервер
- План дальнейшего развития.
ОСНОВНАЯ ЧАСТЬ КУРСА:
- Блок 1. Теория. Что такое React (5 уроков, 1 час)
- Блок 2. Теория. JSX-синтаксис (6 уроков, 1 час)
- Блок 3. Теория. Основы React (8 уроков, 1 час)
- Блок 4. Теория. Стилизация компонентов (6 уроков, 1 час)
- Блок 5. Теория. Компоненты React (14 уроков, 2 часа)
- Блок 6. Практика. Компоненты (17 уроков, 2 часа)
- Блок 7. Теория. React Router (10 уроков, 1 час)
- Блок 8. Практика. Роутинг (5 уроков, 0,5 часа)
- Блок 9. Практика. Формы (10 уроков, 2 часа)
- Блок 10. Практика. Работа с сервером (6 уроков, 1 час)
- Блок 11. Теория. Redux (11 уроков, 1,5 часа)
- Блок 12. Практика. Redux (9 уроков, 2 часа)
- Блок 13. Практика. React Hooks (14 уроков, 1,5 часа)
После прохождения курса вы сможете:
- Разрабатывать реальные приложения
- Разрабатывать мобильные приложения
- Участвовать в стартапах
- Выполнять весь комплекс Frontend-разработки.
Чему вы научитесь:
- Создавать полноценные приложения на React
- Грамотно организовывать состояние приложения
- Взаимодействовать с бекендом по API
- Интегрировать React со сторонними библиотеками.
Уроки курса:
Продолжительность 24 часа
- Введение
Познакомиться с курсом и подготовить окружение. - Компоненты
Познакомиться с базовой единицей в react — компонентом. Научиться его создавать и отрисовывать в браузере. - JSX
Научиться эффективно использовать jsx. - Props
Познакомиться с механизмом передачи данных в компоненты. - Работа с коллекциями
Научиться обрабатывать коллекции данных внутри компонентов. - Различия jsx и html
Узнать об особенностях jsx, которые работают не так как в html. - Обработка имён классов
Научиться правильно работать с классами компонентов, которые могут изменяться динамически. - Children
Научиться создавать компоненты боксы, способные работать с вложенными компонентами. - Состояние
Познакомиться с созданием stateful компонентов. Научиться добавлять интерактивности. - События
Познакомиться с особенностями системы событий React. - Автоматное программирование
Вспомнить что все вокруг автоматы. Научиться правильно работать с автоматами в React. - Формы
Изучить принципы взаимодействия с формами. - Неизменяемость
Научиться работать с составными структурами в неизменяемом стиле. Познакомиться с библиотекой `immutability-helper`. - Вложенные компоненты
Разобраться с хранением состояния и управлением событиями во вложенных компонентах. - Функциональные компоненты
Рассмотреть создание компонентов на основе функций и использования пространств имён. - Virtual Dom
Познакомиться с устройством React. - Тестирование
Узнать о проблемах, которые поджидают разработчика при работе с исходным кодом. - Асинхронная обработка
Узнать об особенностях работы с объектом событием в асинхронном коде. Попрактиковаться в создании асинхронных обработчиков. - Жизненный цикл компонента
Познакомиться с жизненным циклом компонента в процессе работы. - Производительность
Научиться выжимать из React максимальную производительность. - Refs
Научиться взаимодействовать с реальным DOM для интеграции сторонних компонентов. - Дополнительные материалы
Помогают глубже и всесторонне рассмотреть тему курса в открытых статьях и видео подобранных командой Хекслета.
Чему вы научитесь с помощью данного видео курса:
- Работать с платформой React и создавать несложные веб-приложения
- Работать с компонентами и окружением React
- Использовать маршрутизацию и ES2015
- Разбираться в архитектуре Flux, работать с API
- Создавать полноценное SPA (одностраничное приложение)
- Совершать хостинг разработанного веб-приложения.
Основные темы:
- План курса
- Что такое React?
- DOM-дерево
- Как скачать библиотеку React
- Как подключить библиотеку React
- JSX
- Как поместить компонент в DOM-дерево
- Параметры компонетов
- Компонеты в React
- Написание списка контактов на React
- События в React
- Подведение итогов.
Пройдя данный курс, вы сделаете первый шаг к серьезному обучению и сможете чётко определиться с направлением ваших интересов.
Уроки:
- Введение
- Настройка окружения
- Компоненты и элементы
- Свойства компонентов
- Условный рендеринг
- Состояние компонентов
- Жизненные циклы компонентов
- Списки и ключи
- Формы
- Контекст
- Компоненты высшего порядка
- Redux.
В рамках курса по изучению библиотеки React JS, мы создадим приложение для заказа бургеров в сети ресторанов Hot Burgers! С помощью приложения можно будет в реальном времени управлять стоимостью и ассортиментом меню.
Приложение будет включать компоненты меню, форму заказа и панель администратора. Наши данные будут храниться в базе данных Google Firebase и обновляться в режиме реального времени! Система авторизации позволит регулировать доступ к системе управления меню.
Курс состоит из 29 видео-уроков:
- Настраиваем Инструменты
- Компоненты React
- Создаем первый компонент Landing
- JSX в React
- Добавляем CSS в React
- Объект State, обработчики событий и значение this
- Пишем логику обновления объекта State
- Головной компонент App и структура приложения
- Объект Props в React
- Функциональные компоненты React
- Настраиваем React Router
- Push State в компоненте Landing
- Объект State в компоненте App
- Загружаем бургеры в меню
- Отображаем бургеры из объекта State
- Объект State в компоненте Order
- Отображаем компонент Order
- Пишем компонент Shipment
- Интеграция с Google Firebase
- Cохраняем данные о заказе в Local Storage
- Редактирование свойств бургера
- Удаление бургера из меню
- Создание анимации
- Прописываем Prop Types
- React Хук useState
- Авторизация с Google Firebase
- Сборка готового приложения
- Размещение на хостинге Now
- Размещение на хостинге Netlify.
Чему Вы научитесь:
- Создавать приложение на React.JS с нуля
- Cоздавать компоненты React, используя JSX синтаксис
- Использовать модули Javascript
- Использовать новые фичи Javascript ES6 при написании кода
- Создавать и управлять сосотоянием компонентов
- Передавать данные между компонентами
- Использовать объект LocalStorage в браузерах
- Создавать маршрутизацию с помощью React Router 4
- Обрабатывать данные из форм
- Использовать хук useState
- Использовать возможности базы данных Google Firebase
- Создавать систему авторизации
- Развертывать приложение на хостинге (Netlify и Now).
