Update server servering example
It's referencing packages that aren't published yet but it *probably* works...
Paul O’Shannessy committed
Oct 22, 2014 at 18:48 UTC
4cfd8c62049f34c1773fa16b260696ccedc61f6b
6 files changed
+11
-12
examples/server-rendering/README.md
+2
-2
@@ -7,7 +7,7 @@ This example demonstrates how React's server rendering works. Rather than demons
7
You generally start a React app by doing something like this:
8
9
```javascript
10
-React.renderComponent(MyComponent({someData: ...}), document.getElementById('someContainer'));
10
+React.render(<MyComponent someData={...} />, document.getElementById('someContainer'));
11
```
12
13
The problem is that `someContainer` will be an empty HTML element until the JavaScript downloads and executes. This is bad for page load performance (since the user can't see anything until the JS downloads and executes) and is bad for SEO (since the Googlebot can't see any content). React's server rendering solves this problem -- it lets you fill `someContainer` with *static HTML* on the server and "bring it to life" on the client *without* throwing out and re-creating the HTML.
@@ -41,4 +41,4 @@ Browserify is used to run the same code that Node.js is running inside of the br
41
* Run `browserify` by doing `npm run build` inside `jsapp/`. This will generate a `webapp/static/bundle.js` file.
42
* Run the node server by doing `npm start` inside `reactserver/`.
43
* Finally, open `index.php` in your browser (on a webserver running PHP, of course). View-source to see the rendered markup.
44
- * Kill the `reactserver` and reload `index.php`. You'll notice that the app still works! View-source and you'll see no rendered markup. React is smart enough to recover if server rendering doesn't work.
\ No newline at end of file
44
+ * Kill the `reactserver` and reload `index.php`. You'll notice that the app still works! View-source and you'll see no rendered markup. React is smart enough to recover if server rendering doesn't work.
examples/server-rendering/jsapp/package.json
+3
-3
@@ -8,9 +8,9 @@
8
"test": "echo \"Error: no test specified\" && exit 1"
9
},
10
"dependencies": {
11
- "envify": "^1.2.1",
12
- "react": "^0.10.0",
11
+ "envify": "^3.0.0",
12
+ "react": "^0.12.0",
13
"browserify": "^3.38.0",
14
- "reactify": "^0.10.0"
14
+ "reactify": "^0.15.0"
15
}
16
}
examples/server-rendering/jsapp/src/App.js
-1
@@ -1,4 +1,3 @@
1
-/** @jsx React.DOM */
1
var React = require('react');
2
3
var App = React.createClass({
examples/server-rendering/reactserver/package.json
+3
-3
@@ -8,9 +8,9 @@
8
"test": "echo \"Error: no test specified\" && exit 1"
9
},
10
"dependencies": {
11
- "envify": "^1.2.1",
12
- "react": "^0.10.0",
11
+ "envify": "^3.0.0",
12
+ "react": "^0.12.0",
13
"express": "^3.5.1",
14
- "node-jsx": "^0.10.0"
14
+ "node-jsx": "^0.12.0"
15
}
16
}
examples/server-rendering/reactserver/server.js
+1
-1
@@ -15,7 +15,7 @@ app.get('/', function(req, res){
15
var component = require(path.resolve(req.query['module']));
16
var props = JSON.parse(req.query['props'] || '{}');
17
18
- res.send(React.renderComponentToString(component(props)));
18
+ res.send(React.renderToString(component(props)));
19
});
20
21
app.listen(3000);
examples/server-rendering/webapp/index.php
+2
-2
@@ -27,9 +27,9 @@ function react_component($module, $props) {
27
// multiple large pages very well. For that you'd be better off using
28
// webpack.
29
$startup_code =
30
- '<script>require(\'react\').renderComponent(require(' .
30
+ '<script>require(\'react\').render(require(' .
31
json_encode($module) .
32
- ')(' . $props_json . '), ' .
32
+ ')(' . $props_json . '), ' .
33
'document.getElementById(' . json_encode($container_id) . '))' .
34
'</script>';
35