Update the examples for 0.13

The only substantial difference here is that I made the harmony example use ES6 classes. The server rendering example was pretty wacky and hard to run but I did confirm that it works.
kumfo · Mar 10, 2015 · ce66a79 · ce66a79
1 parent ee019d6
commit ce66a79
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 15 deletions.
diff --git a/examples/basic-commonjs/package.json b/examples/basic-commonjs/package.json
@@ -5,7 +5,7 @@
   "devDependencies": {
     "browserify": "^6.3.3",
     "envify": "^3.2.0",
-    "react": "^0.12.0",
+    "react": "^0.13.0",
     "reactify": "^0.17.1"
   },
   "scripts": {

diff --git a/examples/basic-jsx-harmony/index.html b/examples/basic-jsx-harmony/index.html
@@ -2,11 +2,11 @@
 <html>
   <head>
     <meta http-equiv='Content-type' content='text/html; charset=utf-8'>
-    <title>Basic Example with JSX with Harmony</title>
+    <title>Basic Example with JSX and ES6 features</title>
     <link rel="stylesheet" href="../shared/css/base.css" />
   </head>
   <body>
-    <h1>Basic Example with JSX with Harmony</h1>
+    <h1>Basic Example with JSX and ES6 features</h1>
     <div id="container">
       <p>
         To install React, follow the instructions on
@@ -26,7 +26,7 @@ <h4>Example Details</h4>
     <script src="../../build/react.js"></script>
     <script src="../../build/JSXTransformer.js"></script>
     <script type="text/jsx;harmony=true">
-      var ExampleApplication = React.createClass({
+      class ExampleApplication extends React.Component {
         render() {
           var elapsed = Math.round(this.props.elapsed  / 100);
           var seconds = elapsed / 10 + (elapsed % 10 ? '' : '.0' );
@@ -35,7 +35,7 @@ <h4>Example Details</h4>
 
           return <p>{message}</p>;
         }
-      });
+      }
       var start = new Date().getTime();
       setInterval(() => {
         React.render(

diff --git a/examples/server-rendering/jsapp/package.json b/examples/server-rendering/jsapp/package.json
@@ -9,8 +9,8 @@
   },
   "dependencies": {
     "envify": "^3.0.0",
-    "react": "^0.12.0",
+    "react": "^0.13.0",
     "browserify": "^3.38.0",
-    "reactify": "^0.15.0"
+    "reactify": "^1.0.0"
   }
 }
diff --git a/examples/server-rendering/reactserver/package.json b/examples/server-rendering/reactserver/package.json
@@ -9,7 +9,7 @@
   },
   "dependencies": {
     "envify": "^3.0.0",
-    "react": "^0.12.0",
+    "react": "^0.13.0",
     "express": "^3.5.1",
     "node-jsx": "^0.12.0"
   }

diff --git a/examples/server-rendering/reactserver/server.js b/examples/server-rendering/reactserver/server.js
@@ -17,7 +17,7 @@ app.get('/', function(req, res) {
   var component = require(path.resolve(req.query.module));
   var props = JSON.parse(req.query.props || '{}');
 
-  res.send(React.renderToString(component(props)));
+  res.send(React.renderToString(React.createElement(component, props)));
 });
 
 app.listen(3000);
diff --git a/examples/server-rendering/webapp/index.php b/examples/server-rendering/webapp/index.php
@@ -1,5 +1,10 @@
 <?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/');
 
@@ -18,6 +23,8 @@ function react_component($module, $props) {
   );
 
   $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
@@ -26,12 +33,18 @@ function react_component($module, $props) {
   // 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>require(\'react\').render(require(' .
-    json_encode($module) .
-    ')(' . $props_json . '), ' .
-    'document.getElementById(' . json_encode($container_id) . '))' .
-    '</script>';
+  $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>';