McBernar

Зачем вы сначала добавляете элемент в массив, потом перебираете весь массив, и только после этого добавляете свойство в объект? Почему нельзя просто на входе изменить item и добавить его в массив?

К моменту рендера списка у вас еще не получен массив.

Делайте сначала проверку на заполненный массив, и только после пробегайтесь по нему map-ом.
posts && …

Делаешь один компонент, в котором происходит проверка токена. И он же является родительским компонентом для всех остальных, где необходима проверка.

Зачем дублировать одно и то же?

Возможно, вам не нужен рил-тайм. Тогда достаточно раз в n секунд слать простой запрос в фоне. Если же нужно моментально, то socket.io вам в помощь.

На официальном сайте реакта. Методы иногда меняются и запрещаются. Самая актуальная информация на react.js.org

Ну так просто удалите перед отправкой данных все '—' из текста.
str.replace('—', '')

Не, статику из реакта не получить. Надо либо использовать пакет из npm типа react-static, либо немного переписать с помощью nextjs.

4. Страница будет сформирована в любом случае. А если не делать никаких проверок, то и до получения контента по апи.

Вы же понимаете процесс — что именно вам объяснить?

1. Вам нужен сервер. Как статика реакт не работает.
То есть, локально эти файлы не сработают.
2. Могу предположить, что вам еще нужен htaccess на хостинге, который перенаправит все запросы на index, если у вас больше одной страницы.

Вы можете подключить Реакт, как обычный js-скрипт.

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

И в этом же файле разместить весь код Реакта.

Сделать роут для api. В этом роуте передать нужную информацию. Из реакта обратиться к этому роуту через axios/xhr/fetch, получить данные, вывести на экран.

Экспортируете свои компоненты из файлов, импортируете их в свои страницы.

Создайте папку pages, там создайте точно такой же компонент, как и другие, импортируйте туда нужное и расставляйте лейаут. Для мета-тегов можно использовать react-helmet. Для роутинга react-router.

Страница от компонента не отличается ничем.

Homepage в package.json надо добавить.

У вас нет доступа к папке из реакта.

Можете сделать файл json, где прописать имена файлов, а в реакте обращаться к этому файлу, проходить по нему мапом, брать имена файлов и рендерить картинки.

Но тут придется не только файлы в папку закидывать, но и json править. Хотя это, конечно, намного проще, чем каждый раз пересобирать проект реакта и пушить на сервер.