Как рендерить react компонент с html?

Question

[Faiq Alizade]

Здравствуйте в Vue.js можно рендерить(вывести на экран) компонент написав в html название компонента как тег.
Это на пользу можно с PHP при цикле вывести сколько надо.Я хочу делать такое же с помощью React или похожие на него.
Причина: СТРАНИЦА СО СТАТЬЯМИ С БД.КАЖДАЯ СТАТЬЯ КОМПОНЕНТ В ЭТОМ КОМПОНЕНТЫ ДОЛЖНЫ БЫТЬ ДАТЫ ПУБЛИКАЦИИ ХОЧУ, ЧТОБЫ С PHP ПЕРЕДАТЬ В REACT КОМПОНЕНТ

ПРИМЕР:
PHP

<?php
foreach($posts as $post):
?>
<my-component  date='<?=$post->date?>' /> (Или похожее)
<?php endforeach; ?>

JS

class my-component extends React.Component{
render(){
return (
    <div>
         this.props.date (Например)
    </div>
)
}
}

Comments

[Dmitry Alekseev]

Т.е., вы хотите в цикле php рендерить реакт-компонент прокидывая туда какие-то пропсы ?

[Faiq Alizade]

Dmitry Alekseev, да

Answer 1

[Антон Спирин]

Неправильный подход к разработке. Варианты, как это сделать правильно:
1. Данные забираются Ajax запросом по API
2. Если хотите отдавать данные со страницей, можно записать в любой тег в атрибут data-state или в тег скрипт, в ключ window.__data
3. Можно написать node сервер с SSR и делать рендер на стороне сервера.

Answer 2

[Anubis]

Какой примерно код должен быть в скрипте для NodeJS для выполнения серверного рендеринкга SPA на React?

Посмотрите мой ответ плиз, я описал пример серверного рендеринга Реакт-приложения на Ноде (там Redux, для Mobx схема почти такая же, с мелкими отличиями). Для пхп, уверен, тоже есть решения, если вам принципиально использовать на сервере именно пхп (но я бы посоветовал закапывать этого динозавра и посмотреть в сторону Ноде).