爲什麼不快速渲染我的React應用程序？

我正在構建一個React應用程序w/Express。我的服務器工作正常，我的Webpack創建我的js文件沒有問題，但由於某種原因我的應用程序不呈現。爲什麼不快速渲染我的React應用程序？

這裏是我的測試程序：

import React from 'react'; 
import { render } from 'react-dom'; 
import Application from './Application'; 

console.log('works!'); 


function TestApp({}) { 
    return (
    <div className="TestApp">Does this work?</div> 
); 
} 


render(<TestApp />, document.getElementById('root'));

這裏是我的html：

<!DOCTYPE html> 
<html> 
    <head> 
    <title>React Test App</title> 
    </head> 
    <body> 
    <div id="root" /> 
    <script src="js/bundle.js" async /> 
    </body> 
</html>

這裏是我的webpack.config.js文件：

const path = require('path'); 
const webpack = require('webpack'); 

module.exports = { 
    context: path.resolve(__dirname, './app/assets/js/'), 
    entry: './bundle', 
    output: { 
    path: path.resolve(__dirname, './public/assets/js/'), 
    filename: 'bundle.js', 
    publicPath: "/js/", 
    }, 
    resolve: { 
    extensions: ['', '.js', '.jsx', '.json'] 
    }, 
    plugins: [ 
    new webpack.optimize.UglifyJsPlugin({ 
     compress: { 
     warnings: false 
     } 
    }), 
    ], 
    module: { 
    preLoaders: [{ 
     test: /\.(js|jsx)$/, 
     loader: 'eslint-loader', 
     exclude: /node_modules/, 
    }], 
    loaders: [{ 
     test: /\.(js|jsx)$/, 
     exclude: /node_modules/, 
     loader: 'babel-loader', 
    }, { 
     test: /\.css$/, 
     loader: 'style!css', 
    }, ] 
    }, 
    watch: true 
};

，這裏是我的中間件：

var express = require('express.io'); 
var app = express(); 
var bodyParser = require('body-parser'); 
var cookieParser = require('cookie-parser'); 
var path = require('path'); 

app.use(bodyParser.urlencoded({ 
    extended: true 
})); 
app.use(bodyParser.json()); 

var port = process.env.PORT || 8080; 

app.set('view engine', 'ejs'); 

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

app.set('views', path.join(__dirname, './app/views')); 

router = express.Router(); 

    router.get("*", (req, res) => { 
    res.render("index.ejs"); 
    }); 

    app.use("/", router); 

app.listen(port, function (error) { 
    return error 
    ? console.error(error) 
    : console.info("Listening on port %s", port); 
});

任何線索我可能做錯了什麼？

來源

2016-05-15 Wilhelm

它可以是類型res.render（「index.ejs」）;我認爲它應該是「index.js」 – fayzaan

這取決於您在index.ejs文件中提供的html嗎？ –

只有真正的1337 h4xx0rs可以使用反應。 – r3wt

看起來你想改變res.render("index.ejs");與res.sendfile("index.html");

編輯：關於第二個想法; webpack.config.js中的entry字段看起來不正確。它應該指向你的基礎JavaScript文件。您的軟件包是否包含當前配置的任何內容？

來源

2016-05-15 21:58:56 hansn

「您的軟件包是否包含當前配置的任何內容？」我不確定你的意思，但在我的終端控制檯中沒有錯誤，並且js文件似乎正在編譯好。 – Wilhelm

@Wilhelm檢查它是否捆綁了正確的文件，您可以檢查是否可以在兩個地方找到相同的代碼 - 在實際文件和捆綁包中。如果你的主JavaScript文件被稱爲'bundle'，它應該至少有一個.js擴展名，所以試着將輸入字段改爲你的主JavaScript文件，看看會發生什麼。 – hansn

嘗試所有這些事情都沒有成功。此外，'.js'文件的名稱是'bundle.js' Webpack不需要'entry'選項的'.js'擴展名，因爲它假設'.js'是擴展名。 – Wilhelm

爲什麼不快速渲染我的React應用程序？

回答

相關問題