reactjs · zpao · Jan 4, 2016 · Nov 16, 2015 · Nov 16, 2015 · Jan 4, 2016
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+example/node_modules
+example/build
diff --git a/ReactJS.php b/ReactJS.php
@@ -51,10 +51,10 @@ class ReactJS {
   function __construct($libsrc, $appsrc) {
     $react = array();
     // stubs, react
-    $react[] = "var console = {warn: function(){}, error: print}";
-    $react[] = "var global = global || this, self = self || this, window = window || this";
+    $react[] = "var console = {warn: function(){}, error: print};";
+    $react[] = "var global = global || this, self = self || this, window = window || this;";
     $react[] = $libsrc;
-    $react[] = "var React = global.React";
+    $react[] = "var React = global.React, ReactDOM = global.ReactDOM, ReactDOMServer = global.ReactDOMServer;";
     // app's components
     $react[] = $appsrc;
     $react[] = ';';
@@ -100,7 +100,7 @@ function setErrorHandler($err) {
    */
   function getMarkup() {
     $js = sprintf(
-      "print(React.renderToString(React.createElement(%s, %s)))",
+      "print(ReactDOMServer.renderToString(React.createElement(%s, %s)))",
       $this->component,
       $this->data);
 
@@ -137,7 +137,7 @@ function getJS($where, $return_var = null) {
     return
       ($return_var ? "var $return_var = " : "") .
       sprintf(
-        "React.render(React.createElement(%s, %s), %s);",
+        "ReactDOM.render(React.createElement(%s, %s), %s);",
         $this->component,
         $this->data,
         $where

diff --git a/example/README.md b/example/README.md
@@ -0,0 +1,44 @@
+# Example
+
+This example uses npm to build a custom library that will be inserted to be used for rendering React. You may want to do something similar in your own project.
+
+## Set up
+
+1. Ensure node and npm are installed
+2. `npm install`
+3. `npm run make`
+
+This will create several files in the `build/` directory. `bundle-react.js` is what will be passed into the `ReactJS` constructor as `libsrc`. It exposes 3 globals: `React`, `ReactDOM`, and `ReactDOMServer`.
+
+## Alternative Approach
+
+This example works by building a single bundle for React exposing 3 globals. Another approach would be to concatenate the existing 3 browser bundles that React ships with. Each of these exposes the necessary globals. Here's how you might change the existing `example.php` to make this work.
+
+```diff
+@@ -14,9 +14,11 @@
+ include '../ReactJS.php';
+
+ $rjs = new ReactJS(
+   // location of React's code
+-  file_get_contents('build/react-bundle.js'),
++  file_get_contents('path/to/react/react.js') .
++    file_get_contents('path/to/react/react-dom.js') .
++    file_get_contents('path/to/react/react-dom-server.js'),
+   // app code
+   file_get_contents('build/table.js')
+ );
+
+@@ -46,9 +48,10 @@ $rjs->setComponent('Table', $data);
+     <!-- 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="path/to/react/react.js"></script>
++    <script src="path/to/react/react-dom.js"></script>
+     <script src="build/table.js"></script>
+
+     <script>
+     // client init/render
+
+```
diff --git a/example/example.php b/example/example.php
@@ -14,11 +14,14 @@
 include '../ReactJS.php';
 
 $rjs = new ReactJS(
-  file_get_contents('../../react/build/react.js'), // location of React's code
-  file_get_contents('table.js')); // app code
+  // location of React's code
+  file_get_contents('build/react-bundle.js'),
+  // app code
+  file_get_contents('build/table.js')
+);
 
 // data to be passed to the component
-$data = 
+$data =
   array('data' => array(
     array(1, 2, 3),
     array(4, 5, 6),
@@ -39,14 +42,14 @@
     <!-- css and stuff -->
   </head>
   <body>
-    
+
     <!-- render server content here -->
-    <div id="page"><?php echo $rjs->getMarkup(); ?></div> 
-    
+    <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 src="build/table.js"></script>
+
     <script>
     // client init/render
     // this is a straight echo of the JS because the JS resources
@@ -57,4 +60,3 @@
     </script>
   </body>
 </html>
-
diff --git a/example/package.json b/example/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "react-php-v8js",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "make": "npm run make-dev && npm run make-min && npm run make-table",
+    "make-dev": "browserify -t [ envify --NODE_ENV development ] src/react-bundle.js > build/react-bundle.js",
+    "make-min": "browserify -t [ envify --NODE_ENV production ] src/react-bundle.js | uglifyjs > build/react-bundle.min.js",
+    "make-table": "babel --presets react src/table.js > build/table.js"
+  },
+  "dependencies": {
+    "babel-cli": "^6.3.17",
+    "babel-preset-react": "^6.3.13",
+    "browserify": "^12.0.1",
+    "envify": "^3.4.0",
+    "react": "^0.14.5",
+    "react-dom": "^0.14.5",
+    "uglifyjs": "^2.4.10"
+  }
+}
diff --git a/example/src/react-bundle.js b/example/src/react-bundle.js
@@ -0,0 +1,4 @@
+// We know we're using browserify which compiles modules with global exposted
+global.React = require('react');
+global.ReactDOM = require('react-dom');
+global.ReactDOMServer = require('react-dom/server');
diff --git a/example/table.js → example/src/table.js b/example/table.js → example/src/table.js
@@ -8,13 +8,18 @@
  */
 var Table = React.createClass({
   render: function () {
+    var rows = this.props.data.map(function (row) {
+      var cells = row.map(function(cell) {
+        return <td>{cell}</td>;
+      });
+
+      return <tr>{cells}</tr>;
+    });
+
     return (
-      React.DOM.table(null, React.DOM.tbody(null,
-        this.props.data.map(function (row) {
-          return (
-            React.DOM.tr(null, 
-              row.map(function (cell) {
-                return React.DOM.td(null, cell);
-              })));
-        }))));
-  }});
+      <table>
+        <tbody>{rows}</tbody>
+      </table>
+    );
+  }
+});