Как соединить react и php

25.11.2023

Как подружить PHP и React JS?

Я только начал изучать Node + React JS, Redux. Полный чайник.
Уважаемые гуру ткните пальцем в решении данной задачи.
Имеется на smarty php не большой сайт недвижимости. Все запросы происходят через базу MYSQL.
Подскажите (если есть такое решение, а лучше примером показать или ссылками на конкретную документацию с примерами) как правильно сделать что в Reacte можно было принимать и отправлять запросы из mysql?

пример:
подключил react

дальше я делаю выборку из базы на smarty php

private function getAgents() < $ret = array(); $DBC = DBC::getInstance(); $query = 'SELECT * FROM ' . DB_PREFIX . '_user WHERE group_id<>4 AND login<>\'_unregistered\' ORDER BY RAND() LIMIT 3'; $stmt = $DBC->query($query); if ($stmt) < while ($ar = $DBC->fetch($stmt)) < $ret[] = $ar; >> $js_obj = json_encode($res); $this->template->assign('agentslist_items', $ret); >

далее вывожу в смарти через foreach, не буду писать полный вывод, скажем так , что в шаблон средствами сматри все отдается.
но если подключить саму переменную $js_obj , то она пустая

Вопрос задан более трёх лет назад
9466 просмотров

Связать react js и php. Возможно?

Начал изучать react js, node js. Такая мысль пришла. Если для, условно говоря, создания сайта, SPA нужны некоторые элементы, и потом просто клиент шлёт аякс к серверу а сервер (выступает в роли API) и отдаёт клиенту json который потом уже обрабатывается java script-ом. API ведь вполне можно реализовать на php? То есть php скрипт будет коннектится например с mysql, получать необходимые данные, формировать json. Но получается что ещё в клиенте нужно сохранять какие-то значения? Например ID который уйдёт аяксом в php и по нему произойдёт выборка. Где на клиенте (и на клиенте ли?) хранить этот ID? Как? Дело в том что JS знаю только примерно на 4 из 10. а вот с php работаю давно и много, но уже одного html, css, php и mysql становиться маловато. И вроде бы после изучения некоторой информации по реакту кажется что не так все и сложно, и мысли как-то расплылись, не могу их собрать воедино, но кажется что очень очень близко к пониманию.

Отслеживать
задан 19 мая 2019 в 9:31
2,362 4 4 золотых знака 32 32 серебряных знака 84 84 бронзовых знака

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Ваш вопрос не совсем понятен. ReactJS — это фронт-энд, PHP — бэк-энд. ReactJS можно привязать к ЛЮБОМУ типу бэк-энда даже если в качестве него будет выступать Java, Python, Ryby и т.д.

На счёт где хранить id: тут выбор большой, начиная от куки и заканчивая localStorage и sessionStorage.

Есть так же CacheStorage и IndexedDb. Как Вы поняли из названия, все они используются для разных целей.

Отслеживать
ответ дан 19 мая 2019 в 9:46
Ramazan Aliskhanov Ramazan Aliskhanov
348 1 1 серебряный знак 9 9 бронзовых знаков

Могу добавить, что когда мы говорим про SPA , мы должны в голове держать и SSR для сео и прочих поисковых плюшек, вот тут у php действительно есть просядки, если сравнивать с той-же нодой (еще держим в уме то что react.js и прочие изначально писались под ноду). т.к. у ноды фронт и бек написаны на одном языке там все легко настраивается и не геморно. а вот у php тут глобальные проблемки. есть костыль в виде V8js для SSR , но нужно уметь хорошо им пользоваться ¯|_(ツ)_/¯

Читать:

Почему робот пылесос крутится на одном месте

19 мая 2019 в 10:13

php
node.js
reactjs

How to connect ReactJS as a front-end with PHP as a back-end ?

Connecting the front end of React with the PHP backend is a classic approach to building a web application with the front end for the user interface and the back end or server side for handling databases, programming logic, and other operations.

React JS

React JS is a declarative, efficient, and flexible JavaScript library for building user interfaces. It’s ‘V’ in MVC. ReactJS is an open-source, component-based front-end library responsible only for the view layer of the application. It is maintained by Facebook.

PHP

The term PHP is an acronym for Hypertext Preprocessor. It is a server-side scripting language that is used for web development. It can be easily embedded with HTML files. HTML codes can also be written in a PHP file.

Prerequisite

Basic knowledge of PHP
Understanding of React JS .
NodeJS

Project Setup

Step 1: Create a React application using the following command:

npx create-react-app folderName

Step 2: After creating your project folder(i.e. folderName), move to it by using the following command:

cd folderName

Step 3: Create a folder named PHP in root to store server files there and create a server.php file.

Project Structure

The project strucuture will look like this.

Example: Create a form in app.js with name input field and submit button linked to the php server and a result component to render output.

Связываем React с другими популярными веб-языками

React — это библиотека, написанная на JavaScript, и поэтому она агностична для любой конфигурации стека и может появляться практически в любом веб-приложении, использующем HTML и JavaScript для своего уровня представления.

Поскольку React работает как часть «V» в «MVC», мы можем создать наш собственный стек приложения исходя из наших собственных предпочтений. До сих пор в этом руководстве мы видели, что React работает с Express, фреймворке Node ES6/JavaScript. Другие популярные связки Node для React — это фреймворк Meteor и Facebook Relay.

Если вы хотите использовать превосходную компонентную JSX-систему от React, виртуальный DOM и его сверхбыстрый рендеринг в вашем существующем проекте, вы можете сделать это, реализовав одно из многих решений с открытым исходным кодом.

PHP

Поскольку PHP является серверным языком сценариев, интеграция с React может осуществляться в нескольких формах:

Использование react-php-v8js
Обработка запроса/ответа на стороне сервера (с маршрутизатором, например, Alto)
Вывод JSON через json_encode()
Обертка шаблонов, например Twig

Рендеринг на стороне сервера

Для рендеринга компонентов React на сервере есть библиотека, доступная в GitHub.

Например, с этим пакетом мы можем сделать следующее в PHP :

// the library

$react_source = file_get_contents('/path/to/build/react.js');

// all custom code concatenated

$app_source = file_get_contents('/path/to/custom/components.js');

$rjs = new ReactJS($react_source, $app_source);

$rjs->setComponent('MyComponent', array(

'any' => 1,

'props' => 2

// print rendered markup

echo '' . $rjs->getMarkup() . '
';

// load JavaScript somehow - concatenated, from CDN, etc

// including react.js and custom/components.js

// init client

echo '';

// repeat setComponent(), getMarkup(), getJS() as necessary

// to render more components

Сила объединения React с любым языком сценариев на стороне сервера — это способность подавать React с данными и применять вашу бизнес-логику как на сервере, так и на стороне клиента. Обновление старого приложения в Reactive приложение никогда еще не было проще!

Использование PHP + Alto Router

Для примера приложения, посмотрите этот репозиторий на GitHub.

Настройте свой AltoRouter следующим образом:

// Router setup

require_once 'include/AltoRouter/AltoRouter.php';

$router = new AltoRouter();

$viewPath = 'views/';

// Router matches

// Manual

$router->map('GET', '/', $viewPath . 'reactjs.html', 'reactjs');

$result = $viewPath . '404.php';

$match = $router->match();

if($match)

$result = $match['target'];

// Return route match

include $result;

При настройке AltoRouter , обслуживающей страницы вашего приложения для указанных маршрутов, вы можете просто добавить свой код React внутри разметки HTML и начать использовать ваши компоненты.

"use strict";

var Comment = React.createClass(

displayName: "Comment",

render: function render()

var rawMarkup = marked(this.props.children.toString(),  sanitize: true >);

return React.createElement(

 className: "comment" >,

React.createElement(

 className: "commentAuthor" >,

this.props.author

React.createElement("span",  dangerouslySetInnerHTML:  __html: rawMarkup > >)

Убедитесь, что вы включили библиотеки React, а также поместите HTML-код в тег body, который будет обрабатываться из вашего приложения PHP AltoRouter , например:

 React Example

 src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.js">

 src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/JSXTransformer.js">

 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js">

 src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js">

 id="myContent">

 type="text/jsx;harmony=true" src="assets/js/main.js">

Пользователи Laravel

Для очень популярного фреймворка Laravel существует библиотека react-laravel, которая позволяет использоваться React.js прямо внутри ваших представлений Blade.

@react_component('Message', [ 'title' => 'Hello, World' ], [ 'prerender' => true ])

Флаг prerender сообщает Laravel о том, чтобы отобразить компонент на стороне сервера, а затем смонтировать его на стороне клиента.

Пример приложения Laravel 5.2 + React

Обратите внимание на этот замечательный репозиторий от Spharian в качестве примера использования Laravel + React.

Чтобы отрендерить ваш React код внутри вашего Laravel, установите источник файлов React внутри тега body index.blade.php , добавив следующие, например:

.NET

Используя фреймворк ReactJS.NET, вы можете легко подключить React в своем приложении .NET.

Установите пакет ReactJS.NET в среду разработки Visual Studio с помощью диспетчера пакетов NuGET для .NET.

Найдите доступные пакеты для «ReactJS.NET (MVC 4 и 5)» и проведите установку. Теперь вы сможете использовать любой код расширения .jsx в своем приложении asp.net.

Добавьте новый контроллер в свой проект, чтобы начать работу с React + .NET, и выберите «Empty MVC Controller» для вашего шаблона. После его создания щелкните правой кнопкой мыши на return View() и добавьте новое представление со следующими данными:

Название: Index
Движок: Razor (CSHTML)
Создание строго типизированного представления: Unticked
Создать как частичный вид: Unticked
Использовать макет или главную страницу: Unticked

Теперь вы можете заменить код по умолчанию следующим:

Layout = null;

 Hello React

 id="content">

 src="https://fb.me/react-15.0.1.js">

 src="https://fb.me/react-dom-15.0.1.js">

 src="@Url.Content("~/Scripts/Example.jsx")">

Теперь нам нужно создать Example.jsx , упомянутый выше, поэтому создайте файл в своем проекте и добавьте в него JSX следующим образом:

var CommentBox = React.createClass(

render: function()

return (

div className="commentBox">

Hello, world! I am a CommentBox.

ReactDOM.render(

CommentBox />,

document.getElementById('content')

Теперь, если вы нажмете Play в своей среде Visual Studio IDE, вы должны увидеть пример Hello World.

Вот подробное руководство по написанию компонента для asp.net.

Rails

Используя react-rails , вы можете легко добавить React в любое приложение Rails (3.2+). Чтобы начать, просто добавьте gem:

gem 'react-rails', '~> 1.7.0'

bundle install

Теперь вы можете запустить скрипт установки:

rails g react:install

Это приведет к двум вещам:

Файл манифеста components.js в app/assets/javascripts/components/ ; Вот где вы поместите все свои компоненты.
Добавьте следующее в application.js :

//= require react

//= require react_ujs

//= require components

Теперь .jsx -код будет рендеринться, и вы можете добавить блок React к вашему шаблону, например так:

 react_component('HelloMessage', name: 'John') %>

 data-react-class="HelloMessage" data-react-props="">

Ruby JSX

Babel лежит в основе реализации Ruby react-rails gem и может быть сконфигурирован так:

config.react.jsx_transform_options =

blacklist: ['spec.functionName', 'validation.react', 'strict'], # default options

optional: ["transformerName"], # pass extra babel options

whitelist: ["useStrict"] # even more options

После того, как react-rails будет включен в проект, перезапустите сервер, и любые файлы .js.jsx будут преобразованы в ваши ресурсы.

Для получения дополнительной информации о react-rails обратитесь к официальной документации.

Python

Чтобы установить python-react , используйте pip:

pip install react

Теперь вы можете визуализировать код React с помощью приложения Python, указав путь к вашим компонентам .jsx и запуская приложение с рендерингом на сервере. Обычно это отдельный процесс Node.js .

Чтобы запустить сервер рендеринга, следуйте этому краткому руководству.

Теперь вы можете запустить свой сервер так:

node render_server.js

Запустите приложение python:

python app.py

И загрузите http://127.0.0.1:5000 в браузере, чтобы увидеть рендеринг кода React.

Django

Добавьте react в ваш INSTALLED_APPS и укажите некоторую конфигурацию следующим образом:

INSTALLED_APPS = (

'react',

REACT =

'RENDER': not DEBUG,

'RENDER_URL': 'http://127.0.0.1:8001/render',

Meteor

Чтобы добавить React в проект meteor, сделайте это через:

meteor npm install --save react react-dom

Затем в client/main.jsx добавьте следующие, например:

import React from 'react';

import  Meteor > from 'meteor/meteor';

import  render > from 'react-dom';

import App from '../imports/ui/App.jsx';

Meteor.startup(() =>

render(, document.getElementById('render-target'));

Это создает экземпляр React компонента App , который вы определите в import/ui/App.jsx , например:

import React,  Component > from 'react';

import Headline from './Headline.jsx';

// The App component - represents the whole app

export default class App extends Component

getHeadlines()

return [

 _id: 1, text: 'Legalisation of medical marijuana goes worldwide!' >,

 _id: 2, text: 'Matt Brown goes inside the cult of scientology' >,

 _id: 3, text: 'The deep web: A criminals dream or fascinating freedom?' >,

renderHeadlines()

return this.getHeadlines().map((headline) => (

key=headline._id> headline=headline> />

render()

return (

className="container">

The latest headlines

this.renderHeadlines()>

Внутри Headline.jsx вы используете следующий код:

import React, < Component, PropTypes >from 'react';

// Headline component - this will display a single news headline item from a iterated array

export default class Headline extends Component 
render() 
return (
Headline.propTypes = 
// This component gets the headline to display through a React prop.
// We can use propTypes to indicate it is required
headline: PropTypes.object.isRequired,
Метеор готов к использованию совместно с React и имеет официальную документацию.
Больше никаких >
Важно отметить: при использовании Meteor с React система шаблонов по умолчанию > больше не используется, поскольку она перестает работать из-за того, что в проекте присутствует React.
Поэтому вместо использования TemplateName>> или Template.templateName для помощников и событий в вашем JS вы определите все в компонентах View, которые являются подклассами React.component .
Вывод
React может использоваться практически в любом языке, который использует слой представления HTML. Преимущества React могут быть полностью использованы множеством потенциальных программных продуктов.
React реализует слой UI View на основе компонентов. Работая логически с любым стеком, мы имеем универсальный язык интерфейса, который могут использовать дизайнеры во всех аспектах веб-разработки.
React объединяет интерфейсы наших проектов во всех развертываниях, независимо от ограничений устройства или платформы. Также с точки зрения фриланса, работы с клиентами или наоборот внутри внутри крупных организаций, React обеспечивает повторное использование кода для ваших проектов.
Вы можете создавать свои собственные специализированные библиотеки компонентов и сразу использовать их в новых проектах или обновлять старые, быстро и легко создавать полностью отзывчивые изометрические интерфейсы приложений.
React является важной вехой в веб-разработке, и он может стать важным инструментом в любой коллекции разработчика. Не отставайте.

Предыдущая запись

Как соединить php и html

Следующая запись