Skip to content

Instantly share code, notes, and snippets.

@rogaldh

rogaldh/ReactJS-Server-Side-Rendering.md

Forked from koistya/ReactJS-Server-Side-Rendering.md
Last active August 29, 2015 14:13
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save rogaldh/11bfd420f51ab3c9f682 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save rogaldh/11bfd420f51ab3c9f682 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @koistya koistya revised this gist Jan 7, 2015. 1 changed file with 0 additions and 1 deletion.
    1 change: 0 additions & 1 deletion ReactJS-Server-Side-Rendering.md
    View file
    Original file line number Diff line number Diff line change
    @@ -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});
    }
    });
  2. @koistya koistya revised this gist Jan 7, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion ReactJS-Server-Side-Rendering.md
    View file
    Original file line number Diff line number Diff line change
    @@ -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
  3. @koistya koistya revised this gist Jan 7, 2015. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions ReactJS-Server-Side-Rendering.md
    View file
    Original file line number Diff line number Diff line change
    @@ -124,6 +124,7 @@ server.listen(server.get('port'), function() {
    to improve your experience.
    </p>
    <![endif]-->
    <%= body %>
    <script src="app.js"></script>
    </body>
    </html>
  4. @koistya koistya revised this gist Jan 7, 2015. 1 changed file with 6 additions and 2 deletions.
    8 changes: 6 additions & 2 deletions ReactJS-Server-Side-Rendering.md
    View file
    Original file line number Diff line number Diff line change
    @@ -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>
  5. @koistya koistya revised this gist Jan 7, 2015. 1 changed file with 23 additions and 0 deletions.
    23 changes: 23 additions & 0 deletions ReactJS-Server-Side-Rendering.md
    View file
    Original file line number Diff line number Diff line change
    @@ -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
  6. @koistya koistya revised this gist Jan 7, 2015. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion ReactJS-Server-Side-Rendering.md
    View file
    Original file line number Diff line number Diff line change
    @@ -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');
  7. @koistya koistya revised this gist Jan 7, 2015. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions ReactJS-Server-Side-Rendering.md
    View file
    Original file line number Diff line number Diff line change
    @@ -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
    ```

  8. @koistya koistya revised this gist Jan 7, 2015. 1 changed file with 1 addition and 2 deletions.
    3 changes: 1 addition & 2 deletions ReactJS-Server-Side-Rendering.md
    View file
    Original file line number Diff line number Diff line change
    @@ -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
    ```

  9. @koistya koistya revised this gist Jan 7, 2015. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion ReactJS-Server-Side-Rendering.md
    View file
    Original file line number Diff line number Diff line change
    @@ -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
    }));
  10. @koistya koistya revised this gist Jan 7, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion ReactJS-Server-Side-Rendering.md
    View file
    Original file line number Diff line number Diff line change
    @@ -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});
    }
    });
  11. @koistya koistya revised this gist Jan 7, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion ReactJS-Server-Side-Rendering.md
    View file
    Original file line number Diff line number Diff line change
    @@ -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');
  12. @koistya koistya revised this gist Jan 7, 2015. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions ReactJS-Server-Side-Rendering.md
    View file
    Original file line number Diff line number Diff line change
    @@ -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
  13. @koistya koistya revised this gist Jan 7, 2015. 1 changed file with 4 additions and 0 deletions.
    4 changes: 4 additions & 0 deletions ReactJS-Server-Side-Rendering.md
    View file
    Original file line number Diff line number Diff line change
    @@ -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
  14. @koistya koistya revised this gist Jan 7, 2015. 1 changed file with 0 additions and 1 deletion.
    1 change: 0 additions & 1 deletion ReactJS-Server-Side-Rendering.md
    View file
    Original file line number Diff line number Diff line change
    @@ -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'});
  15. @koistya koistya renamed this gist Jan 7, 2015. 1 changed file with 32 additions and 2 deletions.
    34 changes: 32 additions & 2 deletions Set-Document-Title-with-ReactJS-Flux.md → ReactJS-Server-Side-Rendering.md
    View file
    Original file line number Diff line number Diff line change
    @@ -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
  16. @koistya koistya revised this gist Jan 7, 2015. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions Set-Document-Title-with-ReactJS-Flux.md
    View file
    Original file line number Diff line number Diff line change
    @@ -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;
  17. @koistya koistya revised this gist Jan 7, 2015. 1 changed file with 5 additions and 6 deletions.
    11 changes: 5 additions & 6 deletions Set-Document-Title-with-ReactJS-Flux.md
    View file
    Original file line number Diff line number Diff line change
    @@ -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
  18. @koistya koistya revised this gist Jan 7, 2015. 1 changed file with 34 additions and 112 deletions.
    146 changes: 34 additions & 112 deletions Set-Document-Title-with-ReactJS-Flux.md
    View file
    Original file line number Diff line number Diff line change
    @@ -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
  19. @koistya koistya revised this gist Nov 17, 2014. 1 changed file with 4 additions and 4 deletions.
    8 changes: 4 additions & 4 deletions Set-Document-Title-with-ReactJS-Flux.md
    View file
    Original file line number Diff line number Diff line change
    @@ -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)
    {
  20. @koistya koistya revised this gist Nov 14, 2014. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion Set-Document-Title-with-ReactJS-Flux.md
    View file
    Original file line number Diff line number Diff line change
    @@ -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)
  21. @koistya koistya revised this gist Nov 14, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion Set-Document-Title-with-ReactJS-Flux.md
    View file
    Original file line number Diff line number Diff line change
    @@ -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)
  22. @koistya koistya renamed this gist Nov 14, 2014. 1 changed file with 0 additions and 0 deletions.
    0 Set-Document-Title-with-ReactJS-and-Flux.md → Set-Document-Title-with-ReactJS-Flux.md
    View file
    File renamed without changes.
  23. @koistya koistya renamed this gist Nov 13, 2014. 1 changed file with 0 additions and 0 deletions.
    0 Set-a-Document-Title-with-ReactJS-Flux.md → Set-Document-Title-with-ReactJS-and-Flux.md
    View file
    File renamed without changes.
  24. @koistya koistya renamed this gist Nov 13, 2014. 1 changed file with 0 additions and 0 deletions.
    0 ...Set-a-Document-Title-with-ReactJS-Flux.md → Set-a-Document-Title-with-ReactJS-Flux.md
    View file
    File renamed without changes.
  25. @koistya koistya revised this gist Nov 13, 2014. 1 changed file with 13 additions and 12 deletions.
    25 changes: 13 additions & 12 deletions How-to-Set-a-Document-Title-with-ReactJS-Flux.md
    View file
    Original file line number Diff line number Diff line change
    @@ -3,13 +3,13 @@
    A basic stucture of a React+Flux application (see [other examples](https://github.com/facebook/flux/tree/master/examples))

    ```
    - /src/actions/PageActions.js - Flux action creator
    - /src/constants/ActionTypes.js - Flux action types
    - /src/actions/PageActions.js - Action creator (Flux)
    - /src/constants/ActionTypes.js - Action types (Flux)
    - /src/core/AppDispatcher.js - Dispatcher (Flux)
    - /src/layouts/DefaultLayout.js - Page layout reused accross multiple top-level components
    - /src/pages/DemoPage.js - A top-level react component (page)
    - /src/stores/PageStore.js - Flux store
    - /src/app.js - Application entry point / bootstrap
    - /src/AppDispatcher.js - Flux dispatcher
    - /src/pages/DemoPage.js - Top-level react component (page)
    - /src/stores/PageStore.js - Store (Flux)
    - /src/app.js - Application's main file (entry point)
    ```

    ### Top-level Component: Example 1
    @@ -96,14 +96,15 @@ module.exports = UserProfile;
    ```javascript
    // src/actions/PageActions.js

    var AppDispatcher = require('../AppDispatcher');
    var AppDispatcher = require('../core/AppDispatcher');
    var ActionTypes = require('../constants/ActionTypes');

    var PageActions = {

    /**
    * Set metadata for the current page.
    * Set an object representing the current web page.
    * @param {{title: string, description: string}} page
    */
    set(page) {
    AppDispatcher.handleViewAction({
    actionType: ActionTypes.SET_CURRENT_PAGE,
    @@ -116,12 +117,12 @@ var PageActions = {
    module.exports = PageActions;
    ```

    ### Application Entry Point
    ### Application's Main File (entiry point)

    ```javascript
    // src/app.js

    var AppDispatcher = require('./AppDispatcher');
    var AppDispatcher = require('./core/AppDispatcher');
    var ActionTypes = require('./constants/ActionTypes');
    var ExecutionEnvironment = require('react/lib/ExecutionEnvironment');

    @@ -141,9 +142,9 @@ AppDispatcher.register((payload) => {

    ```

    ### Sample App
    ### Example

    https://github.com/kriasoft/react-starter-kit
    ##### 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)
  26. @koistya koistya revised this gist Nov 13, 2014. 1 changed file with 14 additions and 8 deletions.
    22 changes: 14 additions & 8 deletions How-to-Set-a-Document-Title-with-ReactJS-Flux.md
    View file
    Original file line number Diff line number Diff line change
    @@ -32,7 +32,7 @@ var DemoPage = React.createClass({
    },

    componentWillMount() {
    PageActions.setTitle(PAGE_TITLE); // <-- Set the page title
    PageActions.set({title: PAGE_TITLE}); // <-- Set the page title
    },

    render() {
    @@ -73,7 +73,7 @@ var UserProfile = React.createClass({
    },

    componentWillMount() {
    PageActions.setTitle(this.state.profile.fullName); // <-- Set the page title
    PageActions.set({title: this.state.profile.fullName}); // <-- Set the page title
    },

    render() {
    @@ -101,10 +101,13 @@ var ActionTypes = require('../constants/ActionTypes');

    var PageActions = {

    setTitle(text) {
    /**
    * Set metadata for the current page.
    * @param {{title: string, description: string}} page
    set(page) {
    AppDispatcher.handleViewAction({
    actionType: ActionTypes.SET_PAGE_TITLE,
    text: text
    actionType: ActionTypes.SET_CURRENT_PAGE,
    page: page
    });
    }
    @@ -126,9 +129,9 @@ AppDispatcher.register((payload) => {
    switch (payload.action.actionType)
    {
    case ActionTypes.SET_PAGE_TITLE:
    case ActionTypes.SET_CURRENT_PAGE:
    if (ExecutionEnvironment.canUseDOM) {
    document.title = payload.action.text;
    document.title = payload.action.page.title;
    }
    break;
    }
    @@ -140,4 +143,7 @@ AppDispatcher.register((payload) => {
    ### Sample App
    https://github.com/kriasoft/react-starter-kit
    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)
  27. @koistya koistya revised this gist Nov 12, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion How-to-Set-a-Document-Title-with-ReactJS-Flux.md
    View file
    Original file line number Diff line number Diff line change
    @@ -118,9 +118,9 @@ module.exports = PageActions;
    ```javascript
    // src/app.js

    var ExecutionEnvironment = require('react/lib/ExecutionEnvironment');
    var AppDispatcher = require('./AppDispatcher');
    var ActionTypes = require('./constants/ActionTypes');
    var ExecutionEnvironment = require('react/lib/ExecutionEnvironment');

    AppDispatcher.register((payload) => {

  28. @koistya koistya revised this gist Nov 12, 2014. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions How-to-Set-a-Document-Title-with-ReactJS-Flux.md
    View file
    Original file line number Diff line number Diff line change
    @@ -89,6 +89,8 @@ var UserProfile = React.createClass({
    module.exports = UserProfile;
    ```

    **Note:** `componentWillMount()` executes on both server and client, while `componentDidMount()` on client only.

    ### Page Actions

    ```javascript
  29. @koistya koistya revised this gist Nov 12, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion How-to-Set-a-Document-Title-with-ReactJS-Flux.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    ### Files

    A basic stucture of a Flux application (see [other examples](https://github.com/facebook/flux/tree/master/examples))
    A basic stucture of a React+Flux application (see [other examples](https://github.com/facebook/flux/tree/master/examples))

    ```
    - /src/actions/PageActions.js - Flux action creator
  30. @koistya koistya revised this gist Nov 12, 2014. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions How-to-Set-a-Document-Title-with-ReactJS-Flux.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,7 @@
    ### Files

    A basic stucture of a Flux application (see [other examples](https://github.com/facebook/flux/tree/master/examples))

    ```
    - /src/actions/PageActions.js - Flux action creator
    - /src/constants/ActionTypes.js - Flux action types