<div
data-component="ComponentName"
data-component-props='{ "id": "123", "foo": "bar" }'
>
</div>// псевдо-код
const el = получили элемент с data-component="ComponentName" или с каким-то id и т.д.
const props = спарсили пропсы из атрибута
const app = отрендерили React-компонент в этом жлементе передав ему пропсы<div class="vue-widget">
Достаточно ли просто создать div#catalog и рендерить в него компоненты реакта?
<html>
<head>
<title>PHP React Test</title>
<script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<?php
$INIT_PARAMS = ['user' => 'Vasilij']; // данные из PHP
echo '<p>Hello React App</p>';
?>
<div id='react-app'></div>
// React-component. Конечно, лучше вынести в отдельный файл, если кода много.
// Еще лучше скомпилировать и подключить минифицированный бандл. Здесь - концептуальный пример.
<script type="text/babel">
'use strict';
const {useState} = React;
function App({user}) {
const [liked, setLiked] = useState(false);
return (
liked ? (`You (${user}) liked this.`) : (
<button onClick={() => setLiked(true)}>
Like
</button>
)
)
}
const domContainer = document.querySelector('#react-app');
ReactDOM.render(<App user={'<?=$INIT_PARAMS['user']?>'}/>, domContainer);
</script>
</body>
</html>И как быть с SEO в таком случае?
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use Illuminate\Support\Facades\Auth;
class AdJob extends Component {
public $adJob;
public function mount($adJobId) {
$this->adJob = \App\Models\AdJob::find( $adJobId );
}
public function setReleaserForAdJob($releaserId) {
$this->adJob['releaser_id'] = $releaserId;
$this->adJob['status'] = 'in_progress';
$this->adJob->save();
}
public function setAdJobDone() {
$this->adJob['status'] = 'done';
$this->adJob->save();
}
public function render() {
return view('livewire.ad-job-with-reviews');
}
}res.send(ReactDOMServer.renderToString(myElement)) - получаем нечто вроде создания "шаблона" (res.send - API express, остальное - react)const html = ReactDOMServer.renderToString(app);
Простой
Простой
Средний
Средний
Простой
Простой
Простой