baseHW pre alpha

base.md

@@ -304,7 +304,7 @@ export default App;
 
 При вызове `setState` *нет гарантии*, что `state` в этом объекте изменится **синхронно** (т. е. в тот же момент). **React** может обработать `setState` и его отрисовку в компоненте 
 *позже*, т. е. **асинхронно**. По этой причине, если новое состояние `state` зависит от предыдущего, в коде его вычисления нельзя отталкиваться от текущего `state`, так как он может 
-быть еще не актуализированным предыдущим(и) `setState`. В качестве решения в **сам `setState`** передается функция, которая будет вызвана **React** в нужный момент времени 
+быть еще не актуализированным предыдущим(и) `setState`. В качестве решения этой проблемы в **сам `setState`** передается функция, которая будет вызвана **React** в нужный момент времени 
 с актуальными значениями `props` и `state`:
 
 ```jsx

baseHW.md

@@ -0,0 +1,54 @@
+# 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` можно использовать глобальную переменную.