diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..36c2bf4 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +example/node_modules +example/build diff --git a/ReactJS.php b/ReactJS.php index 7e04267..8877e37 100644 --- 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 new file mode 100644 index 0000000..465c2c4 --- /dev/null +++ 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); + +
getMarkup(); ?>
+ + +- ++ ++ + + + - - + + - diff --git a/example/package.json b/example/package.json new file mode 100644 index 0000000..b733341 --- /dev/null +++ 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 new file mode 100644 index 0000000..ed086ee --- /dev/null +++ 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 b/example/src/table.js similarity index 57% rename from example/table.js rename to example/src/table.js index e3b2f2f..8539951 100644 --- a/example/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 {cell}; + }); + + return {cells}; + }); + 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); - }))); - })))); - }}); \ No newline at end of file + + {rows} +
+ ); + } +});