Question

所以我决定学反应，在第一个项目中，我得到一个错误信息。

编译失败

./ src / index.js

尝试导入错误：“./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，并删除其他所有索引文件。

Answer 2

您的编译器告诉您您没有从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;

阵营：无法编译; index.js

2 个答案:

index.js

App.js

HelloWorld.js