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

export default экспортирует что-то одно, главное в файле. Файл может экспортировать и несколько вещей, каждую под своим именем. Это именованные экспорты, и для них перед каждой функцией пишут просто export:

// Badges.jsx
export function NewBadge() {
    return <span className="badge">Новинка</span>;
}

export function SoldOutBadge() {
    return <span className="badge">Распродано</span>;
}

При импорте именованных экспортов их имена перечисляют в фигурных скобках через запятую:

import { NewBadge, SoldOutBadge } from "./Badges.jsx";

Различие — в фигурных скобках, и на него нужно обращать внимание:

• Экспорт по умолчанию импортируется без скобок, и имя вы выбираете сами: import Header from "./Header.jsx";
• Именованные экспорты импортируются со скобками, под их точными именами: import { NewBadge } from "./Badges.jsx";. Импортируйте только те, что нужны.

Вот почему в main.jsx есть import { createRoot } from "react-dom/client";: createRoot — именованный экспорт пакета. В одном файле могут быть оба вида: один экспорт по умолчанию и сколько угодно именованных. И экспортировать можно любое значение, не только компоненты, например export const festival = "Летние звуки";.

Что выбрать? В большинстве React-проектов у каждого компонента свой файл и экспорт по умолчанию, как вы сделали с Header. Именованные экспорты подходят для файла с несколькими небольшими связанными вещами, например несколькими значками или билетами, или для данных, которые используют сразу несколько компонентов.

Перепутать их — частая ошибка. Импорт без скобок требует экспорта по умолчанию, а импорт со скобками — именованного экспорта с таким именем. Если они не совпадают, импорт даёт undefined, страница пустая, а консоль пишет Element type is invalid: … but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.