Начало нового проекта React¶

Локальная разработка

Для локальной разработки необходимо установить Node.js. Вы можете также выбрать использование Node.js в производстве, но это не обязательно. Многие фреймворки React поддерживают экспорт в статическую папку HTML/CSS/JS.

Могу ли я использовать React без фреймворка?

Вы определенно можете использовать React без фреймворка — именно так вы будете использовать React для части вашей страницы. Однако, если вы создаете новое приложение или сайт полностью на React, мы рекомендуем использовать фреймворк.

Вот почему.

Даже если поначалу вам не нужна маршрутизация или выборка данных, вы, скорее всего, захотите добавить некоторые библиотеки для них. Поскольку ваш набор JavaScript растет с каждой новой функцией, вам, возможно, придется придумать, как разделить код для каждого маршрута в отдельности. По мере усложнения процесса получения данных вы можете столкнуться с сетевыми водопадами между сервером и клиентом, из-за которых ваше приложение будет работать очень медленно. Поскольку ваша аудитория включает больше пользователей с плохими сетевыми условиями и устройствами низкого класса, вам может понадобиться генерировать HTML из ваших компонентов для отображения содержимого на ранних этапах — либо на сервере, либо во время сборки. Изменение настроек для запуска части кода на сервере или во время сборки может быть очень сложным.

Эти проблемы не являются специфичными для React. Именно поэтому у Svelte есть SvelteKit, у Vue есть Nuxt и т.д. Чтобы решить эти проблемы самостоятельно, вам нужно будет интегрировать ваш бандлер с вашим маршрутизатором и с вашей библиотекой получения данных. Добиться первоначальной настройки несложно, но есть много тонкостей, связанных с созданием приложения, которое быстро загружается, даже если оно растет со временем. Вы захотите передать минимальное количество кода приложения, но сделать это за один цикл клиент-сервер, параллельно с любыми данными, необходимыми для страницы. Скорее всего, вы захотите, чтобы страница была интерактивной еще до запуска кода JavaScript, для поддержки прогрессивного улучшения. Возможно, вы захотите создать папку полностью статичных HTML-файлов для ваших маркетинговых страниц, которые можно разместить где угодно и продолжать работать с отключенным JavaScript. Создание таких возможностей самостоятельно требует реальной работы.

React-фреймворки на этой странице решают подобные проблемы по умолчанию, без дополнительной работы с вашей стороны. Они позволяют вам начать с минимальных затрат и затем масштабировать приложение в соответствии с вашими потребностями. У каждого фреймворка React есть сообщество, поэтому найти ответы на вопросы и обновить инструментарий проще. Фреймворки также придают структуру вашему коду, помогая вам и другим людям сохранять контекст и навыки между различными проектами. Напротив, с пользовательской установкой проще застрять на неподдерживаемых версиях зависимостей, и в итоге вы создадите свой собственный фреймворк — пусть и без сообщества и путей обновления (и если он похож на те, что мы создавали в прошлом, то более бессистемно).

Если вы все еще не убеждены, или ваше приложение имеет необычные ограничения, не обслуживаемые этими фреймворками, и вы хотите создать свою собственную настройку, мы не можем вас остановить — действуйте! Возьмите react и react-dom из npm, настройте свой собственный процесс сборки с помощью бандлера, например Vite или Parcel, и добавьте другие инструменты по мере необходимости для маршрутизации, генерации статики или рендеринга на стороне сервера, и многое другое.

Какие функции составляют видение архитектуры полного стека команды React?

Пакет App Router в Next.js полностью реализует официальную спецификацию React Server Components. Это позволяет вам смешивать в одном дереве React компоненты времени сборки, серверные и интерактивные компоненты.

Например, вы можете написать серверный компонент React в виде функции async, которая считывает данные из базы данных или из файла. Затем вы можете передавать данные из него в ваши интерактивные компоненты:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

// This component runs *only* on the server (or during the build).
async function Talks({ confId }) {
    // 1. You're on the server, so you can talk to your data layer.
    // API endpoint not required.
    const talks = await db.Talks.findAll({ confId });

    // 2. Add any amount of rendering logic.
    // It won't make your JavaScript bundle larger.
    const videos = talks.map((talk) => talk.video);

    // 3. Pass the data down to the components that will run in the browser.
    return <SearchableVideoList videos={videos} />;
}

App Router от Next.js также интегрирует выборку данных с Suspense. Это позволяет задавать состояние загрузки (как скелетный заполнитель) для различных частей пользовательского интерфейса непосредственно в дереве React:

1
2
3

<Suspense fallback={<TalksLoading />}>
    <Talks confId={conf.id} />
</Suspense>

Server Components и Suspense — это скорее особенности React, чем особенности Next.js. Однако их внедрение на уровне фреймворка требует участия и нетривиальной работы по реализации. На данный момент наиболее полной реализацией является Next.js App Router. Команда React работает с разработчиками бандлеров, чтобы облегчить внедрение этих функций в следующее поколение фреймворков.