rmoorman · August 29, 2015 14:15 · Jan 14, 2015 · Jan 14, 2015 · Jan 13, 2015 · Jan 13, 2015
diff --git a/ReactJS-Server-Side-Rendering.md b/ReactJS-Server-Side-Rendering.md
@@ -96,7 +96,7 @@ server.get('*', function(req, res) {
 });
 
 server.listen(server.get('port'), function() {
-  console.log('Node app is running at http://localhost:' + server.get('port'));
+  console.log('HTTP server is running at http://localhost:' + server.get('port'));
 });
 ```
 

diff --git a/ReactJS-Server-Side-Rendering.md b/ReactJS-Server-Side-Rendering.md
@@ -70,9 +70,9 @@ Dispatcher.register((payload) => {
 ```javascript
 // src/server.js
 
-var React = require('react');
-var express = require('express');
 var _ = require('lodash');
+var express = require('express');
+var React = require('react');
 
 // The top-level React component + HTML template for it
 var Application = React.createFactory(require('./components/Application'));

diff --git a/ReactJS-Server-Side-Rendering.md b/ReactJS-Server-Side-Rendering.md
@@ -75,8 +75,8 @@ var express = require('express');
 var _ = require('lodash');
 
 // The top-level React component + HTML template for it
-var Application = React.createFactory(require('./components/layout/Application'));
-var template = fs.readFileSync(path.join(__dirname, 'index.html'), {encoding: 'utf8'});
+var Application = React.createFactory(require('./components/Application'));
+var template = fs.readFileSync(path.join(__dirname, 'index.html'), 'utf8');
 
 var server = express();
 

diff --git a/ReactJS-Server-Side-Rendering.md b/ReactJS-Server-Side-Rendering.md
@@ -51,18 +51,18 @@ var React = require('react');
 var Dispatcher = require('./core/Dispatcher');
 var Application = require('./components/Application');
 
-Dispatcher.register((payload) => {
-  var action = payload.action;
-  if (action.actionType === ActionTypes.CHANGE_LOCATION) {
-    app.setProps({path: action.path});
-  }
-});
-
 var app = React.createElement(Application, {
   path: window.location.pathname,
   onSetTitle: (title) => document.title = title
 }));
+
 app = React.render(app, document.body);
+
+Dispatcher.register((payload) => {
+  if (payload.action.actionType === ActionTypes.CHANGE_LOCATION) {
+    app.setProps({path: payload.action.path});
+  }
+});
 ```
 
 ### Server-side Startup Script (Node.js/Express)

diff --git a/ReactJS-Server-Side-Rendering.md b/ReactJS-Server-Side-Rendering.md
@@ -86,7 +86,7 @@ server.set('port', (process.env.PORT || 5000));
 server.get('*', function(req, res) {
   var data = {};
   var component = Application({
-    path: req.url,
+    path: req.path,
     onSetTitle: (title) => data.title = title,
     onPageNotFound: () => res.status(404)
   });

diff --git a/ReactJS-Server-Side-Rendering.md b/ReactJS-Server-Side-Rendering.md
@@ -58,9 +58,8 @@ Dispatcher.register((payload) => {
   }
 });
 
-var path = window.location.pathname + window.location.search + window.location.hash;
 var app = React.createElement(Application, {
-  path: path,
+  path: window.location.pathname,
   onSetTitle: (title) => document.title = title
 }));
 app = React.render(app, document.body);

diff --git a/ReactJS-Server-Side-Rendering.md b/ReactJS-Server-Side-Rendering.md
@@ -54,7 +54,6 @@ var Application = require('./components/Application');
 Dispatcher.register((payload) => {
   var action = payload.action;
   if (action.actionType === ActionTypes.CHANGE_LOCATION) {
-    history.pushState({}, document.title, action.path);
     app.setProps({path: action.path});
   }
 });

diff --git a/ReactJS-Server-Side-Rendering.md b/ReactJS-Server-Side-Rendering.md
@@ -12,7 +12,7 @@ The basic structure of a React+Flux application (see [other examples](https://gi
  - /src/server.js                 - Server-side startup script
 ```
 
-### The Top-level Component
+### The Top-level React Component
 
 ```javascript
 // src/components/Application.js

diff --git a/ReactJS-Server-Side-Rendering.md b/ReactJS-Server-Side-Rendering.md
@@ -124,6 +124,7 @@ server.listen(server.get('port'), function() {
         to improve your experience.
       </p>
     <![endif]-->
+    <%= body %>
     <script src="app.js"></script>
   </body>
 </html>

diff --git a/ReactJS-Server-Side-Rendering.md b/ReactJS-Server-Side-Rendering.md
@@ -104,7 +104,7 @@ server.listen(server.get('port'), function() {
 
 ### HTML Template for Server-side Rendering
 
-```
+```html
 // src/index.html
 
 <!doctype html>
@@ -118,7 +118,11 @@ server.listen(server.get('port'), function() {
   </head>
   <body>
     <!--[if lt IE 8]>
-      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
+      <p class="browsehappy">
+        You are using an <strong>outdated</strong> browser.
+        Please <a href="http://browsehappy.com/">upgrade your browser</a>
+        to improve your experience.
+      </p>
     <![endif]-->
     <script src="app.js"></script>
   </body>

diff --git a/ReactJS-Server-Side-Rendering.md b/ReactJS-Server-Side-Rendering.md
@@ -102,6 +102,29 @@ server.listen(server.get('port'), function() {
 });
 ```
 
+### HTML Template for Server-side Rendering
+
+```
+// src/index.html
+
+<!doctype html>
+<html class="no-js" lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title><%- title %></title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="css/app.css">
+  </head>
+  <body>
+    <!--[if lt IE 8]>
+      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
+    <![endif]-->
+    <script src="app.js"></script>
+  </body>
+</html>
+```
+
 ### Example
 
 ##### https://github.com/kriasoft/react-starter-kit
diff --git a/ReactJS-Server-Side-Rendering.md b/ReactJS-Server-Side-Rendering.md
@@ -1,4 +1,4 @@
-### Project Files
+### Files
 
 The basic structure of a React+Flux application (see [other examples](https://github.com/facebook/flux/tree/master/examples))
 
@@ -70,6 +70,8 @@ app = React.render(app, document.body);
 ### Server-side Startup Script (Node.js/Express)
 
 ```javascript
+// src/server.js
+
 var React = require('react');
 var express = require('express');
 var _ = require('lodash');

diff --git a/ReactJS-Server-Side-Rendering.md b/ReactJS-Server-Side-Rendering.md
@@ -7,8 +7,8 @@ The basic structure of a React+Flux application (see [other examples](https://gi
  - /src/components/Application.js - The top-level React component
  - /src/constants/ActionTypes.js  - Action types (Flux)
  - /src/core/Dispatcher.js        - Dispatcher (Flux)
- - /src/stores/AppStore.js        - The primary store (Flux)
-  - /src/app.js                    - Client-side startup script
+ - /src/stores/AppStore.js        - The main store (Flux)
+ - /src/app.js                    - Client-side startup script
  - /src/server.js                 - Server-side startup script
 ```
 

diff --git a/ReactJS-Server-Side-Rendering.md b/ReactJS-Server-Side-Rendering.md
@@ -8,8 +8,7 @@ The basic structure of a React+Flux application (see [other examples](https://gi
  - /src/constants/ActionTypes.js  - Action types (Flux)
  - /src/core/Dispatcher.js        - Dispatcher (Flux)
  - /src/stores/AppStore.js        - The primary store (Flux)
- - /src/stores/Store.js           - Base class for stores (Flux)
- - /src/app.js                    - Client-side startup script
+  - /src/app.js                    - Client-side startup script
  - /src/server.js                 - Server-side startup script
 ```
 

diff --git a/ReactJS-Server-Side-Rendering.md b/ReactJS-Server-Side-Rendering.md
@@ -50,6 +50,7 @@ module.exports = Application;
 
 var React = require('react');
 var Dispatcher = require('./core/Dispatcher');
+var Application = require('./components/Application');
 
 Dispatcher.register((payload) => {
   var action = payload.action;
@@ -60,7 +61,7 @@ Dispatcher.register((payload) => {
 });
 
 var path = window.location.pathname + window.location.search + window.location.hash;
-var app = React.createElement(require('./components/Application'), {
+var app = React.createElement(Application, {
   path: path,
   onSetTitle: (title) => document.title = title
 }));

diff --git a/ReactJS-Server-Side-Rendering.md b/ReactJS-Server-Side-Rendering.md
@@ -54,7 +54,7 @@ var Dispatcher = require('./core/Dispatcher');
 Dispatcher.register((payload) => {
   var action = payload.action;
   if (action.actionType === ActionTypes.CHANGE_LOCATION) {
-    window.history.pushState({}, document.title, action.path);
+    history.pushState({}, document.title, action.path);
     app.setProps({path: action.path});
   }
 });

diff --git a/ReactJS-Server-Side-Rendering.md b/ReactJS-Server-Side-Rendering.md
@@ -67,7 +67,7 @@ var app = React.createElement(require('./components/Application'), {
 app = React.render(app, document.body);
 ```
 
-### Server-side Startup Script
+### Server-side Startup Script (Node.js/Express)
 
 ```javascript
 var React = require('react');

diff --git a/ReactJS-Server-Side-Rendering.md b/ReactJS-Server-Side-Rendering.md
@@ -55,16 +55,16 @@ Dispatcher.register((payload) => {
   var action = payload.action;
   if (action.actionType === ActionTypes.CHANGE_LOCATION) {
     window.history.pushState({}, document.title, action.path);
-    application.setProps({path: action.path});
+    app.setProps({path: action.path});
   }
 });
 
 var path = window.location.pathname + window.location.search + window.location.hash;
-var application = React.createElement(require('./components/Application'), {
+var app = React.createElement(require('./components/Application'), {
   path: path,
   onSetTitle: (title) => document.title = title
 }));
-application = React.render(application, document.body);
+app = React.render(app, document.body);
 ```
 
 ### Server-side Startup Script

diff --git a/ReactJS-Server-Side-Rendering.md b/ReactJS-Server-Side-Rendering.md
@@ -94,6 +94,10 @@ server.get('*', function(req, res) {
   var html = _.template(template, data);
   res.send(html);
 });
+
+server.listen(server.get('port'), function() {
+  console.log('Node app is running at http://localhost:' + server.get('port'));
+});
 ```
 
 ### Example

diff --git a/ReactJS-Server-Side-Rendering.md b/ReactJS-Server-Side-Rendering.md
@@ -74,7 +74,6 @@ var React = require('react');
 var express = require('express');
 var _ = require('lodash');
 
-
 // The top-level React component + HTML template for it
 var Application = React.createFactory(require('./components/layout/Application'));
 var template = fs.readFileSync(path.join(__dirname, 'index.html'), {encoding: 'utf8'});

diff --git a/Set-Document-Title-with-ReactJS-Flux.md → ReactJS-Server-Side-Rendering.md b/Set-Document-Title-with-ReactJS-Flux.md → ReactJS-Server-Side-Rendering.md
@@ -1,4 +1,4 @@
-### Files
+### Project Files
 
 The basic structure of a React+Flux application (see [other examples](https://github.com/facebook/flux/tree/master/examples))
 
@@ -13,7 +13,7 @@ The basic structure of a React+Flux application (see [other examples](https://gi
  - /src/server.js                 - Server-side startup script
 ```
 
-### Top-level Component
+### The Top-level Component
 
 ```javascript
 // src/components/Application.js
@@ -67,6 +67,36 @@ var application = React.createElement(require('./components/Application'), {
 application = React.render(application, document.body);
 ```
 
+### Server-side Startup Script
+
+```javascript
+var React = require('react');
+var express = require('express');
+var _ = require('lodash');
+
+
+// The top-level React component + HTML template for it
+var Application = React.createFactory(require('./components/layout/Application'));
+var template = fs.readFileSync(path.join(__dirname, 'index.html'), {encoding: 'utf8'});
+
+var server = express();
+
+server.set('port', (process.env.PORT || 5000));
+
+// Server-side rendering (SSR)
+server.get('*', function(req, res) {
+  var data = {};
+  var component = Application({
+    path: req.url,
+    onSetTitle: (title) => data.title = title,
+    onPageNotFound: () => res.status(404)
+  });
+  data.body = React.renderToString(component);
+  var html = _.template(template, data);
+  res.send(html);
+});
+```
+
 ### Example
 
 ##### https://github.com/kriasoft/react-starter-kit
diff --git a/Set-Document-Title-with-ReactJS-Flux.md b/Set-Document-Title-with-ReactJS-Flux.md
@@ -43,13 +43,13 @@ var Application = React.createClass({
 module.exports = Application;
 ```
 
-### Client-side startup script (aka bootstrap)
+### Client-side Startup Script (aka Bootstrap)
 
 ```javascript
 // src/app.js
 
 var React = require('react');
-var Application = React.createFactory(require('./components/Application));
+var Dispatcher = require('./core/Dispatcher');
 
 Dispatcher.register((payload) => {
   var action = payload.action;

diff --git a/Set-Document-Title-with-ReactJS-Flux.md b/Set-Document-Title-with-ReactJS-Flux.md
@@ -50,7 +50,6 @@ module.exports = Application;
 
 var React = require('react');
 var Application = React.createFactory(require('./components/Application));
-var application;
 
 Dispatcher.register((payload) => {
   var action = payload.action;
@@ -60,12 +59,12 @@ Dispatcher.register((payload) => {
   }
 });
 
-function setTitle(value) {
-  document.title = value;
-}
-
 var path = window.location.pathname + window.location.search + window.location.hash;
-var application = React.render(new Application({path: path, onSetTitle: setTitle}), document.body);
+var application = React.createElement(require('./components/Application'), {
+  path: path,
+  onSetTitle: (title) => document.title = title
+}));
+application = React.render(application, document.body);
 ```
 
 ### Example

diff --git a/Set-Document-Title-with-ReactJS-Flux.md b/Set-Document-Title-with-ReactJS-Flux.md
@@ -1,151 +1,73 @@
 ### Files
 
-The basic stucture of a React+Flux application (see [other examples](https://github.com/facebook/flux/tree/master/examples))
+The basic structure of a React+Flux application (see [other examples](https://github.com/facebook/flux/tree/master/examples))
 
 ```
- - /src/actions/PageActions.js    - Action creator (Flux)
+ - /src/actions/AppActions.js     - Action creators (Flux)
+ - /src/components/Application.js - The top-level React component
  - /src/constants/ActionTypes.js  - Action types (Flux)
  - /src/core/Dispatcher.js        - Dispatcher (Flux)
- - /src/core/Store.js             - Base class for stores (Flux)
- - /src/layouts/DefaultLayout.js  - Page layout reused accross multiple top-level components
- - /src/pages/DemoPage.js         - Top-level react component (page)
- - /src/stores/PageStore.js       - Store (Flux)
- - /src/app.js                    - Application's main file (entry point)
+ - /src/stores/AppStore.js        - The primary store (Flux)
+ - /src/stores/Store.js           - Base class for stores (Flux)
+ - /src/app.js                    - Client-side startup script
+ - /src/server.js                 - Server-side startup script
 ```
 
-### Top-level Component: Example 1
-
-When document title is known up front and is static:
-
-```javascript
-// src/pages/DemoPage.js
-
-var React = require('react');
-var PageActions = require('../actions/PageActions');
-var DefaultLayout = require('../layouts/DefaultLayout');
-
-var PAGE_TITLE = 'Some Page Title';
-
-var DemoPage = React.createClass({
-
-  statics: {
-    layout: DefaultLayout
-  },
-
-  componentWillMount() {
-    PageActions.set({title: PAGE_TITLE}); // <-- Set the page title
-  },
-
-  render() {
-    return (
-      <div className="container">
-        <h1>{PAGE_TITLE}</h1>
-        <p>Demo page</p>
-      </div>
-    );
-  }
-});
-
-module.exports = DemoPage;
-```
-
-### Top-level Component: Example 2
-
-When document title is generated based on a newly obtained data from a Flux store:
+### Top-level Component
 
 ```javascript
-// src/pages/UserProfile.js
+// src/components/Application.js
 
 var React = require('react');
-var PageActions = require('../actions/PageActions');
-var DefaultLayout = require('../layouts/DefaultLayout');
-var UserStore = require('../stores/UserStore');
 
-var UserProfile = React.createClass({
+var Application = React.createClass({
 
-  statics: {
-    layout: DefaultLayout
-  },
-
-  getInitialData() {
-    return {
-      profile: UserStore.getProfile()
-    };
+  propTypes: {
+    path: React.PropTypes.string.isRequired,
+    onSetTitle: React.PropTypes.func.isRequired
   },
 
-  componentWillMount() {
-    PageActions.set({title: this.state.profile.fullName}); // <-- Set the page title
-  },
-
   render() {
+    var page = AppStore.getPage(this.props.path);
+    this.props.onSetTitle(page.title);
+
     return (
       <div className="container">
-        <h1>{this.state.profile.fullName}</h1>
-        <p>Demo page</p>
+        <h1>{page.title}</h1>
+        <div>{page.content}</div>
       </div>
     );
   }
 });
 
-module.exports = UserProfile;
+module.exports = Application;
 ```
 
-**Note:** `componentWillMount()` executes on both server and client, while `componentDidMount()` on client only.
-
-### Page Actions
-
-```javascript
-// src/actions/PageActions.js
-
-var Dispatcher = require('../core/Dispatcher');
-var ActionTypes = require('../constants/ActionTypes');
-
-var PageActions = {
-
-  /**
-   * Set an object representing the current web page.
-   * @param {{title: string, description: string}} page
-   */
-  set(page) {
-    Dispatcher.handleViewAction({
-      actionType: ActionTypes.SET_CURRENT_PAGE,
-      page: page
-    });
-  }
-
-};
-
-module.exports = PageActions;
-```
-
-### Application's Main File (entiry point)
+### Client-side startup script (aka bootstrap)
 
 ```javascript
 // src/app.js
 
-var Dispatcher = require('./core/Dispatcher');
-var ActionTypes = require('./constants/ActionTypes');
-var ExecutionEnvironment = require('react/lib/ExecutionEnvironment');
+var React = require('react');
+var Application = React.createFactory(require('./components/Application));
+var application;
 
 Dispatcher.register((payload) => {
-
-  switch (payload.action.actionType)
-  {
-    case ActionTypes.SET_CURRENT_PAGE:
-      if (ExecutionEnvironment.canUseDOM) {
-        document.title = payload.action.page.title;
-      }
-      break;
+  var action = payload.action;
+  if (action.actionType === ActionTypes.CHANGE_LOCATION) {
+    window.history.pushState({}, document.title, action.path);
+    application.setProps({path: action.path});
   }
-
-  return true;
 });
 
+function setTitle(value) {
+  document.title = value;
+}
+
+var path = window.location.pathname + window.location.search + window.location.hash;
+var application = React.render(new Application({path: path, onSetTitle: setTitle}), document.body);
 ```
 
 ### Example
 
-##### https://github.com/kriasoft/react-starter-kit
-
-* [PageActions.js](https://github.com/kriasoft/react-starter-kit/blob/master/src/actions/PageActions.js)
-* [PageStore.js](https://github.com/kriasoft/react-starter-kit/blob/master/src/stores/PageStore.js)
+##### https://github.com/kriasoft/react-starter-kit
diff --git a/Set-Document-Title-with-ReactJS-Flux.md b/Set-Document-Title-with-ReactJS-Flux.md
@@ -97,7 +97,7 @@ module.exports = UserProfile;
 ```javascript
 // src/actions/PageActions.js
 
-var AppDispatcher = require('../core/AppDispatcher');
+var Dispatcher = require('../core/Dispatcher');
 var ActionTypes = require('../constants/ActionTypes');
 
 var PageActions = {
@@ -107,7 +107,7 @@ var PageActions = {
    * @param {{title: string, description: string}} page
    */
   set(page) {
-    AppDispatcher.handleViewAction({
+    Dispatcher.handleViewAction({
       actionType: ActionTypes.SET_CURRENT_PAGE,
       page: page
     });
@@ -123,11 +123,11 @@ module.exports = PageActions;
 ```javascript
 // src/app.js
 
-var AppDispatcher = require('./core/AppDispatcher');
+var Dispatcher = require('./core/Dispatcher');
 var ActionTypes = require('./constants/ActionTypes');
 var ExecutionEnvironment = require('react/lib/ExecutionEnvironment');
 
-AppDispatcher.register((payload) => {
+Dispatcher.register((payload) => {
 
   switch (payload.action.actionType)
   {

diff --git a/Set-Document-Title-with-ReactJS-Flux.md b/Set-Document-Title-with-ReactJS-Flux.md
@@ -5,7 +5,8 @@ The basic stucture of a React+Flux application (see [other examples](https://git
 ```
  - /src/actions/PageActions.js    - Action creator (Flux)
  - /src/constants/ActionTypes.js  - Action types (Flux)
- - /src/core/AppDispatcher.js     - Dispatcher (Flux)
+ - /src/core/Dispatcher.js        - Dispatcher (Flux)
+ - /src/core/Store.js             - Base class for stores (Flux)
  - /src/layouts/DefaultLayout.js  - Page layout reused accross multiple top-level components
  - /src/pages/DemoPage.js         - Top-level react component (page)
  - /src/stores/PageStore.js       - Store (Flux)

diff --git a/Set-Document-Title-with-ReactJS-Flux.md b/Set-Document-Title-with-ReactJS-Flux.md
@@ -1,6 +1,6 @@
 ### Files
 
-A basic stucture of a React+Flux application (see [other examples](https://github.com/facebook/flux/tree/master/examples))
+The basic stucture of a React+Flux application (see [other examples](https://github.com/facebook/flux/tree/master/examples))
 
 ```
  - /src/actions/PageActions.js    - Action creator (Flux)

diff --git a/Set-Document-Title-with-ReactJS-and-Flux.md → Set-Document-Title-with-ReactJS-Flux.md b/Set-Document-Title-with-ReactJS-and-Flux.md → Set-Document-Title-with-ReactJS-Flux.md
diff --git a/Set-a-Document-Title-with-ReactJS-Flux.md → Set-Document-Title-with-ReactJS-and-Flux.md b/Set-a-Document-Title-with-ReactJS-Flux.md → Set-Document-Title-with-ReactJS-and-Flux.md
diff --git a/...Set-a-Document-Title-with-ReactJS-Flux.md → Set-a-Document-Title-with-ReactJS-Flux.md b/...Set-a-Document-Title-with-ReactJS-Flux.md → Set-a-Document-Title-with-ReactJS-Flux.md
No results found