Question

我有新的反应并使用节点/快速后端构建一个简单的应用程序并对前端做出反应。我正在尝试渲染我的App组件。我已尝试使用ReactDOM.render，但我已经从“反应”中导入了渲染。并且做出这样的改变什么都没做App组件的文件路径是正确的。没有错误。当我检查DOM时，div是空的。

这是html：

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <title>Hyzer</title>
    <link rel='stylesheet' href='css/application.css'>
  </head>
  <body>

    <div id='app'></div>

    <script type='text/javascript' src='build/bundle.js'></script>

  </body>
</html>

这里是index.js：

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

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

这是App.jsx：

import React, { Component } from 'react';

class App extends Component {
  render() {
    return <h1> Hello World </h1>;
  }
}

export default App;

根据下面的澄清请求编辑添加我的webpack.config.js（删除测试模块，因为它们无关）：

const webpack = require('webpack');
const path = require('path');

const BUILD_DIR = path.resolve(__dirname, './build');

module.exports = {
  mode: 'development',
  context: __dirname,
  entry: {
    main: path.join(__dirname, 'front-end', 'index.js'),
  },
  output: {
    filename: 'bundle.js',
    path: BUILD_DIR,
  },
 };

Answer 1

萨拉，

您需要将App.jsx更改为App.js，然后才能运行。请更改文件名以及将其导入index.js

import App from './components/App.jsx';

制作：

import App from './components/App.js';

并将文件名从App.jsx更改为App.js

Answer 2

我愚蠢地将webpack捆绑到位置build。我的项目正在编译到目录dist，其中index.html的副本显然也存在。一旦我按照@ iceveda06给出的答案更改了包的位置和.jsx文件类型，应用程序就会按预期呈现。谢谢！

反应成分不会渲染。我已经查看了其他问题，无法查看我遗漏的内容

2 个答案: