OSSForks/react
1
0
Fork 0
mirror of https://github.com/zebrajr/react.git synced 2026-01-15 12:15:22 +00:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

Update the examples for 0.13

Browse Source 
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.
This commit is contained in:
Paul O’Shannessy
2015-03-09 18:15:07 -07:00
parent ee019d6cc5
commit ce66a796ee
6 changed files with 28 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
examples/basic-commonjs/package.json
View File

@@ -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": {

8
examples/basic-jsx-harmony/index.html
View File

@@ -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 @@
<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 @@
return <p>{message}</p>;
}
});
}
var start = new Date().getTime();
setInterval(() => {
React.render(

4
examples/server-rendering/jsapp/package.json
View File

@@ -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"
}
}

2
examples/server-rendering/reactserver/package.json
View File

@@ -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"
}

2
examples/server-rendering/reactserver/server.js
View File

@@ -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);

25
examples/server-rendering/webapp/index.php
View File

@@ -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>';