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

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

Рассмотрите возможность использования фреймворка

Начать с нуля — это простой способ начать использовать React, но важно понимать один серьёзный компромисс: этот путь часто означает, что вы фактически создаёте собственный импровизированный фреймворк.

Например, если в будущем вашему приложению потребуется поддержка server-side rendering (SSR), static site generation (SSG) и/или React Server Components (RSC), вам придётся реализовывать всё это самостоятельно. Аналогично, будущие возможности React, требующие интеграции на уровне фреймворка, также придётся реализовывать самостоятельно, если вы захотите их использовать.

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

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

Список рекомендуемых фреймворков можно найти в разделе Создание React-приложения.

Шаг 1: Установите инструмент сборки.

Первый шаг — установить build tool, такой как vite, parcel или rsbuild. Эти инструменты предоставляют возможности для сборки и запуска исходного кода, development server для локальной разработки и команду сборки для деплоя приложения на production сервер.

Vite

Vite — это build tool, который стремится обеспечить более быстрый и лёгкий процесс разработки для современных web-проектов.


npm create vite@latest my-app -- --template react-ts

У Vite богатая экосистема плагинов для поддержки fast refresh, JSX, Babel/SWC и других распространённых возможностей. Чтобы начать, посмотрите React plugin для Vite, React SWC plugin и пример проекта с React SSR.

Vite уже используется как build tool в одном из рекомендуемых фреймворков: React Router.

Parcel

Parcel сочетает отличный опыт разработки "из коробки" с масштабируемой архитектурой, которая позволяет вашему проекту расти от начальной стадии до крупных production-приложений.


npm install --save-dev parcel

Parcel поддерживает fast refresh, JSX, TypeScript, Flow и стилизацию из коробки. Чтобы начать, смотрите React-рецепт Parcel.

Rsbuild

Rsbuild — это build tool на базе Rspack, обеспечивающий удобный процесс разработки для React-приложений. Он поставляется с тщательно настроенными параметрами по умолчанию и оптимизациями производительности.


npx create-rsbuild --template react

Rsbuild включает встроенную поддержку таких возможностей React, как fast refresh, JSX, TypeScript и стилизация. Чтобы начать, смотрите руководство по React в Rsbuild.

Metro для React Native

Если вы начинаете с нуля с React Native, вам потребуется использовать Metro — JavaScript bundler для React Native. Metro поддерживает сборку для таких платформ, как iOS и Android, но уступает по возможностям инструментам, перечисленным выше. Мы рекомендуем использовать Vite, Parcel или Rsbuild, если только вашему проекту не требуется поддержка React Native.

Шаг 2: Разработка общих шаблонов приложений

Перечисленные выше build tools создают client-only single-page app (SPA), но не предоставляют решений для типичных задач, таких как routing, data fetching или стилизация.

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

Routing

Routing определяет, какой контент или страницы отображать при переходе пользователя по определённому URL. Вам нужно настроить router, который будет сопоставлять URL с разными частями приложения. Также потребуется обрабатывать вложенные маршруты, параметры маршрутов и query parameters. Router можно настраивать в коде или определять на основе структуры папок и файлов компонентов.

Router — это ключевая часть современных приложений и обычно интегрируется с data fetching (включая предварительную загрузку данных), code splitting (для уменьшения размера client bundle) и стратегиями рендеринга (для определения способа генерации страниц).

Мы рекомендуем использовать:

Data Fetching

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

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

Обратите внимание, что получение данных напрямую в компонентах может приводить к замедлению загрузки из-за "waterfall" сетевых запросов, поэтому мы рекомендуем по возможности выполнять предварительную загрузку данных в router loaders или на сервере.

Если вы работаете с большинством backend или REST API, мы рекомендуем:

Если вы используете GraphQL API, рекомендуем:

Apollo
Relay

Code-splitting

Code-splitting — это процесс разделения приложения на более мелкие части (bundles), которые можно загружать по требованию. Размер кода приложения растёт с каждой новой функцией и зависимостью, что может замедлить загрузку.

Кэширование, уменьшение количества функций и перенос части логики на сервер помогают, но не решают проблему полностью.

Если полагаться на приложения, использующие ваш framework, для реализации code-splitting, можно столкнуться с ситуацией, когда загрузка станет даже медленнее. Например, ленивая загрузка графика откладывает загрузку кода, необходимого для его отображения. Parcel поддерживает code splitting через React.lazy. Однако если данные графика загружаются после его первого рендера, возникает двойная задержка — классический "waterfall".

Разделение кода по маршрутам в сочетании с bundling и data fetching может значительно ускорить начальную загрузку приложения и время отрисовки основного контента (Largest Contentful Paint).

Инструкции по code-splitting смотрите в документации вашего build tool:

Повышение производительности приложений

Поскольку выбранный вами build tool поддерживает только single-page apps (SPA), вам придётся самостоятельно реализовать другие rendering patterns, такие как server-side rendering (SSR), static site generation (SSG) и/или React Server Components (RSC).

Single-page apps (SPA) загружают одну HTML-страницу и динамически обновляют её при взаимодействии пользователя. Их проще реализовать, но у них может быть более медленная начальная загрузка.
Streaming Server-side rendering (SSR) рендерит страницу на сервере и отправляет её клиенту. Это улучшает производительность, но усложняет реализацию и поддержку.
Static site generation (SSG) генерирует статические HTML-файлы во время сборки. Это улучшает производительность, но также усложняет настройку.
React Server Components (RSC) позволяют комбинировать build-time, server-only и interactive components в одном React tree.

Стратегии рендеринга должны быть интегрированы с router, чтобы можно было выбирать подход для каждого маршрута отдельно без переписывания всего приложения.

Правильный выбор стратегии рендеринга может сократить:

время до первого байта (Time to First Byte)
время до первого отображения контента (First Contentful Paint)
время до отображения основного контента (Largest Contentful Paint)

И многое другое…

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

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

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

On this page