Файлы приложения

Приложение на React состоит из нескольких файлов, а их вкладки находятся над редактором. Разберём их в том порядке, в котором их использует браузер.

index.html — это страница. В её body только пустой элемент и скрипт:

<div id="root"></div>
<script type="module" src="main.jsx"></script>

Всё, что вы видите в предпросмотре, помещает в #root React. type="module" позволяет скрипту использовать import, который мы сейчас увидим.

main.jsx запускает приложение:

import { createRoot } from "react-dom/client";
import App from "./App.jsx";
import "./style.css";

createRoot(document.getElementById("root")).render(<App />);

Каждая строка import берёт что-то из другого файла. createRoot приходит из react-dom/client — части React для веб-страниц. App берётся из файла App.jsx (./ означает «в той же папке»), а последний import подключает таблицу стилей. Последняя строка находит #root и говорит React показать в нём <App />. Файл main.jsx одинаков во всех упражнениях этого курса, так что менять его не придётся.

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

export default function App() {
    return <h1>Летние звуки</h1>;
}

export default позволяет другим файлам импортировать функцию: так её получает main.jsx. Подробнее об import и export вы узнаете в уроке «Компоненты». Файлы заканчиваются на .jsx, потому что это JavaScript с JSX — тегами вроде <h1>, записанными прямо в коде.

style.css — это CSS приложения, знакомый вам по курсу CSS.

У React-проекта на вашем компьютере такие же файлы. В последнем уроке вы увидите, как его создать.