Question

这是我在React-Redux中的Hello World应用程序。在命令提示符下运行npm start时没有显示错误，但是当我在localhost：3333上打开它时，它是一个空白页面。我安装了react react-dom babel babel-core babel-preset-es2015 babel-preset-react babel-loader webpack webpcak-dev-server。我的cmd显示它在localhost：3333上运行，而bundle现在是Valid。请帮忙，因为这是我最后一次尝试反应 - 还原，请帮助。

的index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Setup</title>
</head>
<body>
  <div id="app"></div>
  <script type="index.js"></script>
</body>
</html>

App.js

import React from 'react';
class App extends React.Component {
    render() {
        return <div>Hello</div>
    }
}

export default App

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('app'))

的package.json

{
  "name": "redux1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel": "^6.5.2",
    "react": "^0.14.7",
    "react-dom": "^0.14.7",
    "webpack": "^1.12.14",
    "webpack-dev-server": "^1.14.1"
  }
}

webpack.config.js

module.exports = {
    entry: './main.js',
    output: {
        path: './',
        filename: 'index.js'
    },
    devServer: {
        inline: true,
        port: 3333
    },
    module: {
        loaders: [
          {
            test:/\.js$/,
            exclude: /node_modules/,
            loader: 'babel',
            query: {
                presets: ['es2015','react']
            }
          }
        ]
    }
}

标题Setup显示在浏览器选项卡上，即html代码的标题已成功显示在浏览器上

Answer 1

咦。最后我发现了错误，它在html中。而不是<script type="index.js"></script>我要写<script src="index.js"></script>。请不要downvote，它可以作为初学者的HELLO WORLD示例

Answer 2

您的webpack.config.js输出文件名应为bundle.js，与index.html相同

并且index.html应更正为<script src="bundle.js"></script>

Redux React Hello World

2 个答案: