2017 © Pedro Peláez
 

library reactjs-php-bridge

image

yoshz/reactjs-php-bridge

  • Wednesday, January 27, 2016
  • by yoshz
  • Repository
  • 1 Watchers
  • 1 Stars
  • 3 Installations
  • PHP
  • 0 Dependents
  • 0 Suggesters
  • 1 Forks
  • 0 Open issues
  • 1 Versions
  • 50 % Grown

The README.md

ReactJs PHP Bridge

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., (*1)

Prerequisites

You need the V8Js PHP extension to run this library., (*2)

To install this extension follow the official installation guides: * On Linux * On MacOS * On Windows, (*3)

You can also use one of my Docker images: * php-fpm-v8js * php-fpm-v8js-dev, (*4)

Installation

  • Require package the package in your project:
    composer require yoshz/reactjs-php-bridge
  • Install react.js using bower:
    bower install --save react

Usage

Using the renderer directly:, (*5)

$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:, (*6)

$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:, (*7)

<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>

Credits

This library is inspired by the reactjs/react-php-v8js library., (*8)

The Versions

27/01 2016

dev-master

9999999-dev

  Sources   Download

The Requires

  • ext-v8js >=0.1.3

 

The Development Requires

by Yosh de Vos