react/examples/server-rendering/webapp/index.php at master · kalloc/react · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<?php

// Prevent this from handling anything that isn't index.php.
if ($_SERVER["REQUEST_URI"] !== "/" && $_SERVER["REQUEST_URI"] !== "/index.php") {
  return false;
}

// URL to the box running `node server.js`
define('RENDER_SERVER', 'http://localhost:3000/');

function react_component($module, $props) {
  $props_json = json_encode($props);

  // Try to server-render the component if the service is available.
  // If it isn't, no big deal: the client will transparently render
  // the markup!
  $server_markup = @file_get_contents(
    RENDER_SERVER .
      '?module=' .
      urlencode($module) .
      '&props=' .
      urlencode($props_json)
  );

  $container_id = uniqid();
  $container_id_for_js = json_encode($container_id);
  $module_for_js = json_encode($module);

  // Generate the code required to run the component on the client.
  // We assume that the Browserify bundle is loaded in the page already
  // and that you used -r to get a global require() function that provides
  // every $module you may request as well as React.
  // Note that this solution is simple but I don't think it scales to
  // multiple large pages very well. For that you'd be better off using
  // webpack.
  $startup_code = <<<SCRIPT
<script>
  (function() {
    var React = require('react');
    var Component = require($module_for_js);
    React.render(
      React.createElement(Component, $props_json),
      document.getElementById($container_id_for_js)
    );
  })();
</script>
SCRIPT;

  $container_markup = '<div id="' . $container_id . '">' . $server_markup . '</div>';

  return $container_markup . $startup_code;
}
?>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React server rendering example</title>
    <script src="static/bundle.js"></script>
  </head>
  <body>
    Welcome to the React server rendering example. Here is a server-rendered React component:
    <?php echo react_component('./src/App', array('name' => 'Pete')); ?>
  </body>
</html>