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

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

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

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

React-фреймворки производственного класса¶

Next.js¶

Next.js — это полнофункциональный React-фреймворк. Он универсален и позволяет создавать React-приложения любого размера — от преимущественно статичного блога до сложного динамического приложения. Чтобы создать новый проект Next.js, выполните в терминале команду:

npx create-next-app

Если вы новичок в Next.js, ознакомьтесь с учебником Next.js.

Next.js поддерживается Vercel. Вы можете развернуть приложение Next.js на любом Node.js или бессерверном хостинге, или на своем собственном сервере. Полностью статические приложения Next.js могут быть развернуты на любом статическом хостинге.

Remix¶

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

npx create-remix

Если вы новичок в Remix, ознакомьтесь с учебником по Remix blog tutorial (краткий) и app tutorial (длинный).

Remix поддерживается Shopify. Когда вы создаете проект Remix, вам нужно выбрать цель развертывания. Вы можете развернуть приложение Remix на любом Node.js или бессерверном хостинге, используя или написав адаптер.

Gatsby¶

Gatsby — это React-фреймворк для быстрых сайтов на базе CMS. Его богатая экосистема плагинов и слой данных GraphQL упрощают интеграцию контента, API и сервисов в один сайт. Чтобы создать новый проект Gatsby, выполните команду:

npx create-gatsby

Если вы новичок в Gatsby, ознакомьтесь с руководством Gatsby tutorial.

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

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

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

npx create-expo-app

Если вы новичок в Expo, ознакомьтесь с Expo tutorial.

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

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

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

Вот почему.

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

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

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

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

Передовые фреймворки React¶

Изучая пути дальнейшего совершенствования React, мы поняли, что более тесная интеграция React с фреймворками (в частности, с маршрутизацией, обвязкой и серверными технологиями) — наша самая большая возможность помочь пользователям React создавать лучшие приложения. Команда Next.js согласилась сотрудничать с нами в исследовании, разработке, интеграции и тестировании не зависящих от фреймворка передовых функций React, таких как React Server Components.

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

Next.js (App Router)¶

Next.js's App Router — это редизайн API Next.js, направленный на реализацию видения полностековой архитектуры команды React. Он позволяет вам получать данные в асинхронных компонентах, которые запускаются на сервере или даже во время сборки.

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

Какие функции составляют видение архитектуры полного стека команды 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. Однако их внедрение на уровне фреймворка требует участия и нетривиальной работы по реализации. На данный момент наиболее полной реализацией является Next.js App Router. Команда React работает с разработчиками бандлеров, чтобы облегчить внедрение этих функций в следующее поколение фреймворков.

Источник — https://react.dev/learn/start-a-new-react-project