How to reactize PHP

Beka Tom
Beka Tom
Sep 18, 2016 · 2 min read

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.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store