Made the dependencies of browser.js all injected through require

Author: Dan Moore

README.md

@@ -2,7 +2,7 @@
 
 This repository shows how React can be used with the Express framework isomorphically; that is to use the same code on both the server and browser. This uses the comment box example from the [React tutorial](http://facebook.github.io/react/docs/tutorial.html) but in addition to rendering the comment box in the browser, it pre-renders it on the server, using the same code.
 
-There are also a few other additions. I've set up `webpack` so that it bundles up the code to be used in the browser. I also didn't particularly like the `JSX` template render methods being in the same file as the controller code (despite what React says, they are controllers; they behave exactly the same way as Angular's controllers). And lastly since I had to server-side rendering, I've had to use a view engine. I've chose `Swig` as unlike `Jade` it uses proper HTML and so means I have one fewer language to learn (which fits into the philosophy of isomorphism).
+There are also a few other additions. I've set up `webpack` so that it bundles up the code to be used in the browser. I also didn't particularly like the `JSX` template render methods being in the same file as the controller / component code (despite what React says, they are not just "views"; they behave very similar to Angular's controllers). And lastly since I had to server-side rendering, I've had to use a view engine. I've chose `Swig` as unlike `Jade` it uses proper HTML and so means I have one fewer language to learn (which fits into the philosophy of isomorphism).
 
 Naturally this means all of the other server language implementations have been removed - Python, PHP etc.
 
@@ -30,4 +30,4 @@ And then start the server:
 
     npm start
 
-And visit <http://localhost:3000/>.
+And visit <http://localhost:3000/>.

comments.json

@@ -8,5 +8,15 @@
         "id": 1420070400000,
         "author": "Paul O’Shannessy",
         "text": "React is *great*!"
+    },
+    {
+        "id": 1455027234880,
+        "author": "sdfgsd",
+        "text": "sdfg"
+    },
+    {
+        "id": 1455035719653,
+        "author": "dddd",
+        "text": "dd"
     }
-]
+]

components/browser.js

@@ -1,12 +1,14 @@
 var components = require('./components');
 var ReactDOM = require('react-dom');
+var window = require('window');
+var $ = require('jquery');
 
 /**
  * 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 = () => {
+window.renderCommentBox = function renderCommentBox() {
     var url = "/api/comments";
 
     $.get(url).then(

components/server.js

@@ -9,7 +9,7 @@ module.exports = {
      * @param {Object} params
      * @returns {String}
      */
-    renderCommentBox: (params) => {
+    renderCommentBox(params) {
         return ReactDOMServer.renderToString(React.createElement(components.CommentBox, params));
     }
-};
+};

webpack.config.js

@@ -12,7 +12,8 @@ module.exports = {
         "react": "React",
         "marked": "marked",
         "jquery": "jQuery",
-        "react-dom": "ReactDOM"
+        "react-dom": "ReactDOM",
+        "window": "window"
     },
     plugins: isDev ?
         [] :
@@ -30,4 +31,4 @@ module.exports = {
             }
         ]
     }
-};
+};