Q:

React: Failed to compile; index.js

So I decided to learn React and on the very first project I got an error message.
Failed to compile

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

It's simple "Hello World" code. I have 2 files for that.
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;

I read every post about this problem, none of them works.
I also read that it's usually problem with reactstrap, but I don't have it installed.
Any help would be appreciated.

A:

Your compiler is telling you that you're not exporting anything from App.js, and that this is an error within your index.js (which you haven't shown code for, but that's where you would typically call ReactDOM.render).
Your App.js should look more like your HelloWorld.js (an exported component), and you should be calling ReactDOM.render inside of index.js. This is the only time you'll call 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;

