Начать новый React-проект

Если вы хотите создать новое приложение или веб-сайт с помощью React, мы рекомендуем выбрать один из популярных в сообществе фреймворков на базе React.

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

Note

Фулстек-фреймворки не требуют сервер.

Все фреймворки на этой странице поддерживают клиентский рендеринг (CSR), одностраничные приложения (SPA), и генерацию статических сайтов (SSG). Эти приложения могут быть выложены в CDN или сервисы статического хостинга без сервера. Также эти фреймворки позволяют добавлять серверный рендеринг для выбранных маршрутов вашего приложения, если того требует ваша задача.

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

Next.js (Маршрутизатор приложения)

**Маршрутизатор приложения Next.js (Next.js App Router) — React-фреймворк, полностью использующий преимущества архитектуры React для создания фулстек-приложений.

Команда Vercel постоянно улучшает Next.js. Вы можете развернуть Next.js-приложение на облачном хостинге с Node.js или бессерверными вычислениями, а также на вашем собственном сервере. Next.js также поддерживает статический экспорт, который не требует сервера. Дополнительно Vercel предлагает платные облачные сервисы.

React Router (v7)

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

Для создания нового проекта c React Router выполните команду:

Terminal

npx create-react-router@latest

React Router поддерживается Shopify.

Expo (для нативных приложений)

Expo — React-фреймворк, который позволяет создавать универсальные приложения с нативными интерфейсами для Android, iOS и браузеров. Он идёт вместе с SDK для React Native и облегчает разработку нативных частей. Чтобы создать новый проект с Expo, запустите в терминале команду:

Terminal

npx create-expo-app

Чтобы узнать больше, ознакомьтесь с руководством по Expo.

Фреймворк поддерживается командой Expo. Вы можете бесплатно создавать приложения с помощью Expo и добавлять их в магазины Apple и Google без каких-либо ограничений. Дополнительно Expo предлагает платные облачные сервисы.

Другие фреймворки

Вот ещё пара перспективных фулстек-фреймворков, следующих нашему архитектурному видению:

TanStack Start (Beta): TanStack Start — фулстек-фреймворк, разрабатываемый TanStack Router. Он предоставляет полнодокументный серверный рендеринг, стриминг, серверные функции, сборку и другие функции, используя такие инструменты как Nitro и Vite.
RedwoodJS: Redwood — фулстек-фреймворк с множеством предустановленных пакетов и конфигураций, которые делают разработку веб-приложений значительно проще.

Deep Dive

Что включает архитектурное видение фулстек-приложений командой React?

Бандлер маршрутизатора приложения Next.js полностью реализует официальную спецификацию серверных React-компонентов. Это даёт возможность сочетать компоненты, сгенерированные во время сборки, на сервере и на клиенте в одном React-дереве.

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

// Этот компонент запускается *только* на сервере (или во время сборки).
async function Talks({ confId }) {
  // 1. Это серверный код, вы можете напрямую обратиться к вашей базе данных без запросов к API.
  const talks = await db.Talks.findAll({ confId });

  // 2. Добавьте любую логику рендеринга. Это не увеличит ваш JavaScript-бандл.
  const videos = talks.map(talk => talk.video);

  // 3. Передайте данные ниже по дереву в компонент, который будет запускаться в браузере.
  return <SearchableVideoList videos={videos} />;
}

Маршрутизатор приложения Next.js также поддерживает загрузку данных с задержкой (Suspense). Так вы можете задать вид различных частей вашего приложения при загрузке (например, показать заглушки) прямо в React-дереве:

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

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

Создать React-приложение с нуля

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

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

Если вы хотите создать собственное решение, посмотрите нашу инструкцию как создавать приложения с нуля и настроить новый React-проект с инструментами вроде Vite, Parcel или RSbuild.

Если вы создатель фреймворка, который достоин включения на эту страницу, пожалуйста, дайте нам знать.

Предыдущая главаInstallation

Следующая главаBuild a React App from Scratch