Курс React с нуля для начинающих + 3 проекта в портфолио!

5Premium-PLUS

Курс позволит освоить React от азов до создания полноценного SPA(single page application)-приложения с роутингом и продвинутым управлением состоянием.
Создадите 3 полноценных разноплановых проекта, которые можно как добавить себе в портфолио, так и сделать на базе них свои собственные уникальные проекты.

Начать обучение Регистрация

О курсе - Чему Вы научитесь?

Frontend-разработка - одна из самых популярных и востребованных профессий современности. Интересная и увлекательная. А React - самый популярный её инструмент, разработанный компанией Facebook. На React сделаны Instagram, Facebook, Twitter, AirBnb, PayPal, Uber, Netflix, Vkontakte, Vimeo, Trello, сервисы Яндекса и много-много других крупных продуктов.

Курс React с нуля для начинающих позволит не только освоить азы данного инструмента, но и получить современные продвинутые техники его использования.

Чему вы научитесь

Начнём с классического подхода в создании приложений на React. Рассмотрим базовые концепции, как они трансформировались в современные. Научитесь работать и с теми, и с другими.

В курсе на практике создадите 3 полноценных разноплановых проекта, которые можно как добавить себе в портфолио, так и сделать на базе них свои собственные уникальные проекты.

  • Узнаете все особенности последней версии React 17
  • Научитесь работать и с классовыми, и с функциональными компонентами
  • Разберётесь, чем отличаются управляемые и неуправляемые компоненты
  • Научитесь использовать хуки
  • Освоите работу с состоянием и жизненным циклом приложения
  • Создадите SPA (single page application) с react-router

Курс включает в себя:
  • Базовые навыки по работе с React - создание простых компонентов, управление состоянием приложения и его жизненным циклом
  • Продвинутые навыки по работе с React - современные техники, позволяющие добиваться хороших результатов
  • Создание Single Page Application - популярных SPA-приложений за счет "магии", позволяющей посетителям сайта переходить между страницами без полной перезагрузки в браузере
  • Разбор всех доступных хуков и создание собственных - встроенных методов, которые изменили представление о работе с React-приложениями
  • Публикация проектов онлайн - через популярный и бесплатный сервис GitHub Pages


Почему это именно тот курс, который даст результат?
“Меня зовут Михаил Непомнящий, и я профессиональный веб-разработчик. Я работаю с React каждый день и решаю с его помощью задачи самого разного уровня сложности.

При этом я также профессиональный преподаватель и обучаю людей веб-разработке с 2016 года. А курсы по React также провожу в учебном центре "Специалист" в Москве.

В своих курсах я стараюсь подавать материал максимально доступно - от простого к сложному и без воды. Помню как самому трудно было поначалу пробираться через дебри React, когда только начинал изучать его, и в этом курсе постарался сделать подачу максимально понятной.

В рамках курса мы сделаем 3 полноценных проекта, причем уровень сложности каждый раз будет возрастать. Таким образом, на практике мы будем последовательно закреплять те навыки и умения, которые были изучены.” - преподаватель и автор курса Михаил Непомнящий

Для кого этот курс
  • Для тех, кто хочет изучить самый популярный frontend фреймворк React JS и подготовить портфолио
  • Для тех, кто пробовал сам изучать React, но по какой-либо причине не справился и хочет закрыть пробелы
  • Для тех, кто хочет углубиться в веб-разработку и взять лучшее из современных практик
  • Для тех, кто застрял на первых шагах профессии и хочет добрать компетенций к резюме
  • Для тех, кто хочет получить актуальные навыки и стать более востребованным на рынке веб-разработки

Требования для прохождения курса
  • Базовые знания веб-разработки - HTML, CSS, JavaScript
Прежде чем углубляться в изучение библиотеки React, лучше сначала разобраться как следует с базовыми технологиями - рекомендуем изучить наши курсы:
Верстальщик - HTML, CSS, Bootstrap, JavaScript
ВЕБ-разработчик - с нуля до результата!
JavaScript - полный курс с нуля до результата!

Начать обучение

План курса

Программа обучения включает видео уроки по изучению React с нуля для начинающих. Благодаря практическим заданиям и примерам, Вы сможете закрепить полученные знания по использованию React JS на практике.

развернуть все

свернуть все

О курсе React с нуля для начинающих + 3 проекта в портфолио!
2. React с JSX и без
  • 2.1 Библиотеки React и ReactDOM09:18
  • 2.2 Простое приложение на чистом React08:59
  • 2.3 Преобразование приложения в JSX07:27
  • 2.4 Практическое задание "Преобразование приложения в JSX" - Решение02:30
  • 2.5 Особенности JSX10:45
  • 2.6 Разделение приложения на модули06:14
  • 2.7 Условная отрисовка03:46
  • 2.8 Пример с прелоадером03:47
3. Классовые React-компоненты
  • 3.1 Разбор составляющих базового React-шаблона14:28
  • 3.2 Понятие React-компонента09:40
  • 3.3 Состояние компонента и управление им12:00
  • 3.4 Нюансы создания методов в классовых компонентах04:37
  • 3.5 Практическое задание "Создание полноценного кликера" - Решение04:33
  • 3.6 Понятие жизненного цикла React-компонента18:11
  • 3.7 Задание на создание таймера: что надо сделать01:27
  • 3.8 Практическое задание "Создание таймера" - Решение08:31
  • 3.9 Работа с коллекциями и атрибутом key05:23
  • 3.10 Однонаправленный поток данных и состояния10:50
  • 3.11 Задание на обновление состояния через дочерние компоненты: что надо сделать01:07
  • 3.12 Практическое задание "Обновление состояния через дочерние компоненты" - Решение04:20
  • 3.13 Отличие классовых компонентов от функциональных в классическом понимании01:48
4. Работа с формами в React
  • 4.1 Управляемые компоненты - принцип единой ответственности10:48
  • 4.2 Валидация значений формы07:38
  • 4.3 Элементы checkbox, radio button, select, textarea09:04
  • 4.4 Задание на создание формы подписки: что надо сделать01:38
  • 4.5 Практическое задание "Создание формы подписки с валидацией" - Решение07:41
  • 4.6 Использование рефов и управление фокусом09:18
  • 4.7 Неуправляемые компоненты05:22
5. Проект "Фильмы"
  • 5.1 Обзор проекта "Фильмы". Постановка задачи02:26
  • 5.2 Подготовка проекта, создание шапки и подвала16:27
  • 5.3 Знакомство с API базой фильмов07:19
  • 5.4 Задание на создание общего списка фильмов: что надо сделать01:52
  • 5.5 Практическое задание "Создание общего списка фильмов" - Решение16:12
  • 5.6 Добавление строки поиска07:51
  • 5.7 Практическое задание "Реализация поиска фильмов" - Решение05:12
  • 5.8 Задание на добавление фильтрации по категории: что надо сделать01:34
  • 5.9 Практическое задание "Добавление фильтрации по категориям" - Решение13:26
  • 5.10 Обработка неудачного поиска04:27
  • 5.11 Безопасное хранение ключа API04:25
  • 5.12 Сборка приложения и выгрузка на продакшн13:59
6. Функциональные React-компоненты
  • 6.1 Работа с состоянием в функциональном компоненте08:45
  • 6.2 Практическое задание "Кликер в функциональном компоненте" - Решение01:51
  • 6.3 Управление жизненным циклом через функциональный компонент08:04
  • 6.4 Использование рефов в функциональном компоненте08:48
  • 6.5 Практическое задание "Рефакторинг таймера на функциональный компонент" - Решение16:47
  • 6.6 Рефакторинг проекта с фильмами. Часть 107:55
  • 6.7 Рефакторинг проекта с фильмами. Часть 205:11
7. Хуки подробно
  • 7.1 useState09:19
  • 7.2 useEffect08:36
  • 7.3 useContext14:07
  • 7.4 useLayoutEffect06:25
  • 7.5 useCallback, useMemo12:53
  • 7.6 useImperativeHandle07:51
  • 7.7 useReducer11:21
  • 7.8 Пользовательские хуки07:22
  • 7.9 Правила использования хуков03:31
  • 7.10 Рефакторинг таймера с использованием useReducer07:42
8. Проект "Витрина"
  • 8.1 Презентация проекта01:35
  • 8.2 Обзор API, что доступно, как использовать06:47
  • 8.3 Подготовка проекта, шапка и футер10:32
  • 8.4 Вывод списка товаров19:12
  • 8.5 Состояние заказа, иконка корзины08:01
  • 8.6 Практическое задание "Функция добавления товара в заказ" - Решение12:11
  • 8.7 Создание корзины, пересчет суммы заказа в корзине19:44
  • 8.8 Функция удаления товара из корзины06:30
  • 8.9 Практическое задание "Изменение количества товара в корзине" - Решение07:58
  • 8.10 Добавление подсказки о добавлении товара15:42
  • 8.11 Публикация проекта на GitHub Pages09:17
9. Продвинутое управление состоянием приложения
  • 9.1 Концепция использования Context API и useReducer вместо пропсов02:34
  • 9.2 Создание контекста с провайдером06:50
  • 9.3 Создание редьюсера, добавление первых кейсов08:45
  • 9.4 Практическое задание "Доработка редьюсера и методов в контекст" - Решение10:13
  • 9.5 Переключение всех компонентов на контекст вместо пропсов16:08
  • 9.6 Обзор сделанного02:22
10. Роутинг и SPA-приложение
  • 10.1 Роутинг и SPA, обзор проекта02:07
  • 10.2 Базовый роутинг12:04
  • 10.3 Компонент Link04:17
  • 10.4 Хуки useParams, useHistory09:47
  • 10.5 Хуки useLocation, useRouteMatch03:20
  • 10.6 Вложенный роутинг05:12
  • 10.7 Обзор API для проекта04:28
  • 10.8 API настройка методов07:18
  • 10.9 Главная страница с категориями13:50
  • 10.10 Страница категории с блюдами11:55
  • 10.11 Страница с рецептом24:46
  • 10.12 Поиск на главной17:56
  • 10.13 Нюанс выкладки на продакшн SPA-приложения03:49
11. Подведение итогов
  • 11.1 Итоги курса01:38
Завершение курса - Получение Сертификата


Студенты также изучают

online_course
new
5
  • 28 видео
  • 14 часов
online_course
new
5
  • 30 видео
  • 8 часов
online_course
new
5
  • 48 видео
  • 19 часов
online_course
4.7
  • 10 видео
  • 21 заданий
  • 1 час
online_course
new
5
  • 65 видео
  • 24 часа
online_course
new
5
  • 97 видео
  • 34 часа

Отзывы студентов о курсе

Мы собрали отзывы учеников, прошедших онлайн курс. Оставьте свой отзыв после прохождения Курса React с нуля для начинающих + 3 проекта в портфолио!

Начать обучение

Преподаватель

Course Author
Михаил Непомнящий

О преподавателе курса

  • Профессиональный практик-преподаватель
  • По образованию - прикладной информатик
  • Работал и сотрудничал с крупными международными и российскими образовательными проектами

"Преподаю людям разных возрастов - от 8-ми лет до 60-ти. Любимая дисциплина - создание web-сайтов.

При создании обучающих видео стараюсь дать максимум полезной информации, при этом руководствуюсь принципом эффективности - без "воды" и "растеканию по дереву". Каждая минута видео уроков пройдет для Вас с пользой!"

Видеоуроки: 94


Продолжительность: ~13 часов