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;
}
* of patent rights can be found in the PATENTS file in the same directory.
*/
/**
* Example of using the ReactJS class
*/
include '../ReactJS.php';
$rjs = new ReactJS(file_get_contents('../../react/build/react.js'), file_get_contents('table.js'));
// app code
// data to be passed to the component
$data = array('data' => array(array(1, 2, 3), array(4, 5, 6), array(7, 8, 9)));
// set the component and its data
// after this you can call getMarkup()/getJS()
// 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>
<?php
ini_set("v8js.flags", "--harmony");
require './react-php-v8js/ReactJS.php';
$react = file_get_contents('https://fb.me/react-0.13.0.min.js');
$component = file_get_contents('./simple.js');
$rjs = new ReactJS($react, $component);
$rjs->setComponent('Simple');
echo $rjs->getMarkup();
echo "\n\n";
/**
* Render a ReactJS component
*
* @param string $component Name of the component object
* @param array $props Associative array of props of the component
* @param array $options Associative array of options of rendering
*
* @return string
*/
public function render($component, $props = null, $options = array())
{
$options = array_merge($this->defaultOptions, $options);
$tag = $options['tag'];
$markup = '';
// Creates the markup of the component
if ($options['pre_render'] === true) {
$markup = $this->react->setComponent($component, $props)->getMarkup();
}
// Pass props back to view as value of `data-react-props`
$props = htmlentities(json_encode($props), ENT_QUOTES);
// Gets all values that aren't used as options and map it as HTML attributes
$htmlAttributes = array_diff_key($options, $this->defaultOptions);
$htmlAttributesString = $this->arrayToHTMLAttributes($htmlAttributes);
return "<{$tag} data-react-class='{$component}' data-react-props='{$props}' {$htmlAttributesString}>{$markup}</{$tag}>";
}