Geekbrains React

Оглавление

• Урок 1. Настройка среды разработки и первое React-приложение
• Урок 2. Жизненный цикл React-компонента
• Урок 3. Продолжаем погружение в React и подключаем UI-библиотеку
• Урок 4. Роутинг в React: разбиваем мессенджер на чаты
• Урок 5. Redux. Управление состоянием приложения
• Урок 6. Redux middlewares, подключение роутера к Redux и хранение данных с помощью Redux-persist
• Урок 7. Работа с API
• Урок 8. Progressive Web App

Урок 1

Настройка среды разработки и первое React-приложение

• Создан проект
• Настроены package.json и webpack.config
• Установлен webpack-dev-server
• Создано простейшее React-приложение с использованием функциональных компонентов

Урок 2

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

• Разобран жизненный цикл компонентов на примере App и Child
• Созданы компоненты MessageField и Message
• Реализована отправка сообщений по нажатию кнопки
• Реализован ответ от робота

Урок 3

Продолжаем погружение в React и подключаем UI-библиотеку

• Подключён Material-UI
• Сделана первичная вёрстка, явно выделено поле для сообщений
• Визуально разделены сообщения от пользователя и ответы робота
• Добавлена возможность ввода текста сообщения и его отправки

Урок 4

Роутинг в React: разбиваем мессенджер на чаты

• Подключён BrowserRouter
• Создать верхний компонент Router
• Приложение разбито на чаты с помощью роутера (URLs: /chat/<chat_id>/)
• Реализовано хранение сообщений в словаре с id в качестве ключа
• Реализовано хранение чатов в словаре (chatId: {title: название, messageList: массив из id сообщений})

Урок 5

Redux. Управление состоянием приложения

• Подключён Redux
• Подключено расширение Redux DevTools
• Созданы action-ы отправки сообщения и добавления чата
• Чаты перенесены в Redux

Урок 6

Redux middlewares, подключение роутера к Redux и хранение данных с помощью Redux-persist

• Подключены middlewares
• Логика ответа от робота перенесена в middleware
• Router подключён к Redux
• Переходы между чатами реализованы при помощи функции push()
• Подключён redux-persist
• Реализовано сохранение сообщений и чатов с помощью redux-persist

Урок 7

Работа с API

• Подключён redux-api-middleware
• Организована загрузка чатов и сообщений через API
• Реализовано выделение сущностей (чатов и сообщений) с помощью normalizr

Урок 8

Progressive Web App

• Подключён service-worker
• Добавлен Web App Manifest и иконки
• Реализовано всплывающее окно для iPhone с предложением установить приложение на домашний экран
• Добавлен скрипт отслеживания установок
• Реализована подписка на push-уведомления