Попытка импортировать ошибку: «Приложение» не экспортируется из «./App»

Question

Я работаю над приложением конвертера валют, я получил код от пера кода (https://codepen.io/jmean/pen/Oxmgxp). Я пытаюсь запустить этот код и получаю эту ошибку: ./src/index.js Попытка импортаошибка: 'App' не экспортируется из './App'.

Я попытался добавить экспорт по умолчанию App (); в index.js, а также в файл App.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'));

Я ожидал, что код скомпилируется и отобразится в браузере так же, как на кодовой ручке.

Answer 1

Существует два способа структурировать пару импорта / экспорта.

По умолчанию:

App.js

export default class App { ... }

index.js

import App from './App';

Non-умолчанию:

App.js

export class App { ... }

index.js

import { App } from './App';

Answer 2

Если это экспорт по умолчанию, вам не нужно помещать импорт в фигурные скобки.

import App from './App';

это то, что вы должны написать.

Answer 3

Существует два способа экспорта,

Именованный экспорт

С именованным экспортом можно иметь несколько именованных экспортов на файл. Затем импортируйте нужный экспорт в фигурные скобки. Имя импортируемого модуля должно совпадать с именем экспортируемого модуля.

// imports
import { MyComponent } from "./MyComponent";

// exports from ./MyComponent.js file
export const MyComponent = () => {}

Экспорт по умолчанию

У каждого файла может быть только один экспорт по умолчанию. Когда мы импортируем, мы должны указать имя и импортировать как:

// import
import MyDefaultComponent from "./MyDefaultExport";

// export
const MyComponent = () => {}
export default MyComponent;

Примечание: Имена импорта полностью независимы при экспорте по умолчанию, и мы можем использовать любое имя, которое нам нравится.