ReactJs и НЕ SPA

#reactjs #spa

Можно ли ReactJs использовать не в SPA приложениях? Т.е., рендер html производит
сервер (PHP), а React только для динамических интерфейсов над этим отрендеренным сервером
представлением - что то вроде, как сейчас с jQuery.

На первый взгляд не вижу развития такого сценария, потому что вроде если сервер будет
рендерить html, то представление срендеренное на сервере должно иметь точное соответствие
с тем представлением, которое рендерит компонент ReactJs и получается, что как минимум
поддерживать одинаковый рендеринг html на сервере и на клиенте в ReactJs будет ужасно. 

Изоморфное приложение - это вроде тоже SPA, с рендерингом на сервере средствами ReactJs,
а меня интересует именно та ситуация, когда типовой рендеринг html на сервере средствами
(php) и динамика на стороне клиента - как это было раньше через jQuery. 

Можно ли как-то реализовать это с ReactJs?
    

Ответы

Ответ 1

Можно и нужно :) Хоть и поначалу очень непривычно.

Основа React - компоненты, а не приложения целиком. Компонент содержит в себе логику
для генерации его отображения в виде html(метод render()), хранит свойства и дочерние
компоненты, а так же получает и обрабатывает внешние и внутренние события.

Вас абсолютно никто не заставляет делать типичный для SOA гигантский компонент "приложение",
использующий абсолютно все написанные вами компоненты, и отоброжающийся на всю площадь
страницы. Никто не навязывает использование маршрутизации - react-route поставляется
как отдельный, независимый пакет. 

Основная стратегия при переходе с других библиотек, и вообще при разработке с использованием
React - начинать писать компоненты для самых низкоуровневых элементов интерфейса, постепенно
включая их в состав более крупных.

Всё очень просто:


Ваш бекенд выдаёт статичную html-страничку
В фронтенде пишете React-компоненты для самых небольших частей приложения - кнопочек,
переключателей, полей ввода, блоков для отображения и т.д - для всего, чему нужно добавить
"динамичность". 
Из статичных html-элементов извлекаете нужные вам значения, и рендерите  React-компоненты
прямо вместо этих элементов, передавая извлеченные значения в конструктор.