Как с помощью php отдать react?
Суть вопроса в заголовке.
Много лет пишу на php. Когда нужна интерактивность - делал вкрапления jQuery в html. Наткнулся на мнение что jQuery уже в прошлом, его теснят фреймворки типа react. Решил почитать за этот react. Основы то понятно, строится целый проект сразу на react, весь фронт рисует js посредством react.
Но мне не понятно как это всё добро можно отдать пользователю с бекенда. По умолчанию во всех примерах пользователю вываливается сразу весь react проект. Но... Так можно только банальный лендинг сделать. Как поступить если например, пользователь пришёл с определенного ip и ему нужно отдать 404й редирект (сделать вид что файлов в принципе нет), а если с другого ip то запросить логинпароль и отдать этот самый react.
Я что то упускаю на концептуальном уровне.
Гуглопоиск не помог, по моему вопросу он выдаёт связки react->api->php, это совсем другое.
Дополнительно:
Это совсем то. Реактивные фреймворки используют бэкенд только как API: послал запрос - получил данные - изменил страницу в соответствии. В том числе - сами обрабатывают ответы с ошибками 50х и 40х.
2. можно вместо jquery использовать какой нибуь alpinejs
Их необязательно тянуть через API.
Например: есть админка написанная на реакте. Сторонний пользователь может туда зайти получается. Он ознакомится с элементами (увидит какие средства администрирования имеются), но у него не будет только данных которые api не отдаст стороннему пользователю и грубо говоря кнопочки работать не будут.
Надо разделить приложение на фронт и бэк в таком случае.
React, vue, angular, svelte делят приложение на компоненты. Вся страница это один большой компонент (внутри него маленькие) и для переключения этих компонентов используются route библиотеки. Они даже меняют url в адресной строке, но по факту сервер отдаёт один и тот же html, js, css, а какой компонент отобразить решает route библиотека уже на клиенте. Можно рендерить js на сервере с помощью next.js, но это другая история.
PHP здесь уже в связке с каким нибудь symphony отдаёт ТОЛЬКО объекты JSON. Позволяет создать объект, удалить, изменить, получить и прочая логика. Бэк связан с базой данных. Обычно для удобства к нему кидают Swagger или OpenAPI. Я здесь описываю REST API. Можешь реализовать gRPC или GraphQL
Чтобы с бэка получить данные на фронт юзают такие библиотеки как redux (для react), так называемые state менеджеры. Бэк ничего не знает о фронте! Вместо react приложения работающего в браузере можно мобильное или нативное приложение разработать без изменений в бэкенде.
А деплоиться это всё может так:
Берёшь веб-серевр (apache2 как пример). Настраиваешь reverse-proxy. Он обслуживает порт 80 или 443. Задача его перенаправлять запросы, например в docker контейнер, где у тебя задеплоен PHP на порт 3001 например, которые начинаются с domain.com/api. Всё остальное летит на другой docker контейнер с ip 3002 где у тебя задеплоен фронт. Можно конечно ещё запариться. Так как фронт у нас это html, js и css + картинки и это статика, то его можно на CDN закинуть и получать за мгновение из любой точки мира. А бэк это "лёгкий" (в сравнении с фронтом) JSON.
Заметь фронт и бэк разные сущности. Фронт знает о бэке, а бэк о фронте нет.
Так что отдавать react через php ненужно
Ответы:
Как я уже не раз говорил, чтобы получить ответ на свой вопрос, надо сначала разобраться с кашей у себя голове.
Вас же на первом же шаге унесло не туда.
jQuery уже в прошлом
это правда
его теснят фреймворки типа react
а это уже чушь собачья
jQuery - это был костыль, позволявший выполнять определенные задачи, которые было невозможно или слишком сложно выполнить на чистом JavaScript. Но уже больше 10 лет нужда в этом костыле полностью отпала
К фреймворкам типа React этот костыль не имеет никакого отношения вообще.
Для замены jQuery вам нужно просто выучить Яваскрипт.
Реакт же - это, условно говоря, способ построения приложения. Его можно учить, а можно не учить. Вы можете продолжать использовать обычный подход, когда HTML рендерится на сервере в ответ на каждый запрос.
При использовании реакта, сначала загружаются его статические файлы. обычно это делается через отдельный веб-сервер, на котором крутится приложение, написанное на js. и эту вашу проверку можно делать там.
но в принципе вы можете отдавать их и РНР скриптом. HTML отдавать через РНР умеете? Ну вот и отдавайте.
Но повторюсь, это только если вам действительно нужен реакт. А для замены jquery он не нужен.
404й редирект
для начала, такой вещи, как "404й редирект" в природе не существует.
Бывает либо редирект (коды ответа 3хх), либо 404. Два НТТР статуса вы никогда не отдадите.
при этом сама по себе дурацкая задача "если пользователь пришёл с определенного ip и ему нужно отдать 404" вообще никакого отношения к обсуждаемому вопросу не имеет. И решать ее по-хорошему надо на уровне веб-сервера. Если вообще надо, в чем есть большие сомнения.
- Все конечно верно, но ответа в вашем спиче нет.
- Резюмирую:
Начал использовать jQuery чтоб не писать простыни кода на js. Теперь уже jQuery не в почёте, от него нужно отказаться и писать простыни кода на js как я это делал 2000х. Верно? - Нет. Чтобы не писать "простыни кода", надо сначала научиться читать по-русски и прочесть ответ ещё раз. А потом выучить яваскрипт :)
- Ипатьев, мне на глаза попался htmx) теперь ни jQuery ни js не нужны. Почему я раньше этого не видел....
Все просто: с помощью пхп отдаешь клиенту пустой html в котором есть подключение app.js и в боди html есть что то типа
По крайней мере на вью так.
Есть и другой подход. Пхп вообще не участвует в генерации штмл, он написан один раз, статически, отдает его клиенту nginx.
Проверка ip средствами веб сервера, но если хочется пхп - проверяешь и отдаешь 404 без 'div id=app
- Проверка ip - для примера указал.
С кейсом когда php отдаёт html с app.js - тут как понимаю, если php его не отдал, то ничего не мешает ручками запросить его?
На проде обычно js код приложения проходит обфускацию и минификацию, понятно что это от не гарантия, но просто так открыть код и причитать не получится.
В SPA всё приложение отдается целиком, дальше общается с бэком через api, получая только данные, в зависимости от состояния и полученных данных приложение отображает информацию. Т.е. в приложении изначально данных нет. Более того, приложение не обязательно должно общаться только с одним бэкм(доменом), оно может слать запросы куда угодно, где будут готовы дать ему ответ, таким образом реализуется структура микросервисов, когда каждый сервис выполняет свою задачу независимо от другого. Например учётные записи пользователей, номенклатура, остатки и цены, заказы - это всё могут быть независимые сервисы.
Если не хотите всем подряд светить js файл с аппом, сделайте стандартную страницу авторизации на php, авторизованным пользователям в ответ отдавайте js файл приложения, который после получения будет запускаться.
Обычно люди использующие php выбирают vue.js, для laravel существует inertia.js роутинг происходит на php
Много лет пишешь на php и задаёшь такие вопросы? Ты что, windows forms на php писал?
Писать надо так, чтобы было не важно, что на бэке. Просто я удивлён что ты не слышал о rest api...
- Вы считаете себя ясновидящим, телепатом? С чего вы взяли что я не слышал о rest api?
Если это готовый react проект, то на него можно переадресовывать какой то из роутов в php (например, /you-react-project). При обращении по корневому пути "/" можно делать все необходимые проверки(пользователь, ip) и переадресацию средствами php.
Но так же можно встроить реакт элементы на страницу, генерируемую на php. Почти также как в случае модификации DOM из jQuery. Надо просто в скриптах указать js файл, в котором через createRoot выбрать любой подходящий элемент, который будет "дополнятся" реактом.
- А пользователь в таком случае не заходя на "/" разве не сможет сам зайти на "/you-react-project"? Просто ручками вбив адрес
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы использовать React вместе с PHP, необходимо учитывать несколько важных моментов. React является библиотекой JavaScript, поэтому PHP и React работают на разных уровнях - серверном и клиентском соответственно. Однако, можно комбинировать PHP и React, чтобы создать динамические и интерактивные веб-приложения.
Вот несколько способов, как можно отдать React с помощью PHP:
1. Использование API: Вы можете создать API с помощью PHP, который будет взаимодействовать с вашим сервером и базой данных. Затем на клиентской стороне с помощью React вы можете делать запросы к этому API и отображать полученные данные.
```php
query("SELECT * FROM users"); $data = array(); while ($row = $result->fetch_assoc()) { $data[] = $row; } echo json_encode($data); ?>
```
2. Использование шаблонизаторов: Вы можете использовать PHP шаблонизаторы, такие как Twig или Blade, чтобы генерировать HTML код с React компонентами. Например, вы можете создать шаблон HTML страницы с React компонентом, который будет отображать данные.
```php
<title>React App</title> <div id="root"></div><title>React App</title> <div id="root"></div>
```
3. Использование AJAX запросов: Вы можете делать AJAX запросы с помощью JavaScript (или jQuery) на сервер, где будет исполняться PHP скрипт, который вернет данные для React компонентов.
```php
'Hello from PHP'); echo json_encode($data); } ?>
```
Итак, вы можете комбинировать PHP и React для создания мощных и интерактивных веб-приложений. Убедитесь, что вы понимаете основы работы PHP и React, а также умеете правильно настроить их взаимодействие друг с другом.