1

npm -S install express react react-dom

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

var express = require('express');

var app = express();

var React = require('react'),

    ReactDOMServer = require('react-dom/server');

var App = React.createFactory(require('./App'));

app.get('/', function(req, res) {

    var html = ReactDOMServer.renderToStaticMarkup(

        React.DOM.body(

            null,

            React.DOM.div({id: 'root',

                dangerouslySetInnerHTML: {

                    __html: ReactDOMServer.renderToStaticMarkup(App())

                }

            })

        )

    );

    res.end(html);

});

app.listen(3000, function() {

    console.log('running on port ' + 3000);

});

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

var React = require('react'),

    DOM = React.DOM, div = DOM.div, button = DOM.button, ul = DOM.ul, li = DOM.li

module.exports = React.createClass({

  getInitialState: function() {

   return {

     isSayBye: false

   }

  },

  handleClick: function() {

   this.setState({

     isSayBye: !this.state.isSayBye

   })

  },

  render: function() {

    var content = this.state.isSayBye ? 'Bye' : 'Hello World';

    return div(null,

      div(null, content),

      button({onClick: this.handleClick}, 'switch')

    );

  }

})

1

node server.js

1

npm install -S express react react-dom jsx-loader

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

var path = require('path');

var assetsPath = path.join(__dirname, "public", "assets");

var serverPath = path.join(__dirname, "server");

module.exports = [

    {

        name: "browser",

        entry: './app/entry.js',

        output: {

            path: assetsPath,

            filename: 'entry.generator.js'

        },

        module: {

            loaders: [

                { test: /\.js/, loader: "jsx-loader" }

            ]

        }

    },

    {

        name: "server-side rending",

        entry: './server/page.js',

        output: {

            path: serverPath,

            filename: "page.generator.js",

            // 使用page.generator.js的是nodejs，所以需要将

            // webpack模块转化为CMD模块

            library: 'page',

            libraryTarget: 'commonjs'

        },

        module: {

            loaders: [

                { test: /\.js$/, loader: 'jsx-loader' }

            ]

        }

    }

]

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

var React = require('react');

var App = React.createClass({

    getInitialState: function() {

        return {

            count: this.props.initialCount

        };

    },

    _increment: function() {

        this.setState({ count: this.state.count + 1 });

    },

    render: function() {

        return (

            <div>

                <span>the count is: </span>

                <span onClick={this._increment}>{this.state.count}</span>

            </div>

        )

    }

})

module.exports = App;

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

var express = require('express');

var path = require('path');

var page = require("./page.generator.js").page;

var app = express();

var port = 8082;

app.use(express.static(path.join(__dirname, '..', 'public')));

app.get('/', function(req, res) {

    var props = {

        initialCount: 9

    };

    var html = page(props);

    res.end(html);

});

app.listen(port, function() {

    console.log('Listening on port %d', port);

});

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

var React = require('react');

var ReactDOMServer = require("react-dom/server");

var App = require('../app/App');

var ReactDOM = require('react-dom');

module.exports = function(props) {

    var content = ReactDOMServer.renderToString(

        <App initialCount={props.initialCount}></App>

    );

    var propsScript = 'var APP_PROPS = ' + JSON.stringify(props);

    var html = ReactDOMServer.renderToStaticMarkup(

        <html>

            <head>

            </head>

            <body>

                <div id="root" dangerouslySetInnerHTML={

                    {__html: content}

                } />

                <script dangerouslySetInnerHTML={

                    {__html: propsScript}

                }></script>

                <script src={"assets/entry.generator.js"}></script>

            </body>

        </html>

    );

    return html;

}

1

2

3

4

5

6

7

8

9

10

var React = require('react'),

    ReactDOM = require('react-dom'),

    App = require('./App');

var APP_PROPS = window.APP_PROPS || {};

ReactDOM.render(

    <App initialCount={APP_PROPS.initialCount}/>,

    document.getElementById('root')

);