es6导出引发解析错误：意外令牌

Question

App.js:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

     class App extends Component {
      render() {
        return (
          <div className="App">
            <header className="App-header">
              <img src={logo} className="App-logo" alt="logo" />
              <p>
                Edit <code>src/App.js</code> and save to reload.
              </p>
              <a
                className="App-link"
                href="https://reactjs.org"
                target="_blank"
                rel="noopener noreferrer"
              >
                Learn React
              </a>
            </header>
          </div>
        );
      }
    };

    export App

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import   App   from './App';
import * as serviceWorker from './serviceWorker';

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

(1)When I run the the above code I am getting the below error at last line of App.js ie export statement

"parsing error:unexpected token" 

The error wouldnt go away even when imported the module as

import   { App }  from './App';

I am aware that we can fix this error by writing

export default App 

instead of

export App

it also works if we just append export to App as below

export class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
};

I am not able to figure out this behavior of export statement .I googled but they are only confusing me more.

2)Also whats the difference between

export App

vs

export const App

Answer 1

1. You get an error because you have invalid export syntax. Try export class App instead.
2. When you write export class App , it means that you export a class with a name 'App' from this module. It could be imported then by its name like so: import { App } from App.js ;
3. export default makes passed entity a default exported entity. It means that when you don't specify a name in import statement, default entity will be imported.

// App.js
export default App;

// other_module.js
import App from App.js // import default from App.js and put it into 'App' var

4. export const App means that App won't change in the module from which it was imported. export App is invalid syntax, take a look at export let for clarification on what's the difference.