Создание приложения React
Если вы хотите создать новое приложение или сайт с React, рекомендуем начать с фреймворка.
Если у вашего приложения есть ограничения, которые плохо поддерживаются существующими фреймворками, вы предпочитаете создать собственный фреймворк или просто хотите изучить основы приложения React, вы можете создать приложение React с нуля.
Полностековые фреймворки
Эти рекомендуемые фреймворки поддерживают все функции, необходимые для развёртывания приложения и его масштабирования в рабочей среде. В них интегрированы новейшие возможности React, и они используют преимущества архитектуры React.
Примечание
Полностековым фреймворкам не требуется сервер.
Все фреймворки на этой странице поддерживают рендеринг на стороне клиента (CSR), одностраничные приложения (SPA) и генерацию статических сайтов (SSG). Эти приложения можно размещать в CDN или службе статического хостинга без сервера. Кроме того, эти фреймворки позволяют включать рендеринг на стороне сервера для отдельных маршрутов, если это подходит для вашего сценария использования.
Это позволяет начать с приложения, работающего только на стороне клиента, а если ваши потребности позже изменятся, включить серверные функции для отдельных маршрутов, не переписывая приложение. Инструкции по настройке стратегии рендеринга см. в документации к вашему фреймворку.
Next.js (App Router)
App Router в Next.js — это фреймворк React, который в полной мере использует архитектуру React, позволяя создавать полностековые приложения React.
React Router (v7)
React Router — самая популярная библиотека маршрутизации для React; её можно использовать вместе с Vite для создания полностекового фреймворка React. Она ориентирована на стандартные веб-API и предлагает несколько готовых к развёртыванию шаблонов для различных сред выполнения JavaScript и платформ.
Чтобы создать новый проект на базе фреймворка React Router, выполните команду:
React Router поддерживается компанией Shopify.
Expo (для нативных приложений)
Expo — это фреймворк React, позволяющий создавать универсальные приложения для Android, iOS и веба с по-настоящему нативными интерфейсами. Он предоставляет SDK для React Native, упрощающий работу с нативными компонентами. Чтобы создать новый проект Expo, выполните команду:
Если вы только начинаете работать с Expo, ознакомьтесь с руководством по Expo.
Expo поддерживается компанией Expo. Создавать приложения с Expo можно бесплатно, а отправлять их в магазины приложений Google и Apple можно без ограничений. Кроме того, Expo предлагает платные облачные сервисы, которые можно подключать по желанию.
Другие фреймворки
Появляются и другие перспективные фреймворки, развивающие наше представление о полностековом React:
- TanStack Start (бета-версия): TanStack Start — полностековый фреймворк React на базе TanStack Router. Он поддерживает SSR всего документа, потоковую передачу, серверные функции, сборку и многое другое с помощью таких инструментов, как Nitro и Vite.
- RedwoodJS: Redwood — полностековый фреймворк React с большим набором предустановленных пакетов и настроек, упрощающих создание полностековых веб-приложений.
Подробно
Какие возможности входят в представление команды React о полностековой архитектуре?
Сборщик App Router в Next.js полностью реализует официальную спецификацию React Server Components. Это позволяет объединять в одном дереве React компоненты, создаваемые во время сборки, работающие только на сервере и интерактивные компоненты.
Например, можно написать серверный компонент React как функцию async, которая читает данные из базы данных или файла. Затем можно передать из неё данные интерактивным компонентам:
// 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:
<Suspense fallback={<TalksLoading />}>
<Talks confId={conf.id} />
</Suspense>Server Components и Suspense — это возможности React, а не Next.js. Однако их внедрение на уровне фреймворка требует согласованных усилий и значительной работы по реализации. На данный момент App Router в Next.js — наиболее полная реализация. Команда React сотрудничает с разработчиками сборщиков, чтобы упростить реализацию этих возможностей в следующем поколении фреймворков.
Начало с нуля
Если у вашего приложения есть ограничения, которые плохо поддерживаются существующими фреймворками, вы предпочитаете создать собственный фреймворк или просто хотите изучить основы приложения React, существуют и другие способы начать проект React с нуля.
Начало с нуля даёт больше гибкости, но требует самостоятельно выбрать инструменты для маршрутизации, загрузки данных и других распространённых задач. Это во многом похоже на создание собственного фреймворка вместо использования уже существующего. В рекомендуемых нами фреймворках уже есть встроенные решения этих задач.
Если вы хотите создать собственные решения, ознакомьтесь с нашим руководством по созданию приложения React с нуля. В нём описано, как настроить новый проект React с помощью инструмента сборки, например Vite, Parcel или RSbuild.
Если вы автор фреймворка и хотите, чтобы он был представлен на этой странице, сообщите нам об этом.
© 2013–present Facebook Inc.
Licensed under the Creative Commons Attribution 4.0 International Public License.
https://react.dev/learn/creating-a-react-app
