From 05637dbb62fa139b7edacfaf782341d9c9e8c34f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Paul=20O=E2=80=99Shannessy?= Date: Mon, 16 Nov 2015 11:05:59 -0800 Subject: [PATCH 1/3] Use current React APIs --- ReactJS.php | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) 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 From cdb15ccb48ecaec6f1e0659680291a2ecdc5e02c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Paul=20O=E2=80=99Shannessy?= Date: Mon, 16 Nov 2015 11:06:44 -0800 Subject: [PATCH 2/3] Update example to build & use compiled React bundle, JSX --- .gitignore | 2 ++ example/README.md | 11 +++++++++++ example/example.php | 20 +++++++++++--------- example/package.json | 20 ++++++++++++++++++++ example/src/react-bundle.js | 4 ++++ example/{ => src}/table.js | 23 ++++++++++++++--------- 6 files changed, 62 insertions(+), 18 deletions(-) create mode 100644 .gitignore create mode 100644 example/README.md create mode 100644 example/package.json create mode 100644 example/src/react-bundle.js rename example/{ => src}/table.js (57%) 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/example/README.md b/example/README.md new file mode 100644 index 0000000..72ea6af --- /dev/null +++ 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 index d9d5f27..c6ba5f5 100644 --- 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 @@ - + -
getMarkup(); ?>
- +
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} +
+ ); + } +}); From 11d47d632646422416bae5e2b4595cb060e4c758 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Paul=20O=E2=80=99Shannessy?= Date: Mon, 4 Jan 2016 10:54:08 -0800 Subject: [PATCH 3/3] Add documentation for non-bundle approach Just in case... The bundle approach is preferred since a build step will likely be necessary regardless and can be integrated into other processes. --- example/README.md | 33 +++++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) diff --git a/example/README.md b/example/README.md index 72ea6af..465c2c4 100644 --- a/example/README.md +++ b/example/README.md @@ -9,3 +9,36 @@ This example uses npm to build a custom library that will be inserted to be used 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(); ?>
+ + +- ++ ++ + + +