Refactored slightly so that the components file only exports the components and the server and browser specific render methods are in their own files

Author: DanFMoore

README.md

@@ -8,11 +8,11 @@ Naturally this means all of the other server language implementations have been
 
 ## Implementation
 
-The example file from the tutorial is now in a publicly-inaccessible location at `src/example.js`. The templates are in another file which is `require`d from there, `templates.jsx`.
+The example file from the tutorial is now in a publicly-inaccessible location at `components/components.js`. This exports each component in `module.exports`. The templates are in another file which is `require`d from there, `templates.jsx`.
 
-In the browser, the main entry point method which calls `ReactDOM.render`, is exported as `render` from `example.js`. This is made accessible as a window method in `src/index.js`, which is used as the entry script for `webpack`. This is all compiled into `public/scripts/bundle.js` which is what the browser includes. The settings for the `webpack` are found in `webpack.config.js`; several libraries like React itself and the markdown parser are set to be externals, which means they are not bundled up so that the browser can load those from a CDN (Content Delivery Network).
+In the browser, the main entry point method which calls `ReactDOM.render`, is added as a global window method, `renderCommentBox` in `components/browser.js`, which is used as the entry script for `webpack`. This is all compiled into `public/scripts/bundle.js` which is what the browser includes. The settings for the `webpack` are found in `webpack.config.js`; several libraries like React itself and the markdown parser are set to be externals, which means they are not bundled up so that the browser can load those from a CDN (Content Delivery Network).
 
-On the browser, `example.js` itself is `require`d, after the `node-jsx` module is set up, in order that the JSX syntax can be understood. `example.js` also exports a `renderServer` which returns a static string after calling `ReactDOMServer.renderToString` from the `react-dom/server` module. The route for `/` simply calls this method and passes it as a variable to the `views/index.html` view.
+On the browser, `components/server.js` is `require`d, after the `node-jsx` module is set up, in order that the JSX syntax can be understood. This exports a `renderCommentBox` method which returns a static string after calling `ReactDOMServer.renderToString` from the `react-dom/server` module. The route for `/` simply calls this method and passes it as a variable to the `views/index.html` view.
 
 ## To use
 

components/browser.js

@@ -0,0 +1,28 @@
+var components = require('./components');
+var ReactDOM = require('react-dom');
+
+/**
+ * Load the comments via AJAX before rendering the comment box with the DOM.
+ * This will avoid the server rendered comments being replaced with nothing by JS.
+ * If the AJAX call fails, then just render no comments after logging the error.
+ */
+window.renderCommentBox = () => {
+    var url = "/api/comments";
+
+    $.get(url).then(
+        (comments) => {
+            return comments;
+        },
+        (err) => {
+            console.error(url, err);
+            return [];
+        }
+    )
+    .always((comments) => {
+        ReactDOM.render(React.createElement(components.CommentBox, {
+            url: url,
+            pollInterval: 2000,
+            comments: comments
+        }), document.getElementById('content'));
+    });
+};

src/example.js renamed to components/components.js

@@ -13,8 +13,7 @@
 var templates = require('./templates.jsx');
 var React = require('react');
 var marked = require('marked');
-
-var ReactDOMServer = typeof window === "undefined" ? require('react-dom/server') : undefined;
+var $ = require('jquery');
 
 var Comment = React.createClass({
     displayName: 'Comment',
@@ -34,7 +33,7 @@ var CommentBox = React.createClass({
                 this.setState({data: data});
             },
             (err) => {
-                console.error(this.props.url, err.status, err.statusText);
+                console.error(this.props.url, err);
             }
         );
     },
@@ -104,44 +103,9 @@ var CommentForm = React.createClass({
     render: templates.commentForm
 });
 
-
 module.exports = {
-    /**
-     * Load the comments via AJAX before rendering the comment box with the DOM.
-     * This will avoid the server rendered comments being replaced with nothing by JS.
-     * If the AJAX call fails, then just render no comments after logging the error.
-     */
-    render: () => {
-        var url = "/api/comments";
-
-        $.get(url).then(
-            (comments) => {
-                return comments;
-            },
-            (err) => {
-                console.error(this.props.url, err.status, err.statusText);
-                return [];
-            }
-        )
-        .always((comments) => {
-            ReactDOM.render(React.createElement(CommentBox, {
-                url: url,
-                pollInterval: 2000,
-                comments: comments
-            }), document.getElementById('content'));
-        });
-    },
-    /**
-     * Just return a static string to render on the server
-     *
-     * @param {Array} comments
-     * @returns {String}
-     */
-    renderServer: (comments) => {
-        return ReactDOMServer.renderToString(React.createElement(CommentBox, {
-            url: "/api/comments",
-            pollInterval: 2000,
-            comments: comments
-        }));
-    }
+    Comment,
+    CommentBox,
+    CommentList,
+    CommentForm
 };

components/server.js

@@ -0,0 +1,15 @@
+var components = require('./components');
+var React = require('react');
+var ReactDOMServer = require('react-dom/server');
+
+module.exports = {
+    /**
+     * Just return a static string to render on the server
+     *
+     * @param {Object} params
+     * @returns {String}
+     */
+    renderCommentBox: (params) => {
+        return ReactDOMServer.renderToString(React.createElement(components.CommentBox, params));
+    }
+};

src/templates.jsx renamed to components/templates.jsx

@@ -6,6 +6,7 @@
   "dependencies": {
     "body-parser": "^1.4.3",
     "express": "^4.4.5",
+    "jquery": "^2.2.0",
     "marked": "^0.3.5",
     "node-jsx": "^0.13.3",
     "react": "^0.14.7",

package.json

@@ -17,7 +17,7 @@ var bodyParser = require('body-parser');
 var swig = require('swig');
 
 require('node-jsx').install();
-var example = require('./src/example');
+var components = require('./components/server');
 
 var app = express();
 
@@ -43,7 +43,9 @@ app.get('/', function(req, res) {
     }
 
     res.render('index', {
-      commentBox: example.renderServer(JSON.parse(data))
+      commentBox: components.renderCommentBox({
+        comments: JSON.parse(data)
+      })
     });
   });
 });

server.js

@@ -17,6 +17,6 @@
       {{ commentBox }}
       {% endautoescape %}
     </div>
-  <script type="text/javascript">commentBoxRender();</script>
+  <script type="text/javascript">renderCommentBox();</script>
   </body>
 </html>

src/index.js

@@ -1,23 +1,22 @@
 var webpack = require("webpack");
 var isDev = process.argv.indexOf('--dev') > -1;
 
-// Don't include react-dom/server in the browser
-var ignore = new webpack.IgnorePlugin(/react-dom/);
-
 module.exports = {
-    entry: "./src/index.js",
+    entry: "./components/browser.js",
     output: {
         path: "./public/scripts",
         filename: "bundle.js"
     },
     // These libraries are included in separate script tags and are available as global variables
     externals: {
         "react": "React",
-        "marked": "marked"
+        "marked": "marked",
+        "jquery": "jQuery",
+        "react-dom": "ReactDOM"
     },
     plugins: isDev ?
-        [ignore] :
-        [ignore, new webpack.optimize.UglifyJsPlugin({minimize: true})],
+        [] :
+        [new webpack.optimize.UglifyJsPlugin({minimize: true})],
     devtool: isDev ? 'source-map' : null,
     module: {
         loaders: [