How to reactize PHP

Sometimes as developers we are obliged to work with old projects
that are written with old methodologies and techniques
We are eager to use some cutting edge tech stack but to rewrite project completely it’s impossible and involves a lot effort.
In this example I want to show how to begin splitting and migrating big old project to new tech stack.
Let’s start to create new standalone React.js components which I want to use in project ( I thought that we already know how to write React.js components)

First of all we need node.js app for rendering new react.js components.
I am calling it “render as service”. For this sample i am using express.js app but you can use any FW that you like.

App.js

'use strict';
var express = require('express');
var app = express();
var React = require('react');
var ReactDOMServer = require('react-dom/server');
var path = require('path');

// folder where our react.js components is located
REACT_DIR = '/reactjs/components_folder/'

app.get('/render/:view_name', function (req, res) {

try {

var view = path.resolve(REACT_DIR + req.params.view_name);
var component = require(view).default;

var props = req.body || null;
res.status(200).send(
ReactDOMServer.renderToString(
React.createElement(component, props)
)
);

} catch (err) {

res.send(err);
}



});

app.listen(3000, function () {
console.log('Example app listening on port 3000!');
});

RectHelper.class.php : PHP helper class for calling render as service with guzzle client

use GuzzleHttp\Client;
class ReactHelper
{
private static $initialized = false;
private static $client;
private static function initialize()
{
if (self::$initialized)
return self::$client;
global $configArr;
self::$client = new Client(['base_uri' => $configArr['node_stock_host'], 'verify' => false]);
self::$initialized = true;
return self::$client;
}

public static function render_component($render_url){
$c = self::initiaalize();
$response = $c->get($render_url);
$contents = $response->getBody()->getContents();
return $contents;
}
}

Now in our project where we need to render this new React.js component
we can call this render_component method from ReactHelper class
In my case I have smarty template engine and now I am passing rendered components to smarty.

$smarty->assign('footer',ReactHelper::render_component('/client/footer/footer'));

Now I have variable $footer, which I can use in my html

<div> {$footer} </div>

So that’s it, this way we can slowly eat big complex php application.
p.s : Fill free if you have any questions.

Show your support

Clapping shows how much you appreciated Beka Tomashvili’s story.