public function indexAction()
{
$react_source = file_get_contents(__DIR__ . '/../web/js/react.js');
$app_source = file_get_contents(__DIR__ . '/../web/js/components.js');
$rjs = new ReactJS($react_source, $app_source);
$rjs->setComponent('Timer', array('startTime' => time()));
$output = '
<html>
<head>
<title>Epoch at server</title>
<script src="/js/react.js"></script>
<script src="/js/components.js"></script>
</head>
<body>
<h1>Epoch server time</h1>
<h2>Client side only</h2>
<div id="client"></div>
<h2>Server side with a two second client detach</h2>
<div id="server">' . $rjs->getMarkup() . '</div>
<script>
' . $rjs->getJS("#client") . '
setTimeout(function(){
' . $rjs->getJS("#server") . '
}, 2000);
</script>
</body>
</html>
';
$response = new Response($output);
return $response;
}
// Then you can set another component to render
// and do that as many times as the components you need
// all the while reusing the $rjs instance
$rjs->setComponent('Table', $data);
?>
<!doctype html>
<html>
<head>
<title>React page</title>
<!-- css and stuff -->
</head>
<body>
<!-- render server content here -->
<div id="page"><?php
echo $rjs->getMarkup();
?>
</div>
<!-- load react and app code -->
<script src="react/build/react.min.js"></script>
<script src="react/build/table.js"></script>
<script>
// client init/render
// this is a straight echo of the JS because the JS resources
// were loaded synchronously
// You may want to load JS async and wrap the return of getJS()
// in a function you can call later
<?php
echo $rjs->getJS('#page', "GLOB");
