Файл для каждого компонента

В настоящих React-приложениях каждый компонент лежит в своём файле, названном по имени компонента: Header в Header.jsx, Footer в Footer.jsx. Файлы остаются короткими, компонент находится по имени файла, а один компонент можно использовать в нескольких местах приложения.

Каждый такой файл — это модуль: часть программы со своими переменными и функциями. То, что создано в модуле, существует только в нём, поэтому App.jsx не видит функцию, написанную в Header.jsx. Чтобы App мог использовать Header, нужны две вещи:

1. Header.jsx экспортирует компонент, то есть предлагает его другим файлам. Это делает export default перед функцией.
2. App.jsx импортирует его строкой в начале файла.

// Header.jsx
export default function Header() {
    return (
        <header>
            <h1>Летние звуки</h1>
            <p>Пятница и суббота, три сцены</p>
        </header>
    );
}

// App.jsx
import Header from "./Header.jsx";

export default function App() {
    return (
        <>
            <Header />
            <Lineup />
        </>
    );
}

default означает, что это главное в файле, и такое бывает не больше одного на файл. Имя после import — это имя, под которым компонент будет известен в App.jsx. Можно выбрать любое, но берите имя самого компонента, чтобы все понимали, что это.

Текст в кавычках — это адрес файла. ./ означает «папка, в которой лежит этот файл», поэтому "./Header.jsx" — это файл Header.jsx рядом с App.jsx. Это работает как адреса в HTML: "./components/Header.jsx" лежал бы в папке components, а "../Header.jsx" — на одну папку выше. Имя без ./, например "react", — это не ваш файл, а пакет: код, который написал кто-то другой и который установлен в проекте.

Теперь вы можете прочитать весь main.jsx: он импортирует createRoot из пакета react-dom/client (фигурные скобки — в следующем упражнении), App из App.jsx и style.css, таблицу стилей. Импорт таблицы стилей добавляет её стили на страницу.

В этом упражнении два новых файла, Header.jsx и Footer.jsx, оба пустые. Их вкладки находятся над редактором. Lineup пока остаётся в App.jsx, отдельный файл он получит позже в этом уроке.

Типичные ошибки:

• Без export default страница пустая, а консоль пишет Element type is invalid: … but got: object. You likely forgot to export your component from the file it's defined in… (скорее всего, компонент не экспортирован).
• Без строки import: ReferenceError: Header is not defined.
• Без ./ красное сообщение под предпросмотром скажет, что пакет «Header.jsx» импортировать нельзя. Если имя написано не так, как называется файл, например "./header.jsx", в сообщении будет сказано, что такого файла нет.