reactjs - react : Failed to compile; index.js

Question

因此，我决定学习React，并在第一个项目中收到一条错误消息。
无法编译

./src/index.js

Attempted import error: './App' does not contain a default export (imported as 'App').

这是简单的“Hello World”代码。我有2个文件。
App.js

import React from 'react';
import ReactDOM from 'react-dom';
import HelloWorld from './HelloWorld';

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

HelloWorld.js

import React, { Component } from 'react';
 
class HelloWorld extends Component {
  render() {
    return (
      <div className="helloContainer">
        <h1>Hello, world!</h1>
      </div>
    );
  }
}
 
export default HelloWorld;

我阅读了有关此问题的每篇文章，但均无效果。
我也读到它通常是reactstrap的问题，但是我没有安装它。
任何帮助，将不胜感激。

Answer 1

编译器告诉您，您没有从App.js导出任何内容，这是index.js中的错误(您没有显示代码，但是通常会在其中调用ReactDOM.render)。

您的App.js应该看起来更像您的HelloWorld.js(已导出的组件)，并且您应该在ReactDOM.render内部调用index.js。这是您唯一的一次调用ReactDOM.render。

index.js

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

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

App.js

import React, { Component } from 'react';
import HelloWorld from './HelloWorld';

class App extends Component {
  render() {
    return (
      <div className="App">
        <HelloWorld />
      </div>
    );
  }
}

export default App;

HelloWorld.js

import React, { Component } from 'react';

class HelloWorld extends Component {
  render() {
    return (
      <div className="helloContainer">
        <h1>Hello, world!</h1>
      </div>
    );
  }
}

export default HelloWorld;