по поводу вопроса 2: вам будет необходимо взять еще что-то. Например, можно использовать веб сокеты, чтобы рассылать всем подписчикам события: элемент_создан / удален и т.д. Без такой "рассылки" по подписчикам (подключенным клиентам) не получится сделать, разве что будет какой-то костыль с таймером (не надо так).
по поводу вопроса 1, за неимением хорошего простого примера под рукой, предлагаю сделать по шагам, если получится - уверяю, с "расширением" пойдет гораздо лучше:
Например есть страница с номерами телефонов и именем.
На этой странице у вас компонент PhonesAndNames в момент
componentDidMount делаете xhr вызов и получает список всех телефонов и номеров. Например, это GET запрос на ваш сервер: GET /api/phones
Полученные данные вы кладете в state и в рендере компонента у вас строится таблица по данным из state компонента. Следовательно, как только у вас xhr запрос завершится, данные окажутся в state, случится ре-рендер и все будет хорошо. Для полного счастья, можно добавить переменную isLoading, например, и ставить ей true в начале выполнения запроса, и false в момент получения ответа. В рендере компонента, в зависимости от значения isLoading - рисовать прелоадер. Конечно, isLoading тоже будет жить в state.
Далее, при наведении на строку - у вас, к примеру рисуется "крестик". По клику на крестик - производится запрос на сервер, например: DELETE /api/phones/айди. Внутри компонента PhonesAndNames это будет просто onClick на элементе крестик и функция, которая опять же отправляет xhr запрос. Когда будет получен ответ, вы должны поиском найти id удаленного элемента из вашего списка в state и вернуть список элементов. Изменился state - случился ререндер - все в порядке.
Так же с добавлением. Вам достаточно поставить пару input'ов + кнопку "добавить". Опять обработчик на onClick (или на onSubmit, если сделаете это как форму) - опять xhr запрос (POST /api/phones), опять на успешный ответ операция со списком телефонов и имен в state, а именно: банально добавление в конец или в начало нового элемента.
Остался только update. С ним тоже самое. В простейшем примере, чтобы не заморачиваться, все ваши телефоны и имена могут быть в таблице внутри тэга input и в конце строки, там же где крестик - иконка "обновить".
---
Получается, если вы будете использовать web-сокеты, то вам нужно будет настроить свой сервер так, чтобы в момент успешного ответа на все вышеизложенные методы бродкастилось (от broadcast, т.е. рассылать) какое-то событие, на которое ваши клиенты умеют реагировать.
---
Чтобы все это в процессе "расширения" и "усложнения" не превратилось в трудноподдерживаемую кашу, рекомендую использовать любую из библиотек для "управления состоянияем приложения", так сказать. Мне очень нравится
redux.
Простой
