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");