This library integrates react.js in PHP using the v8js extension to allow server-side rendering. It also contains a Twig extension to embed react component rendering inside Twig templates.
You need the V8Js PHP extension to run this library.
To install this extension follow the official installation guides:
You can also use one of my Docker images:
- Require package the package in your project:
composer require yoshz/reactjs-php-bridge- Install react.js using bower:
bower install --save react Using the renderer directly:
$reactjs = new \ReactJsBridge\Renderer(array(
'react_path' => __DIR__ . /bower_components/react',
'app_paths' => array(
__DIR__ . '/app'
)
));
?>
<html>
<head>
<script src="bower_components/react/react.min.js"></script>
<script src="bower_components/react/react-dom.min.js"></script>
</head>
<body>
<main>
<?= $reactjs->getComponentMarkup('HelloWorld') ?>
</main>
// initialize client-side javascript
<script><?= $reactjs->getClientJs() ?></script>
</body>
</html>Or using the Twig extension:
$reactjs = new \ReactJsBridge\Renderer(array(
'react_path' => __DIR__ . /bower_components/react',
'app_paths' => array(
__DIR__ . '/components'
)
));
$ext = new \ReactJsBridge\TwigExtension($reactjs);
$loader = new \Twig_Loader_Filesystem(__DIR__ . '/templates');
$twig = new \Twig_Environment($loader);
$twig->addExtension($ext);
echo $twig->loadTemplate('helloworld.html.twig')->render();And the Twig file templates/helloworld.html.twig:
<html>
<head>
<script src="bower_components/react/react.min.js"></script>
<script src="bower_components/react/react-dom.min.js"></script>
</head>
<body>
<main>
{{ reactjs_component('HelloWorld') }}
</main>
{{ reactjs_clientjs() }}
</body>
</html>This library is inspired by the reactjs/react-php-v8js library.