Почему `Export Default Const` недопустим?

Вы также можете сделать что-то подобное, если хотите экспортировать default с помощью const или let, вместо этого:

const MyComponent = ({ attr1, attr2 }) => (<p>Теперь экспорт на другой строке</p>);
export default MyComponent;

Вы можете сделать что-то вроде этого, но мне это лично не нравится:

let MyComponent;
export default MyComponent = ({ }) => (<p>Теперь экспорт на одной строке</p>);

Тем не менее, во втором варианте ваш компонент объявляется и экспортируется сразу, хотя это может приводить к путанице, и не все разработчики это предпочитают.

Если имя компонента уже понятно из имени файла MyComponent.js, можно не указывать название компонента, чтобы сделать код более лаконичным:

import React from 'react'

export default (props) =>
    <div id='static-page-template'>
        {props.children}
    </div>

Обновление: Однако такой подход делает компонент анонимным в трассировке стека, что не рекомендуется.

Обновление 2: Я стал использовать только версию ES5 ниже, так как она сохраняет имена в трассировках стека и в инструментах разработчика React.

import React from 'react'

export default function MyComponent(props) {
    return (
        <div id='static-page-template'>
            {props.children}
        </div>
    )
}

Ответ, предоставленный Полом, действительно является лучшим. Чтобы подробнее объяснить:

В каждом файле может быть только один экспорт по умолчанию. В то время как может быть несколько экспортов с помощью const. Переменную по умолчанию можно импортировать под любым именем, в то время как переменные, экспортируемые с помощью const, нужно импортировать под их конкретными именами.

var message2 = 'Я экспортирован';
export default message2;
export const message = 'Я тоже экспортирован';

На стороне импорта нам нужно делать это следующим образом:

import { message } from './test';

или

import message from './test';

При первом способе мы импортируем переменную const, в то время как при втором способе импортируется переменная по умолчанию.

С export default вы не экспортируете имя, в данном случае, переменной.

Неправильно:

export default const Tab = connect(mapState, mapDispatch)(Tabs);

Правильно:

export default connect(mapState, mapDispatch)(Tabs);

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

Ответ Пола — это то, что вам нужно. Однако, на практике, я думаю, вам будет интересно увидеть паттерн, который я использую в своих приложениях на React+Redux.

Вот упрощенный пример из одного из моих роутов, показывающий, как можно определить ваш компонент и экспортировать его по умолчанию с помощью одной команды:

import React from 'react';
import { connect } from 'react-redux';

@connect((state, props) => ({
    appVersion: state.appVersion
    // другие пропсы сцены, рассчитанные на основе состояния приложения и пропсов роутов
}))
export default class SceneName extends React.Component { /* ... */ }

(Примечание: я использую термин "Сцена" для обозначения верхнеуровневого компонента любого роутинга).

Надеюсь, это будет полезно. Мне кажется, это выглядит гораздо аккуратнее, чем традиционный connect(mapState, mapDispatch)(BareComponent).