Фреймворки React

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

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

Full-stack frameworks

Рекомендуемые фреймворки поддерживают все функции, которые нужны вам для развёртывания и масштабирования приложения в production. В них интегрированы самые новые возможности React, и они используют преимущества архитектуры React.

Full-stack frameworks не требуют сервера.

Все фреймворки на этой странице поддерживают client-side rendering (CSR), single-page apps (SPA) и static-site generation (SSG). Эти приложения можно развёртывать в CDN или в сервисе статического хостинга без сервера. Кроме того, эти фреймворки позволяют добавлять server-side rendering для отдельных маршрутов, когда это имеет смысл для вашего случая.

Это позволяет начать с client-only приложения, а если ваши потребности позже изменятся, вы сможете по желанию использовать server features для отдельных маршрутов без переписывания приложения.

Next.js (App Router)

App Router в Next.js — это React framework, который в полной мере использует архитектуру React, чтобы создавать full-stack React apps.


npx create-next-app@latest

Next.js поддерживается Vercel. Вы можете развернуть приложение Next.js у любого хостинг-провайдера, который поддерживает Node.js или Docker containers, либо на собственном сервере. Next.js также поддерживает static export, для которого не требуется сервер.

React Router (v7)

React Router — самая популярная routing library для React, и её можно использовать вместе с Vite, чтобы создать full-stack React framework. Он делает акцент на стандартных Web APIs и имеет несколько готовых шаблонов для развёртывания для разных JavaScript runtimes и платформ.

Чтобы создать новый проект на базе React Router framework, выполните:


npx create-react-router@latest

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

Expo (для native apps)

Expo — это React framework, который позволяет создавать универсальные Android-, iOS- и web-приложения с по-настоящему native UI. Он предоставляет SDK для React Native, который упрощает работу с native-частями. Чтобы создать новый проект Expo, выполните:


npx create-expo-app@latest

Если вы только начинаете работать с Expo, посмотрите учебник по Expo.

Expo поддерживается Expo (компанией). Создавать приложения с помощью Expo можно бесплатно, и вы можете отправлять их в магазины приложений Google и Apple без ограничений. Кроме того, Expo предоставляет дополнительные платные cloud services по желанию.

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

Есть и другие перспективные фреймворки, которые движутся в сторону нашего видения full stack React:

TanStack Start (Beta): TanStack Start — это full-stack React framework на базе TanStack Router. Он предоставляет full-document SSR, streaming, server functions, bundling и многое другое с использованием таких инструментов, как Nitro и Vite.
RedwoodSDK: Redwood — это full stack React framework с большим количеством предустановленных пакетов и конфигураций, что облегчает создание full-stack web applications.

Начать с нуля

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

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