使用 REACT 在屏幕上看不到任何输出答案

【问题标题】：Not seeing any output on the screen using REACT使用 REACT 在屏幕上看不到任何输出
【发布时间】：2017-12-18 09:32:49
【问题描述】：

我没有在屏幕上看到任何输出，但我也没有收到任何错误。我会发布我认为需要的内容。我正在开始一个新项目并尝试一些不同的事情，因此需要一些帮助。

更新：这是我启动应用程序的方式。我从根目录在控制台中运行npm run server，这是脚本"server": "nodemon --watch server --exec babel-node -- server/index.js"

webpack.config：

import path from 'path';
import webpack from 'webpack';

export default {
  devtool: 'eval-source-map',
  entry: [
    'webpack-hot-middleware/client',
    path.join(__dirname, './client/index.js')
  ],
  output: {
    filename: 'bundle.js',
    path: '/',
    publicPath: '/'
  },
  plugins: [
    new webpack.NoEmitOnErrorsPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ],
  module: {
    loaders: [
      {
        test: /\.js$/,
        include: path.join(__dirname, 'client'),
        loaders: [ 'react-hot-loader', 'babel-loader' ]
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js']
  }
}

index.js：

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

render(<App />, document.getElementById('app'));

index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta content="width=device-width, initial-scale=1" name="viewport" />
  </head>
  <body>
    <div id="app"></div>
    <scrip src="bundle.js" type="text/javascript"></scrip>
  </body>
</html>

应用：

import React from 'react';

class App extends React.Component {
  render() {
    return (
      <h1>!Hello from react!</h1>
    )
  }
}

export default App;

服务器 index.js：

import express from 'express';
import path from 'path';

import webpack from 'webpack';
import webpackMiddleware from 'webpack-dev-middleware';
import webpackHotMiddleware from 'webpack-hot-middleware';
import webpackConfig from '../webpack.config.dev';

const app = express();

const compiler = webpack(webpackConfig);

app.use(webpackMiddleware(compiler));
app.use(webpackHotMiddleware(compiler, {
  hot: true,
  publicPath: webpackConfig.output.publicPath,
  noInfo: true
}));

app.get('/*', (req, res) => {
  res.sendFile(path.join(__dirname, './index.html'));
});

app.listen(3000, () => {
  console.log('listening on port 3000');
});

【问题讨论】：

您在控制台中看不到任何内容？
在 localhost:3000 上的控制台或终端中没有显示任何内容。让我添加服务器 index.js 看看是否有帮助。
嗯，也许这是你如何启动它的问题。解释你是怎么做到的
添加了我如何在顶部启动它
尝试改变这个 app.get('/*', (req, res) => { res.sendFile(path.join(__dirname, './index.html')); }) ;到 app.get('*', (req, res) => { res.sendFile(path.join(__dirname, './index.html')); });

标签： javascript reactjs express webpack

【解决方案1】：

<scrip src="bundle.js" type="text/javascript"></scrip>中的错字

<script> 而不是<scrip>

【讨论】：