Update example to build & use compiled React bundle, JSX

zpao · zpao · commit cdb15ccb48ec · 2016-01-04T10:53:42.000-08:00
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+example/node_modules
+example/build
diff --git a/example/README.md b/example/README.md
@@ -0,0 +1,11 @@
+# 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`.
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/src/table.js b/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>
+    );
+  }
+});

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+example/node_modules`
	`2`	`+example/build`