Курс React з нуля для початківців

Мова викладання в курсі – російська. Незабаром буде доступна українська версія цього курсу.

Відеозаписи лекцій без зворотного зв’язку та участі викладача. Ви отримаєте доступ до матеріалів одразу після оплати.

Чого ви навчитеся

React 17
Класові та функціональні компоненти
Керовані та некеровані компоненти
Хуки
Робота зі станом застосунку
Робота з життєвим циклом застосунку
JSX
Створення SPA (single page application) з react-router

Опис

Frontend-розробка – одна з найпопулярніших і затребуваних професій сучасності. Цікава і захоплива. А React – найпопулярніший її інструмент, розроблений компанією Facebook. На React зроблені Instagram, Facebook, Twitter, AirBnb, PayPal, Uber, Netflix, Vkontakte, Vimeo, Trello, сервіси Яндекса, сам проєкт курсів Udemy і багато-багато інших великих продуктів.

Курс “React з нуля для початківців” дасть змогу не тільки освоїти ази цього інструменту, а й отримати сучасні просунуті техніки його використання. У курсі використовується остання актуальна версія React 17.

Для кого цей курс

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

Матеріали курсу

Загальна тривалість 12 годин

Вступ

– Огляд курсу – що будемо вивчати
– Що таке React і його переваги над класичною розробкою
– Пререквізит знань і де добирати за наявності пробілів
– Що необхідно встановити
– Варіанти оточення

React з JSX і без

– Бібліотеки React і ReactDOM
– Простий застосунок на чистому React
– Перетворення застосунку на JSX
– Перетворення компонента на JSX
– Розбір завдання з перетворення компонента на JSX
– Особливості JSX
– Поділ застосунку на модулі
– Умовне відтворення
– Приклад із прелоадером

Класові React-компоненти

– Розбір складових базового React-шаблону
– Поняття React-компонента
– Стан компонента і управління ним
– Нюанси створення методів у класових компонентах
– Створення повноцінного клікера
– Розбір практики з клікером
– Поняття життєвого циклу React-компонента
– Завдання на створення таймера: що треба зробити
– Створення таймера
– Розбір практики по створенню таймера
– Робота з колекціями і атрибутом key
– Односпрямований потік даних і стану
– Завдання на оновлення стану через дочірні компоненти: що треба зробити
– Оновлення стану через дочірні компоненти
– Розбір практики з оновлення стану через дочірні компоненти
– Відмінність класових компонентів від функціональних у класичному розумінні

Робота з формами в React

– Керовані компоненти – принцип єдиної відповідальності
– Валідація значень форми
– Елементи checkbox, radio button, select, textarea
– Завдання на створення форми підписки: що треба зробити
– Створення форми підписки з валідацією
– Розв’язання практики по створенню форми підписки
– Використання рефів і управління фокусом
– Некеровані компоненти

Проєкт “Фільми”

– Огляд проєкту “Фільми”. Постановка завдання
– Підготовка проекту, створення шапки і підвалу
– Знайомство з API базою фільмів
– Завдання на створення спільного списку фільмів
– Створення спільного списку фільмів
– Рішення практики по створенню спільного списку фільмів
– Додавання рядка пошуку
– Реалізація пошуку фільмів
– Рішення практики з реалізації пошуку фільмів
– Завдання на додавання фільтрації за категорією: що треба зробити
– Додавання фільтрації за категоріями
– Вирішення практики з додавання фільтрації за категоріями
– Обробка невдалого пошуку
– Безпечне зберігання ключа API
– Збирання додатка і вивантаження на продакшн

Функціональні React-компоненти

– Робота зі станом у функціональному компоненті
– Клікер у функціональному компоненті
– Розв’язання практики зі створення клікера через функціональний компонент
– Управління життєвим циклом через функціональний компонент
– Використання рефів у функціональному компоненті
– Рефакторинг таймера на функціональний компонент
– Розв’язання практики з рефакторингу таймера у функціональний компонент
– Рефакторинг проєкту з фільмами, частина 1
– Рефакторинг проекту з фільмами, частина 2

Хуки детально

– useState
– useEffect
– useContext
– useLayoutEffect
– useCallback, useMemo
– useImperativeHandle
– useReducer
– Користувацькі хуки
– Правила використання хуків
– Рефакторинг таймера з використанням useReducer

Проєкт “Вітрина”

– Презентація проєкту
– Огляд API, що доступно, як використовувати
– Підготовка проєкту, шапка і футер
– Виведення списку товарів
– Стан замовлення, іконка кошика
– Функція додавання товару в замовлення
– Рішення: функція додавання товару в замовлення
– Створення кошика, перерахунок суми замовлення в кошику
– Функція видалення товару з кошика
– Зміна кількості товару в кошику
– Рішення: Зміна кількості товару в кошику
– Додавання підказки про додавання товару
– Публікація проєкту на GitHub Pages

Просунуте керування станом додатка

– Концепція використання Context API і useReducer замість пропсів
– Створення контексту з провайдером
– Створення редюсера, додавання перших кейсів
– Доопрацювання редюсера і методів у контексті
– Рішення: Доопрацювання редюсера і методів у контексті
– Перемикання всіх компонентів на контекст замість пропсів
– Огляд зробленого

Роутинг і SPA-додаток

– Роутинг і SPA, огляд проєкту
– Базовий роутинг
– Компонент Link
– Хуки useParams, useHistory
– Хуки useLocation, useRouteMatch
– Вкладений роутинг
– Огляд API для проєкту
– API налаштування методів
– Головна сторінка з категоріями
– Сторінка категорії зі стравами
– Сторінка з рецептом
– Пошук на головній
– Нюанс викладки на продакшн SPA-додатку