Курс React.js

Навіщо вивчати React.js?

React.js – це відкритий JavaScript-фреймворк для створення інтерфейсів користувача. Технологія підтримується компаніями Facebook, Instagram та спільнотою незалежних веб-розробників. Переваги React.js:

• React.js має вирішити проблеми часткового оновлення вмісту веб-сторінки.
• Технологія дозволяє покращити користувальницький досвід ваших сайтів та застосунків.
• React використовується при розробці високонавантажених веб-застосунків і дозволяє збільшити швидкість їх розробки.
• Alipay, Airbnb, Dropbox, Facebook, Netflix, Reddit та сотні інших великих популярних сайтів та застосунків розробляються з використанням React.

Програма курсу React.js

Основи ES6
• Налаштування оточення.
• Короткий огляд фіч ES6.
• Create react app.

Введення в ReactJS
• Бібліотека React.
• Пишемо Hello World.
• Що таке реакт-елемент?
• Знайомимось с JSX.
• Компоненти.

Віртуальний DOM
• Stateful-компоненти, збереження стану.
• State, props.
• Що таке віртуальний DOM?
• Як React відслідковує зміни (reconciliation).
• Життєвий цикл реакт-компонентів.

Детальніше про реакт-компонентів
• Огляд реакт-компонентів.
• "Розумні" та "дурні" компоненти.
• Синтетичні події.
• Керовані та некеровані компоненти.
• Ієрархія компонентів.
• Контекст.

React Router
• Що таке роутер, які завдання вирішує.
• Основні версії, їхні відмінності.
• Налаштування роутера.
• Перенаправлення, ледаче завантаження.
• Управління роутером.

FLUX
• Огляд FLUX.
• Структура FLUX.
• Диспетчер.
• Экшени (Дії).
• Сховище.

Redux
• Чим Redux відрізняється від FLUX.
• Потік даних.
• Middleware.
• Архитектура React + Redux застосунків.
• Бібліотека react-redux.

Тестування додатку
• Короткий огляд фреймворків для тестування.
• Допоміжні бібліотеки (assertions).
• JEST.
• Утиліти.
• Enzyme.

Додатково о React
• Компоненти-контейнери та презентаційні компоненти.
• Стилі.
• Селектори.
• Імутабельність.
• Структура проекту.

Створюємо простий React-Redux додаток
• Створюємо простий список добрих справ (TODO-list).
• Практичні поради.
• Використовуємо immutable.js.
• Використання бібліотеки reselect.js.
• Скажімо "НІ" каші в голові та в проекті!