https://github.com/macket/geekbrains_react
https://github.com/macket/geekbrains_react
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/macket/geekbrains_react
- Owner: Macket
- Created: 2019-11-21T17:33:27.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T12:13:33.000Z (over 3 years ago)
- Last Synced: 2025-04-05T02:33:34.545Z (over 1 year ago)
- Language: JavaScript
- Size: 832 KB
- Stars: 1
- Watchers: 0
- Forks: 6
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Geekbrains React
## Оглавление
- [Урок 1. Настройка среды разработки и первое React-приложение](#Урок-1)
- [Урок 2. Жизненный цикл React-компонента](#Урок-2)
- [Урок 3. Продолжаем погружение в React и подключаем UI-библиотеку](#Урок-3)
- [Урок 4. Роутинг в React: разбиваем мессенджер на чаты](#Урок-4)
- [Урок 5. Redux. Управление состоянием приложения](#Урок-5)
- [Урок 6. Redux middlewares, подключение роутера к Redux и хранение данных с помощью Redux-persist](#Урок-6)
- [Урок 7. Работа с API](#Урок-7)
- [Урок 8. Progressive Web App](#Урок-8)
## Урок 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//)
- Реализовано хранение сообщений в словаре с 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-уведомления