React.js with Express: визуализировать простой компонент на стороне клиента при использовании Express в качестве сервера?

Я новичок в ReactJS и Node.js, и я определенно застрял. Моя проблема заключается в том, что я не могу отобразить мой простой компонент React в моем файле index.html. Когда я пишу webpack в терминале, он выводит файл bundle.js. Затем, когда я запускаю webpack-dev-сервер, используя сценарий npm start, он запускается, и я могу перейти на localhost:3000, он выводит это: Image of output. Это означает, что он не выводит <div id="app"></div>.React.js with Express: визуализировать простой компонент на стороне клиента при использовании Express в качестве сервера?

И когда я перехожу к localhost:3000/bundle/bundle.js, он выводит файл bundle.js в браузере.

Я также попытался запустить сервер с помощью node app.js в терминале, и он запускает сервер и делает файл index.html, когда я иду в localhost:3000, но не загружает bundle.js сценария, а это 404. Я пробовал писать атрибут src несколькими способами (../bundle/bundle.js и т. Д.), Но я не могу заставить его работать.

Структура папки ниже. Я надеюсь, что это читаемый

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

В любом случае, я искал в течение нескольких часов, и я не могу найти решение, поэтому я надеюсь, что кто-то может помочь мне. Я опубликую соответствующие файлы ниже. Ура!

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" 
    ] 
    } 
}

источник

2017-01-07 Jimmy Höglund

вы пытались установить маршрут по умолчанию? например, app.get ('/', function (req, res) { res.sendfile ('./ statics/index.html'); }); –

@EthanLi Нет необходимости в маршрутизации, если вы хотите использовать только статические файлы. –

Вы служите /static но не /bundle. Это две отдельные папки в вашем корне. Один из способов, чтобы исправить это было бы вывести ваш пакет в /static папку, которую вы обслуживаете:

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

Тогда вы должны быть в состоянии загрузить в вашем bundle.js так:

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

источник

2017-01-07 22:40:05

Да, это сработало как шарм! Большое спасибо за то, что помогли мне начать работу. –

React.js with Express: визуализировать простой компонент на стороне клиента при использовании Express в качестве сервера?

ответ

Смежные вопросы