反应:编译失败;索引.js

Question

所以我决定学习React，在第一个项目中，我收到了一条错误消息。

编译失败

./src/index.js

尝试导入错误："./App"不包含默认导出（作为"应用"导入）。

这是简单的"Hello World"代码。我有 2 个文件。

应用.js

import React from 'react';
import ReactDOM from 'react-dom';
import HelloWorld from './HelloWorld';
ReactDOM.render(
  <HelloWorld />,
  document.getElementById('root')
);

你好世界.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（导出的组件），并且您应该在 index.js 中调用ReactDOM.render。这是您唯一一次打电话给ReactDOM.render。

索引.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
  <App />,
  document.getElementById('root')
);

应用.js

import React, { Component } from 'react';
import HelloWorld from './HelloWorld';
class App extends Component {
  render() {
    return (
      <div className="App">
        <HelloWorld />
      </div>
    );
  }
}
export default App;

你好世界.js

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

Answer 2

重命名

App.js文件以index.js并删除任何其他索引文件。