Question

我试图获得一个非常简单的react + webpack shell。

所有内容似乎都在捆绑和编译正确，但是当我运行应用程序时，没有任何反应呈现。

我的webpack配置...

  module.exports = {
entry: [
  './src/index.js'
],
module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use:
            {
                loader: 'babel-loader',
                query: {presets: ['react', 'es2015']}
            }
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },
output: {
  path: __dirname + '/dist',
  publicPath: '/',
  filename: 'bundle.js'
},
devServer: {
    contentBase: "./src",
    hot: true,
    port: 3000,
    historyApiFallback: true
} };

的index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>React App Setup</title>
</head>
<body>
    <div id='root'></div>
    <script type="text/javascript" src="bundle.js"></script>
</body>
</html>

和Index.js

   import React from 'react';
   import ReactDOM from 'react-dom';
   import App from './components/App.jsx';

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

如果你需要，可以使用App.js

import React from 'react';

export default class App extends React.Component {
  render() {
      console.log("made it here");
    return (
     <div style={{textAlign: 'center'}}>
        <h1>Hello World</h1>
      </div>);
  }
}

我可能正在使用某种类型的装载机错误，但为什么我会看到＆＃34; Hello Word＆＃34;和我的控制台日志语句在bundle.js中，如果它没有加载???

Answer 1

这里的答案......在身体后加载束。：）

Answer 2

我不知道你提供的内容有什么问题，但我强烈建议你通过npm安装和使用create-react-app：https://www.npmjs.com/package/create-react-app

为此，您可以在命令提示符/ CLI中输入以下内容：

npm install -g create-react-app
create-react-app my-app
cd my-app
npm start

我已经将它用于我所做过的每一个项目，并且在几秒钟内完成“hello world”就没有问题。这将为您提供一个在目录\my-app

中的默认本地主机上运行的hello-world应用程序

React + Webpack我做错了什么

2 个答案: