Question

我正在学习React，我正在尝试在页面上呈现基本组件。似乎什么都没有起作用。同时我在构建期间或浏览器检查器中没有收到任何错误，我似乎无法确定问题的根源。

我的索引html文件：

<!DOCTYPE html>
  <html lang="en">

   <head>
     <meta charset="UTF-8">
     <title>Test</title>
     <meta content="width=device-width, initial-scale=1" name="viewport" />
    </head>

   <body>
     <div id="app">

      </div>
      <script type="text/babel" src="bundle.js"></script>
   </body>

  </html>

这附加到浏览器就好了，如果我要在body标签中插入文本或元素，它会呈现......

我的index.jsx（应用程序的主要内容）如下：

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

 render(
     <div> <h1>Hello World</h1> </div>,
     document.getElementById('app')
 );

我的webpack.config.dev.js如下：

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

export default {

  entry: [
    'webpack-hot-middleware/client',
    path.join(__dirname, '/client/index.jsx')
],
output: {
    path: '/',
    publicPath: '/'
},
plugins: [
    new webpack.HotModuleReplacementPlugin()
],
module: {
    loaders: [
        {
            exclude: /node_modules/,
            test: /\.jsx$/,
            include: [
                path.join(__dirname, 'client')
            ],
            loaders: ['react-hot-loader', 'babel-loader']
        }

    ]

},
  devtool: "eval-source-map"
}

请注意项目文件结构如下客户 - index.jsx 服务器 - server.js - index.html

感谢您提前获得任何帮助，非常感谢！

React不在index.html div＃app中呈现

0 个答案: