es6 export throws Ошибка разбора: неожиданный токен

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) Когда я запускаю приведенный выше код, я получаю приведенную ниже ошибку в последней строке приложения.js т.е. оператор экспорта

"parsing error:unexpected token" 

Ошибка не исчезнет, ​​даже если импортировать модуль как

import   { App }  from './App';

Я знаю, что мы можем исправить эту ошибку, написав

export default App 

вместо

export App

это также работает, если мы просто добавляем экспорт в приложение, как показано ниже

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погуглил но они меня только больше смущают.

2) И в чем разница между

export App

против

export const App

Answer 1

1. Вы получаете ошибку, потому что у вас неверный синтаксис экспорта.Вместо этого попробуйте export class App.
2. Когда вы пишете export class App, это означает, что вы экспортируете класс с именем 'App' из этого модуля.Затем он может быть импортирован по имени следующим образом: import { App } from App.js;
3. export default делает переданную сущность экспортированной сущностью по умолчанию.Это означает, что если вы не укажете имя в операторе импорта, объект по умолчанию будет импортирован.

// App.js
export default App;

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

export const App означает, что приложение не изменится в модуле, из которого оно было импортировано.export App неверный синтаксис, посмотрите на export let для выяснения, в чем разница.