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.
Paul O’Shannessy committed
Mar 9, 2015 at 18:15 UTC
ce66a796eed47df6e310be5f0457b4268bd9d4d8
6 files changed
+28
-15
examples/basic-commonjs/package.json
+1
-1
@@ -5,7 +5,7 @@
5
"devDependencies": {
6
"browserify": "^6.3.3",
7
"envify": "^3.2.0",
8
- "react": "^0.12.0",
8
+ "react": "^0.13.0",
9
"reactify": "^0.17.1"
10
},
11
"scripts": {
examples/basic-jsx-harmony/index.html
+4
-4
@@ -2,11 +2,11 @@
2
<html>
3
<head>
4
<meta http-equiv='Content-type' content='text/html; charset=utf-8'>
5
- <title>Basic Example with JSX with Harmony</title>
5
+ <title>Basic Example with JSX and ES6 features</title>
6
<link rel="stylesheet" href="../shared/css/base.css" />
7
</head>
8
<body>
9
- <h1>Basic Example with JSX with Harmony</h1>
9
+ <h1>Basic Example with JSX and ES6 features</h1>
10
<div id="container">
11
<p>
12
To install React, follow the instructions on
@@ -26,7 +26,7 @@
26
<script src="../../build/react.js"></script>
27
<script src="../../build/JSXTransformer.js"></script>
28
<script type="text/jsx;harmony=true">
29
- var ExampleApplication = React.createClass({
29
+ class ExampleApplication extends React.Component {
30
render() {
31
var elapsed = Math.round(this.props.elapsed / 100);
32
var seconds = elapsed / 10 + (elapsed % 10 ? '' : '.0' );
@@ -35,7 +35,7 @@
35
36
return <p>{message}</p>;
37
}
38
- });
38
+ }
39
var start = new Date().getTime();
40
setInterval(() => {
41
React.render(
examples/server-rendering/jsapp/package.json
+2
-2
@@ -9,8 +9,8 @@
9
},
10
"dependencies": {
11
"envify": "^3.0.0",
12
- "react": "^0.12.0",
12
+ "react": "^0.13.0",
13
"browserify": "^3.38.0",
14
- "reactify": "^0.15.0"
14
+ "reactify": "^1.0.0"
15
}
16
}
examples/server-rendering/reactserver/package.json
+1
-1
@@ -9,7 +9,7 @@
9
},
10
"dependencies": {
11
"envify": "^3.0.0",
12
- "react": "^0.12.0",
12
+ "react": "^0.13.0",
13
"express": "^3.5.1",
14
"node-jsx": "^0.12.0"
15
}
examples/server-rendering/reactserver/server.js
+1
-1
@@ -17,7 +17,7 @@ app.get('/', function(req, res) {
17
var component = require(path.resolve(req.query.module));
18
var props = JSON.parse(req.query.props || '{}');
19
20
- res.send(React.renderToString(component(props)));
20
+ res.send(React.renderToString(React.createElement(component, props)));
21
});
22
23
app.listen(3000);
examples/server-rendering/webapp/index.php
+19
-6
@@ -1,5 +1,10 @@
1
<?php
2
3
+// Prevent this from handling anything that isn't index.php.
4
+if ($_SERVER["REQUEST_URI"] !== "/" && $_SERVER["REQUEST_URI"] !== "/index.php") {
5
+ return false;
6
+}
7
+
8
// URL to the box running `node server.js`
9
define('RENDER_SERVER', 'http://localhost:3000/');
10
@@ -18,6 +23,8 @@ function react_component($module, $props) {
23
);
24
25
$container_id = uniqid();
26
+ $container_id_for_js = json_encode($container_id);
27
+ $module_for_js = json_encode($module);
28
29
// Generate the code required to run the component on the client.
30
// We assume that the Browserify bundle is loaded in the page already
@@ -26,12 +33,18 @@ function react_component($module, $props) {
33
// Note that this solution is simple but I don't think it scales to
34
// multiple large pages very well. For that you'd be better off using
35
// webpack.
29
- $startup_code =
30
- '<script>require(\'react\').render(require(' .
31
- json_encode($module) .
32
- ')(' . $props_json . '), ' .
33
- 'document.getElementById(' . json_encode($container_id) . '))' .
34
- '</script>';
36
+ $startup_code = <<<SCRIPT
37
+<script>
38
+ (function() {
39
+ var React = require('react');
40
+ var Component = require($module_for_js);
41
+ React.render(
42
+ React.createElement(Component, $props_json),
43
+ document.getElementById($container_id_for_js)
44
+ );
45
+ })();
46
+</script>
47
+SCRIPT;
48
49
$container_markup = '<div id="' . $container_id . '">' . $server_markup . '</div>';
50