Курс React JS

• Немного о курсе

• Что такое React?

• Когда и почему стоит использовать React

• Что такое виртуальный DOM и как он работает

• Рендеринг данных в React - JSX!

• Первый компонент - Hello world.

• Props у компонентов

• State компонентов, методы getInitialState и setState

• Пример. Отображение списка контактов

• Обработка событий в React, синтетические события

• Жизненный цикл компонента

• Порядок вызова методов жизненного цикла при инициализации компонента

• Порядок вызова методов жизненного цикла при изменении параметров

• Порядок вызова методов жизненного цикла при изменении состояния

• Порядок вызова методов жизненного цикла при удалении компонента

• Пояснение методов, когда какие следует использовать

• Пример. Демонстрация порядка вызовов методов жизненного цикла

• Пример. Таймер

• Деление приложения для работы с заметками на компоненты, продумывание структуры

• Установка nodejs и npm

• Установка и запуск http-сервера

• Пример. Приложение для управления заметками

• Inline-стили в React

• Использование this.props.children

• Refs

• Использование localStorage для хранения заметок пользователя

• Использование npm

• Пример. Заполнение package.json

• Подключение внешних модулей с помощью npm

• Зачем нужен сборщик проектов и как он работает?

• Настройка webpack

• Пример. Подключение лоадеров к webpack

• Настройка hot reloading и hot module replacement

• Структура приложения

• Использование NodeJS модулей

• Пример. Построение модульного приложения

• Основные возможности ES2015 на примерах

• CSS препроцессоры

• LESS

• Что такое роутинг? Его значение в приложении

• Использование react-router

• Пример. Настройка вложенных маршрутов

• Валидация props

• Пример. Компонент для отображения статьи

• Контекст 10. Пример. Передача цвета через контекст

• Навигация в приложении

• Пример. Манипуляция с именами классов

• Данные в приложении

• MVC, схема, проблемы

• Однонаправленный поток данных

• Flux

• Пример. Покупка товара в интернет-магазине

• Настройка Google developers console

• Material-ui

• Настройка слоя коммуникации с API

• Пример. Авторизация 10. React-router hooks

• Пример. Построение Flux архитектуры в приложении: dispatcher, actions, stores, constants

• Концепция “умных” и “глупых” компонентов

• Пример. Деление компонентов на “умные” и “глупые”

• Пример. Отображение индикатора загрузки для списка задач

• Что такое оптимистичные действия и когда стоит их применять?

• Пример. Оптимистичное выделение задачи

• Пример. Оптимистичное редактирование задачи

• Пример. Отображение ошибки при неправильном id списка задач

• Конфигурация, разные подходы

• Писать приложения на React

• Использовать ES2015 при написании кода

• Использовать Flux архитектуру

• Настраивать конфигурацию

• Настраивать отображение индикаторов загрузки

• Отображать ошибки в приложении

• работать с github