Создание React-приложения
Если вы хотите создать новое приложение или сайт с помощью React, мы рекомендуем начать с фреймворка.
Если ваше приложение имеет ограничения, которые плохо обслуживаются существующими фреймворками, вы предпочитаете создать собственный фреймворк или просто хотите изучить основы React-приложения, вы можетесоздать React-приложение с нуля.
Фулстек-фреймворки
Эти рекомендуемые фреймворки поддерживают все функции, необходимые для развертывания и масштабирования вашего приложения в продакшене. Они интегрировали последние возможности React и используют преимущества архитектуры React.
Примечание
Фулстек-фреймворкам не требуется сервер.
Все фреймворки на этой странице поддерживают клиентский рендеринг (CSR), одностраничные приложения (SPA) и статическую генерацию сайтов (SSG). Эти приложения можно развернуть наCDNили сервисе статического хостинга без сервера. Кроме того, эти фреймворки позволяют добавлять серверный рендеринг на уровне отдельных маршрутов, когда это целесообразно для вашего случая использования.
Это позволяет начать с клиентского приложения, и если ваши потребности изменятся позже, вы можете включить использование серверных функций на отдельных маршрутах без переписывания приложения. См. документацию вашего фреймворка для настройки стратегии рендеринга.
js (App Router)
App Router Next.js— это React-фреймворк, который в полной мере использует архитектуру React для создания фулстек React-приложений.
npx create-next-app@latestjs поддерживается компаниейVercel. Вы можетеразвернуть приложение Next.jsна любом хостинг-провайдере, который поддерживает Node.js или контейнеры Docker, или на вашем собственном сервере. Next.js также поддерживаетстатический экспорт, который не требует сервера.
React Router (v7)
React Router— это самая популярная библиотека маршрутизации для React, которую можно использовать вместе с Vite для создания фулстек React-фреймворка. Она делает акцент на стандартных веб-API и имеет несколькоготовых к развертыванию шаблоновдля различных сред выполнения JavaScript и платформ.
Чтобы создать новый проект фреймворка React Router, выполните:
npx create-react-router@latestReact Router поддерживается компаниейShopify.
Expo (для нативных приложений)
Expo— это React-фреймворк, который позволяет создавать универсальные приложения для Android, iOS и веба с по-настоящему нативными пользовательскими интерфейсами.Он предоставляет SDK дляReact Native, упрощающий использование нативных частей. Чтобы создать новый проект Expo, выполните:
npx create-expo-app@latestЕсли вы новичок в Expo, ознакомьтесь сруководством по Expo.
Expo поддерживается компаниейExpo (the company). Создание приложений с помощью Expo бесплатно, и вы можете публиковать их в магазинах приложений Google и Apple без ограничений. Expo дополнительно предоставляет платные облачные сервисы по выбору.
Существуют другие развивающиеся фреймворки, которые работают над реализацией нашего видения фулстек React:
- TanStack Start (Beta): TanStack Start — это фулстек React-фреймворк на основе TanStack Router. Он предоставляет полноценный SSR, стриминг, серверные функции, сборку и многое другое с использованием таких инструментов, как Nitro и Vite.
- RedwoodSDK: Redwood — это фулстек React-фреймворк с множеством предустановленных пакетов и конфигураций, которые упрощают создание фулстек веб-приложений.
Начать с нуля
Если ваше приложение имеет ограничения, которые плохо обслуживаются существующими фреймворками, вы предпочитаете создать собственный фреймворк или просто хотите изучить основы React-приложения, есть другие варианты для начала React-проекта с нуля.
Начало с нуля даёт больше гибкости, но требует принятия решений о том, какие инструменты использовать для маршрутизации, загрузки данных и других распространённых паттернов. Это во многом похоже на создание собственного фреймворка вместо использования уже существующего.Рекомендуемые нами фреймворкиимеют встроенные решения для этих проблем.
Если вы хотите создать собственные решения, ознакомьтесь с нашим руководством посозданию React-приложения с нуля, где содержатся инструкции по настройке нового React-проекта, начиная с инструмента сборки, такого какVite,ParcelилиRSbuild.
Если вы автор фреймворка и хотите, чтобы он был представлен на этой странице,сообщите нам об этом.