JavaScript-фреймворк React. js от Skillbox
Программа курса
Ознакомьтесь с программой курса «JavaScript-фреймворк React. js» от Skillbox
-
Введение в 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
ReactRedux
Преподаватели на курсе
Frontend-разработчик в ТАСС
Ведущий разработчик ТАСС
Стаж 14 лет, ведущий frontend-разработчик в ООО «АЙТУТИМ»
Удобная платформа. Skillbox разработали собственную удобную платформу для студентов.
Всё обучение онлайн. Все курсы Skillbox заранее записаны. Изучать можно в любое время.
Доступ навсегда. После окончания обучения вы всегда сможете вернуться к лекциям.
Преподаватели-эксперты. Лекции на курсах ведут крутые специалисты из больших компаний.
Настойчивые менеджеры. Cтуденты отмечают агрессивную рекламу перед покупкой курсов.
Навязывание рассрочки. Первые 6 месяцев бесплатно — на деле это кредит с отсрочкой.
Взгляните, что студенты и выпускники говорят про Skillbox
Я выбрала курс «Анимация интерфейсов», потому что мне было интересно подробно изучить эту тему. Понравился подход преподавателей, то, как они объясняют материал. После обучения у меня увеличилась скорость работы, да и сам подход сменился. В будущем планирую найти работу получше, ...
Начала проходить курс «Рекламная графика 1.0» по совету, и не жалею. Понравилось качество материалов, хотя порой бывало сложно. Мои работы объективно улучшились, это поможет мне в будущем.