Redux React 你好世界

Question

这是我在 React-Redux 中的 Hello World 应用程序。当我在命令提示符下运行 npm start 时没有显示错误，但是当我在 localhost:3333 上打开它时，它是一个空白页面。我安装了reactreact-dombabelbabel-corebabel-preset-es2015babel-preset-reactbabel-loaderwebpackwebpcak-dev-server。我的 cmd 显示其运行ning on localhost:3333 和 bundle 现在有效。请帮忙，因为这是我最后一次尝试 react-redux，请帮忙。

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

您的 webpack.config.js 输出文件名应该是 bundle.js，这应该与您的 index.html

相同

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

Answer 2

终于我找到了错误，它在 html。而不是 <script type="index.js"></script> 我得写 <script src="index.js"></script>.

Redux React 你好世界

Redux React Hello World

webpack

babeljs

es6-module-loader

redux