Как подружить React с Symfony?

Question

[kafkiansky]

Я уже видел похожие вопросы тут, на тостере, но для меня они не оказались исчерпывающими, к сожалению. Как всё-таки соединить React с Symfony? У реакта должна быть отдельная папка, так? Допустим, фронтенд. Общение происходит посредством json, это тоже понятно. А дальше как? Симфони отправляет данные на один роут и реакт их там ловит? Допустим, пример:

/**
  *@Route("/posts")
  *
  /
public function index()
{
     return new JsonResponse($this->postRepository->findAllAsArray());
{

А реакт уже на том же роуте ловит эти данные? Или как?

Comments

[Роман Александрович]

Проще всего связать реакт и php по средством апи. Вы пишите апи и из под реакта с помощью fetch или axios запрашиваете необходимые вам данные.
Второй способ это когда вы рендерите страничку на сервере а в реакт отдаете готовый html. Server Side Rendering гуглите, читайте и тд.

Answer 1

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

1. Отдаете по всем роутам страниц либо Twig шаблон с div id=root и вашим бандлом. Либо для этой задачи поднимаете Node сервер(express/koa). Используйте Node сервер если нужен SSR.
2. Начальные статические данные пишем например в window.__INITIAL_STATE__, при инициализации на клиенте отправляем их в store.
3. Все общение клиентской и серверной части через REST API.
4. На клиентской стороне используете клиентский роутер(react-router-dom). Если используете SSR на стороне сервера используйте StaticRouter.
Пожалуй все.

Comments

[kafkiansky]

То есть, как я и писал, с сервера гоняем данные на /api/posts в джсон формате, а на клиенте по тому же роуту их ловим и отображаем, верно?

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

Kafkiansky, не верно. Сами подумайте как вы одним запросом разные типы данных будете получать.
Для API обычно выделяют либо поддомен: api.mysite.com/, либо роут api.mysite.com/api/. Если страницу запрашиваете по роуту mysite/posts/, то данные по api.mysite.com/posts/ или mysite.com/api/posts/. Если планируете использовать мобильные клиенты или публичный API, то необходимо использовать версионирование: api.mysite.com/v1/ или mysite.com/api/v1/

[kafkiansky]

Антон Спирин, так я не сказал, что по одному ендпоинту буду получать разные данные. Я в качестве примера привёл только один роут. Их может быть много:
/api/posts
/api/posts/{id}
/api/users
/api/users/{id}
Я думал, сервер отправляет данные по этим роутам, а клиент, в данном случае реакт, их оттуда ловит. Ajax же именно так общается с сервером. Разве в случае с реакт все иначе?

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

Kafkiansky, в случае с React все так же. В ваших суждениях все вроде бы верно, но ничто ничего "не ловит". Взаимодействие происходит по протоколу HTTP/HTTPS в формате запрос-ответ. Данные приходят в теле ответа, по запросу.

Вместо id принято использовать slug. Ваш API должен иметь эндпоинты и по id и по slug.

[kafkiansky]

Антон Спирин, осталось посмотреть на пример кода. Не знаете, где можно такой найти? А то в теории всё вроде понятно, а на деле все равно много вопросов.

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

Kafkiansky, React-Redux Async example with Thunk middleware

У вас проект коммерческий или учебный?

[kafkiansky]

Антон Спирин, стартап на одном энтузиазме. Я только с бэком знаком, симфони и Ларавел, фронт до недавнего времени вообще не любил, использовал только бутстрап. Сейчас встала необходимость делать нормальный фронт, поэтому провожу ликбез по основам клиент-серверного взаимодействия. Спасибо за ссылку, только мне бы крохотный пример организации апи на бэке и рендеринг данных на клиенте. В любом случае спасибо за объяснения, кое-что понял

Answer 2

[Артем Спиридонов]

phpfaq.ru/newbie/na_tanke

https://ru.wikipedia.org/wiki/AJAX

Answer 3

[grinat]

Смотря что ты хочешь, если spa, то вся статика отдается из папки с реактом, от симфони только рест апи, роуты у реста разные. Если nginx, то например все роуты вида /api/bla-bal перенаправлять на симфони, остальные в папку с фронтом.
Если отдельные страницы на реакте, то симфони просто отдает отдельные вьюхи, в этих вьюхах уже реакт.
Если ssr, то тоже самое что в первом абзаце, только все не айпи роуты идут к ноде, та рендерит на сервере html и отдает в браузер вместе с js, с ssr есть смысл заморачиваться если нужна индексация в яндексе, в любом случае это головная боль фронта.

Answer 4

[Андрей Титов]

Как использовать React в Symfony 4?