├── .gitignore ├── app ├── entry.js └── App.js ├── README.md ├── package.json ├── server ├── index.js └── page.js └── webpack.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | server/page.generator.js 4 | public/ 5 | npm-debug.log -------------------------------------------------------------------------------- /app/entry.js: -------------------------------------------------------------------------------- 1 | var React = require('react'), 2 | ReactDOM = require('react-dom'), 3 | App = require('./App'); 4 | 5 | var APP_PROPS = window.APP_PROPS || {}; 6 | 7 | ReactDOM.render( 8 | , 9 | document.getElementById('root') 10 | ); -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-webpack-server-render-example 2 | 一个使用webpack的React服务器渲染的例子，参考：[react-webpack-server-side-example](https://github.com/webpack/react-webpack-server-side-example) 3 | 4 | ## 安装 5 | ```sh 6 | npm install 7 | ``` 8 | 9 | ## 启动 10 | ``` 11 | npm start 12 | ``` 13 | 14 | ## 页面url 15 | 访问：localhost:8082 -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react_webpack_render", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "webpack.config.js", 6 | "scripts": { 7 | "start": "webpack&&node server/index.js" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "express": "^4.14.0", 13 | "jsx-loader": "^0.13.2", 14 | "react": "^15.4.1", 15 | "react-dom": "^15.4.1" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /server/index.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var path = require('path'); 3 | 4 | var page = require("./page.generator.js").page; 5 | 6 | var app = express(); 7 | var port = 8082; 8 | 9 | app.use(express.static(path.join(__dirname, '..', 'public'))); 10 | 11 | app.get('/', function(req, res) { 12 | var props = { 13 | initialCount: 9 14 | }; 15 | var html = page(props); 16 | res.end(html); 17 | }); 18 | 19 | app.listen(port, function() { 20 | console.log('Listening on port %d', port); 21 | }); -------------------------------------------------------------------------------- /app/App.js: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | 3 | var App = React.createClass({ 4 | getInitialState: function() { 5 | return { 6 | count: this.props.initialCount 7 | }; 8 | }, 9 | 10 | _increment: function() { 11 | this.setState({ count: this.state.count + 1 }); 12 | }, 13 | 14 | render: function() { 15 | return ( 16 |

17 | the count is: 18 | {this.state.count} 19 |

20 | ) 21 | } 22 | }) 23 | 24 | module.exports = App; -------------------------------------------------------------------------------- /server/page.js: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | var ReactDOMServer = require("react-dom/server"); 3 | 4 | var App = require('../app/App'); 5 | 6 | var ReactDOM = require('react-dom'); 7 | 8 | 9 | module.exports = function(props) { 10 | 11 | var content = ReactDOMServer.renderToString( 12 | 13 | ); 14 | 15 | var propsScript = 'var APP_PROPS = ' + JSON.stringify(props); 16 | 17 | var html = ReactDOMServer.renderToStaticMarkup( 18 | 19 | 20 | 21 | 22 |

25 | 28 | 29 | 30 | 31 | ); 32 | 33 | return html; 34 | } -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | 3 | var assetsPath = path.join(__dirname, "public", "assets"); 4 | var serverPath = path.join(__dirname, "server"); 5 | 6 | module.exports = [ 7 | { 8 | name: "browser", 9 | entry: './app/entry.js', 10 | output: { 11 | path: assetsPath, 12 | filename: 'entry.generator.js' 13 | }, 14 | module: { 15 | loaders: [ 16 | { test: /\.js/, loader: "jsx-loader" } 17 | ] 18 | } 19 | 20 | }, 21 | { 22 | name: "server-side rending", 23 | entry: './server/page.js', 24 | output: { 25 | path: serverPath, 26 | filename: "page.generator.js", 27 | // 使用page.generator.js的是nodejs，所以需要将 28 | // webpack模块转化为CMD模块 29 | library: 'page', 30 | libraryTarget: 'commonjs' 31 | }, 32 | module: { 33 | loaders: [ 34 | { test: /\.js$/, loader: 'jsx-loader' } 35 | ] 36 | } 37 | } 38 | ] --------------------------------------------------------------------------------