使用Express的React.js:在使用Express作为服务器时在客户端渲染一个简单的组件?

我是新来的ReactJS和Node.js,我肯定卡住了。 我的问题是,我不能在我的index.html文件中呈现我简单的React组件。 当我在terminal写webpack的时候,会输出一个bundle.js文件。 然后,当我启动使用npm start脚本的webpack-dev-server npm start ,它运行,我可以去localhost:3000 ,它输出: 输出的图像 。 这意味着它不会输出<div id="app"></div>

当我到localhost:3000/bundle/bundle.js它会在浏览器中输出bundle.js文件。

我也尝试在terminal中使用node app.js启动服务器,并启动服务器并在转到localhost:3000时呈现index.html文件,但不会加载bundle.js脚本,而是404。我尝试以多种方式编写src-attribute(../bundle/bundle.js等),但是我无法正常工作。

下面的文件夹结构 我希望它是可读的

 root bundle bundle.js src App.jsx static index.html app.js package.json webpack.config.js 

无论如何,我search了几个小时,我找不到任何解决scheme,所以我希望有人能帮助我。 我会在下面发布相关文件。 干杯!

app.js

 var express = require('express'); var mongoose = require('mongoose'); var bodyParser = require('body-parser'); var user = require('./models/userModel'); var app = express(); app.use(express.static('static')); var port = process.env.PORT || 3000; app.use(bodyParser.json()); app.listen(port); 

的index.html

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Forum</title> </head> <body> <script src="../bundle/bundle.js"></script> <div id="app"></div> </body> </html> 

App.jsx

 var React = require('react'); var ReactDOM = require('react-dom'); var Test = React.createClass({ render: function() { return <h1>Hello world</h1>; } }); ReactDOM.render(<Test />, document.getElementById('app')); 

webpack.config.js

 var webpack = require('webpack'); var path = require('path'); var DEV = path.resolve(__dirname, 'src'); var OUTPUT = path.resolve(__dirname, 'bundle'); var Config = { entry: [ 'webpack-dev-server/client?http://localhost:3000', 'webpack/hot/only-dev-server', DEV + '/App.jsx' ], module: { loaders: [{ exclude: './node_modules/', loaders: ['react-hot', 'babel-loader'] }] }, output: { path: OUTPUT, filename: 'bundle.js' }, devServer: { inline: true }, plugins: [ new webpack.HotModuleReplacementPlugin() ] }; module.exports = Config; 

的package.json

 { "name": "forum", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "webpack-dev-server --port 3000" }, "author": "", "license": "ISC", "dependencies": { "body-parser": "^1.15.2", "express": "^4.14.0", "mongoose": "^4.7.6", "react": "^15.4.1", "react-dom": "^15.4.1" }, "devDependencies": { "babel": "^6.5.2", "babel-core": "^6.21.0", "babel-loader": "^6.2.10", "babel-preset-es2015": "^6.18.0", "babel-preset-react": "^6.16.0", "react-hot-loader": "^1.3.1", "webpack": "^1.14.0", "webpack-dev-server": "^1.16.2" }, "babel": { "presets": [ "es2015", "react" ] } } 

你服务/static但不是/bundle 。 它们是根目录中的两个单独的文件夹。 解决这个问题的一个方法是将你的包输出到你所服务的/static文件夹中:

 // webpack.config.js var OUTPUT = path.resolve(__dirname, 'static/bundle'); 

那么你应该可以像这样加载你的bundle.js

 <script src="/bundle/bundle.js"></script>