react/baseHW.md

HomeWork: React basics

Перевести чат на рельсы React. Ниже поэтапное описание процесса для тех, кто еще не до конца освоился и не знает что для чего использовать в процессе решения задачи.

Верстка.

Создать 4 компонента:

Chat

Композитный компонент истории чата, который использует ChatMessage для отображения каждого сообщения (передав объект сообщения в props каждого ChatMessage). Используйте массив для сообщений (например через map)

ChatMessage

Одно сообщение чата. Из Chat в props надо передать объект сообщения что бы его отрисовать в этом компоненте.

Inputs

Просто компонент для отображения полей ввода nick, message и кнопки отправки. Используйте ref для сохранения ссылок на объекты полей ввода в объекте компонента.

ChatRooms

Select для чат-комнат.

React to Backend.

• Асинхронность получения данных предполагает что компонент может быть как минимум в двух состояниях - LOADING (PENDING), состояние когда компонент уже существует, а данные еще не пришли; и в состоянии когда данные уже есть. render должен это понимать по state или props и выдавать разное отображение компонента.
• Самое время для первичных обращений к серверу в componentWillMount. Тут вы можете считать чатрумы или инициировать setInterval для опроса истории сообщений.
• Функции, переданные в then промиса запроса к серверу, должны вызывать setState для обновления представления.

Отправка сообщений

• По кнопке выковыриваем заботливо сохраненные с помощью ref ссылки на поля ввода
• Из полей ввода достаем тексты ника и сообщения
• берем номер чатрума из глобальной переменной let chatRoomId = 1.
• Мужественно копипастим код fetch из старой версии.

и это почти всё, но в идеале:

• при запуске fetch ставим поля ввода disabled
• по окончанию промиса очищаем поле текста в случае успеха, disabled = false
• или оставляем текст если отправить не удалось, также разблокируя поля ввода.

Чатрумы

• Делаем <select>
• В componentWillMount делаем fetch за чатрумами.
• В then делаем setState с массивом объектов ChatRoom
• В render пишем loading...
• В render учитываем state и вставляем массив с <option value={room.id}>{room.title}</option> в <select>
• В onChange сохраняем в глобальную переменную chatRoomId id текущего чатрума.

История чата.

• В componentWillMount делаем setInterval
• В setInterval делаем fetch из текущего ChatRoom (chatRoomId)
• В then отправляем полученные данные в setState
• В render берем массив сообщений из this.state и формируем массив компонентов <ChatMessage msg={msg} />. Можно for перед return, можно map в JSX.
• Аналогично для messageId можно использовать глобальную переменную.