Курс React та Redux

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

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

Практичне розроблення комерційних React додатків на практиці

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

– Використовувати React для створення сучасних front-end застосунків
– Використовувати Redux для управління станом застосунку
– Використовувати REST API для доступу до даних на сервері
– Використовувати Jest для юніт-тестування та WebPack для пакування застосунку

Вимоги

Необхідне розуміння основ JavaScript, CSS і HTML

Опис

Курс створений на основі React 16.4 і зачіпає останні нововведення в екосистемі React.

Курс містить докладний посібник із нового синтаксису JavaScript аж до ECMAScript 2019.

React – найпопулярніша бібліотека для розробки веб-додатків і одна з найбільш затребуваних навичок для JavaScript розробника в 2018 році.

Фокус цього курсу – практична розробка додатків на React. Це означає, що ми розглянемо не тільки ефективне використання самого React, а й цілу екосистему інструментів і бібліотек, які необхідні для створення повноцінного UI додатка.

Розробляючи реальні додатки, ми вивчимо найважливіші інструменти в екосистемі React:

– React
– Redux
– React Router
– Jest
– Webpack і Babel

Оскільки жоден UI застосунок не може працювати без сервера, приклади з цього курсу працюють з реальними REST API і можуть використовуватися, як основа для вашого власного проєкту! А щоб ще більше наблизити наші приклади до комерційних продуктів, ми детально розглянемо юніт-тестування та ефективну упаковку за допомогою WebPack.

Цей відео-курс побудований на підставі офлайн курсів, які проводить автор для підготовки професійних JavaScript розробників. Його завдання – дати всі необхідні практичні навички для роботи в команді або для самостійного розроблення React додатків комерційного рівня.

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

Розробники, які хочуть освоїти React на професійному рівні

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

Усі 157 лекцій 19:26:34
–
Вступ – 38:02
Про цей курс – 04:19
Що таке React – 05:21
Перший React додаток – 10:20
Налаштування середовища розробки – 06:17
Як завантажити код прикладів – 05:41
Сучасний JavaScript і його версії – 06:04
–
ECMAScript 2019 – 01:55:32
Вступ – як використовувати цей розділ – 02:49
Ключові слова let і const – 06:10
Arrow-функції – 11:44
Параметри за замовчуванням – 05:39
Rest параметр – 04:14
Spread оператор для масивів – 04:17
Деструктуризація об’єктів – 12:54
Деструктуризація масивів – 09:26
Шаблонні рядки (template strings) – 04:32
Об’єкти – 07:36
Оператор Object Spread – 03:48
Прототипи – 14:19
Класи – 09:17
Властивості класів (class properties) – 07:19
Модулі в JavaScript – 11:28
–
Основи React – 01:49:39
Яким буде наш перший проект – 05:00
Створюємо порожній React проект – 08:08
React елементи – 11:05
React компоненти – 06:31
JSX – 14:19
Вправа – Code Review 1 – 04:19
Структура React проекту (частина 1) – 08:51
Props – властивості компонентів – 07:21
Масиви, як властивості компонентів – 10:31
Колекції та ключі – 10:49
Як імпортувати css – 14:36
Структура React проекту – частина 2 – 08:09
–
Стан компонентів і обробка подій – 01:46:28
Компоненти-класи – 07:59
Обробка подій – 11:36
State – стан React компонента – 05:35
Як працює setState() – 04:31
Оновлення стану, залежне від попереднього стану – 05:25
Власні події – 07:42
setState() – видалення елемента – 11:37
setState() – додавання елемента – 14:41
Дані в React додатку – 07:56
setState() – редагування елементів – 15:45
Робота з формами – 09:30
Контрольовані компоненти – 04:11
–
Закінчуємо Todo App – 4:08
Як використовувати цей розділ – 01:53
Реалізуємо пошук – 09:08
Реалізуємо фільтри – 13:07
–
Робота із сервером – 01:24:33
Яким буде наш наступний проєкт – 03:02
Створюємо порожній проєкт – 05:15
Вибір HTTP API для браузера – 03:27
Як працює Fetch API – 05:50
Обробка помилок у Fetch API – 04:15
Створюємо клієнт для API – 07:20
Створюємо компоненти StarDB – 06:50
Компонент, який отримує дані з API – 09:47
Трансформація даних API – 11:27
Створюємо індикатор завантаження – 04:20
Логіка індикатора завантаження – 08:38
Обробка помилок мережі в компоненті – 08:58
Робота з API – висновки – 05:24
–
Життєвий цикл компонентів – 55:51
Навіщо компонентам “життєвий цикл”? – 07:06
Методи життєвого циклу – 05:59
componentDidMount() – 02:38
Використовуємо на практиці componentDidMount() – 08:02
componentDidUpdate() – 02:07
Використовуємо на практиці componentDidUpdate() – 07:50
componentWillUnmount() – 02:19
componentDidCatch() – 10:40
Використовуємо componentDidCatch() на практиці – 09:10
–
Патерни React – 03:14:36
Патерни React – введення – 04:06
Використання функцій – 09:21
Render-функції – 07:14
Властивості-елементи – 06:55
Children – 08:44
Практика – рефакторинг компонента – 09:15
Робота з props.children – 09:42
Клонування елементів – 05:16
Компоненти вищого порядку (HOC) – 12:50
Рефакторинг компонентів – 12:10
Композиція компонентів вищого порядку – 08:31
Контекст – 06:33
Використання Context API – 09:46
Використання HOC для роботи з контекстом – 07:03
Трансформація props у компонентах вищого порядку – 12:25
Оновлення контексту – 12:52
Рефакторинг: робимо код чистішим – 10:19
Рефакторинг компонентів вищого порядку (опціональний урок) – 07:35
Функція compose() (опціональний урок)) – 11:23
Властивість defaultProps – 06:13
Властивість propTypes – 04:59
NPM – встановлення додаткових пакетів – 03:57
Бібліотеки prop-types – 07:27
–
React Router – 01:03:22
Що таке роутинг04:54
Основи react-router04:53
Link – 03:00
Як працює Route – 05:29
Динамічні шляхи – 07:05
withRouter – 06:34
Відносні шляхи – 04:58
Опціональні параметри – 08:02
Авторизація та “закриті” сторінки – 11:12
Switch (обробка неіснуючих адрес) – 07:15
–
Redux – 01:27:11
Введення в Redux – 10:14
Встановлення бібліотек – 03:32
Reducer – 07:03
Redux Store – 04:27
Чисті функції – 06:03
UI для Redux – 05:21
Дії з параметрами – 03:42
Action Creator – 03:42
Структура проєкту – 01:58
bindActionCreators() – 08:49
Використання React і Redux – 08:47
react-redux і функція connect() – 11:02
Функція mapDispatchToProps() – 08:04
mapDispatchToProps у вигляді об’єкта – 04:27

Розробка Redux додатка 25 лекцій – 03:26:20
Наш наступний проєкт – 02:29
Ініціалізація проєкту – 03:33
Структура react redux проєкту – 05:28
Допоміжні компоненти – 09:33
Redux компоненти – 06:43
Каркас React-Redux додатка – 08:00
Роутінг – 10:57
Читання даних із Redux Store04:37
Відправлення дій у Redux Store (action dispatch) – 12:03
Стилі (опціональне відео) – 09:37
Робота з асинхронними даними – 07:48
Відмінності setState() і reducer – 07:01
Обробка помилок – 07:44
mapDispatchToProps: аргумент ownProps – 07:06
Naming Convention для дій – 04:20
Компоненти-контейнери – 03:39
Підключення нового компонента до Redux – 10:32
Redux: додавання елементів у масив – 10:06
Redux: оновлення елементів у масиві – 13:42
Redux: видалення елементів із масиву – 12:16
Організація коду reducer’а – 12:53
Store Enhancers – 11:45
Middleware – 09:50
Thunk – 11:40
Наступні кроки – 02:58

Збірка React додатків – Babel 12 лекцій – 01:04:09

Збірка React додатка – 03:08
Створюємо новий проєкт – 06:03
Встановлення Babel – 04:35
Плагіни Babel – 06:08
Конфігурація Babel (.babelrc) – 04:19
Babel Presets – 06:54
Оптимізація збірки для конкретних браузерів – 09:09
Динамічний вибір браузерів (browserslist) – 05:54
Файли конфігурації browserslis – 04:30
Polyfills – 07:32
Робота з JSX – 03:26
Організація залежностей – 02:31

Збірка React додатків – WebPack 3 лекції – 16:43

Що таке WebPack – 04:43
Встановлення WebPack – 07:30
Файл конфігурації WepPack – 04:30