rmoorman
diff --git a/Collapse file
‎examples/frontend-rendering-with-webpack/README.md‎
Copy file name to clipboard
+29Lines changed: 29 additions & 0 deletions
Display the source diff
Display the rich diff b/Collapse file
‎examples/frontend-rendering-with-webpack/README.md‎
Copy file name to clipboard
+29Lines changed: 29 additions & 0 deletions
Display the source diff
Display the rich diff
diff --git a/Collapse file
‎examples/frontend-rendering-with-webpack/example.py‎
Copy file name to clipboard
+49Lines changed: 49 additions & 0 deletions b/Collapse file
‎examples/frontend-rendering-with-webpack/example.py‎
Copy file name to clipboard
+49Lines changed: 49 additions & 0 deletions
diff --git a/Collapse file
‎examples/frontend-rendering-with-webpack/package.json‎
Copy file name to clipboard
+28Lines changed: 28 additions & 0 deletions b/Collapse file
‎examples/frontend-rendering-with-webpack/package.json‎
Copy file name to clipboard
+28Lines changed: 28 additions & 0 deletions
diff --git a/Collapse file
‎examples/frontend-rendering-with-webpack/render_server.js‎
Copy file name to clipboard
+58Lines changed: 58 additions & 0 deletions b/Collapse file
‎examples/frontend-rendering-with-webpack/render_server.js‎
Copy file name to clipboard
+58Lines changed: 58 additions & 0 deletions
diff --git a/Collapse file
‎examples/frontend-rendering-with-webpack/requirements.txt‎
Copy file name to clipboard
+4Lines changed: 4 additions & 0 deletions b/Collapse file
‎examples/frontend-rendering-with-webpack/requirements.txt‎
Copy file name to clipboard
+4Lines changed: 4 additions & 0 deletions
diff --git a/Collapse file
‎examples/frontend-rendering-with-webpack/static/css/app.css‎
Copy file name to clipboard
+15Lines changed: 15 additions & 0 deletions b/Collapse file
‎examples/frontend-rendering-with-webpack/static/css/app.css‎
Copy file name to clipboard
+15Lines changed: 15 additions & 0 deletions
@@ -0,0 +1,29 @@
+Running the example
+===================
+
+Install the dependencies
+
+```
+pip install -r requirements.txt
+npm install
+```
+
+Start the render server
+
+```
+node render_server.js
+```
+
+Start the python server
+
+```
+python example.py
+```
+
+And visit [http://127.0.0.1:5000](http://127.0.0.1:5000)
+
+### Notes
+To make React attributes like `onClick` etc. work, the app has to be re-rendered when it loads on the browswer. React is intelligent enough to not re-paint the browser and only update the changes, thus adding all the component properties.
+
+
+
@@ -0,0 +1,49 @@
+import os
+from flask import Flask, render_template, request, redirect, jsonify
+from react.render import render_component
+
+DEBUG = True
+
+app = Flask(__name__)
+app.debug = DEBUG
+
+comments = []
+components_path = os.path.join(os.path.dirname(__file__), 'src')
+
+def path(js_file):
+    return os.path.join(components_path, js_file)
+
+@app.route('/')
+def index():
+    store = {'component': 'CommentBox.jsx'}
+    store['props'] = {'comments': comments}
+
+    rendered = render_component(
+        os.path.join(os.getcwd(), 'static', 'js', path(store['component'])),
+        {
+            'comments': comments,
+            'url': '/comment/',
+        },
+        to_static_markup=True,
+    )
+
+    return render_template('index.html', 
+            rendered=rendered,
+            store=store)
+
+
+@app.route('/comment/', methods=('POST',))
+def comment():
+    comments.append({
+        'author': request.form['author'],
+        'text': request.form['text'],
+    })
+    return jsonify({'comments': comments})
+
+@app.route('/clear/')
+def clear():
+    comments = []
+    return jsonify({'comments': comments})
+
+if __name__ == '__main__':
+    app.run()
@@ -0,0 +1,28 @@
+{
+  "private": true,
+  "scripts": {
+    "watch": "webpack --watch & forever  --watch --watchDirectory ./static/js/src ./render_server.js"
+  },
+  "dependencies": {
+    "babel-core": "^6.1.20",
+    "babel-loader": "^6.2.4",
+    "babel-plugin-transform-react-jsx": "^6.1.18",
+    "babel-preset-es2015": "^6.9.0",
+    "babel-preset-react": "^6.5.0",
+    "body-parser": "^1.14.1",
+    "express": "^4.13.3",
+    "forever": "^0.15.2",
+    "react": "^0.14.2",
+    "react-dom": "^0.14.2",
+    "react-render": "^1.1.0",
+    "require": "^2.4.20",
+    "webpack": "^1.13.1",
+    "yargs": "^3.29.0"
+  },
+  "babel": {
+    "presets": [
+      "es2015",
+      "react"
+    ]
+  }
+}
@@ -0,0 +1,58 @@
+var argv = require('yargs')
+	.option('p', {
+		alias: 'port',
+		description: 'Specify the server\'s port',
+		default: 9009
+    })
+    .option('a', {
+		alias: 'address',
+		description: 'Specify the server\'s address',
+		default: '127.0.0.1'
+    })
+    .help('h').alias('h', 'help')
+    .strict()
+    .argv;
+
+var http = require('http');
+var express = require('express');
+var bodyParser = require('body-parser');
+var reactRender = require('react-render');
+
+// Ensure support for loading files that contain ES6+7 & JSX
+require('babel-core/register');
+
+var ADDRESS = argv.address;
+var PORT = argv.port;
+
+var app = express();
+var server = http.Server(app);
+
+app.use(bodyParser.json());
+
+app.get('/', function(req, res) {
+	res.end('React render server');
+});
+
+app.post('/render', function(req, res) {
+	reactRender(req.body, function(err, markup) {
+		if (err) {
+			res.json({
+				error: {
+					type: err.constructor.name,
+					message: err.message,
+					stack: err.stack
+				},
+				markup: null
+			});
+		} else {
+			res.json({
+				error: null,
+				markup: markup
+			});
+		}
+	});
+});
+
+server.listen(PORT, ADDRESS, function() {
+	console.log('React render server listening at http://' + ADDRESS + ':' + PORT);
+});
@@ -0,0 +1,4 @@
+flask==0.10.1
+optional-django==0.3.0
+requests==2.7.0
+react
@@ -0,0 +1,15 @@
+h2 {
+	border-bottom: 1px solid #eee;
+}
+
+form label {
+	display: block;
+}
+
+form button {
+	margin-left: 5px;
+}
+
+.btn-danger {
+    float: right;
+}