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

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

Подробно

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

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

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

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

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

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

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

Сначала установите инструмент сборки, например vite, parcel или rsbuild. Эти инструменты сборки позволяют упаковывать и запускать исходный код, предоставляют сервер разработки для локальной работы и команду сборки для развёртывания приложения на рабочем сервере.

Vite

Vite — это инструмент сборки, цель которого — обеспечить более быструю и лёгкую разработку современных веб-проектов.

Терминал

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

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

Vite уже используется в качестве инструмента сборки в одном из наших рекомендуемых фреймворков — React Router.

Parcel

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

Терминал

npm install --save-dev parcel

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

Rsbuild

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

Терминал

npx create-rsbuild --template react

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

Примечание

Metro для React Native

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

Шаг 2. Реализуйте распространённые шаблоны приложений

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

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

Маршрутизация

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

Маршрутизаторы — важная часть современных приложений. Обычно они интегрируются с получением данных (в том числе с предварительной загрузкой данных для всей страницы, чтобы ускорить её отображение), разделением кода (для уменьшения размера клиентского пакета) и способами рендеринга страниц (определяющими, как создаётся каждая страница).

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

Получение данных

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

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

Обратите внимание: получение данных непосредственно в компонентах может замедлить загрузку из-за каскадных сетевых запросов. Поэтому мы рекомендуем по возможности предварительно загружать данные в загрузчиках маршрутов или на сервере! Так все данные страницы можно загрузить одновременно с её отображением.

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

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

Apollo
Relay

Разделение кода

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

Кроме того, если полагаться на разделение кода средствами используемого вами инструментария, иногда загрузка может оказаться медленнее, чем без разделения кода. Например, ленивая загрузка диаграммы откладывает отправку кода, необходимого для её отображения, отделяя этот код от остальной части приложения. Parcel поддерживает разделение кода с помощью React.lazy. Однако если диаграмма загружает данные после первоначального отображения, вам придётся ждать дважды. Это каскадная загрузка: вместо одновременной загрузки данных для диаграммы и отправки кода для её отображения вам придётся дождаться завершения каждого этапа по очереди.

Разделение кода по маршрутам в сочетании со сборкой и получением данных может сократить время первоначальной загрузки приложения и время до отображения самого крупного видимого элемента приложения (Largest Contentful Paint).

Инструкции по разделению кода см. в документации вашего инструмента сборки:

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

Поскольку выбранный вами инструмент сборки поддерживает только одностраничные приложения (SPA), вам придётся самостоятельно реализовать другие шаблоны рендеринга, например серверный рендеринг (SSR), генерацию статического сайта (SSG) и/или серверные компоненты React (RSC). Даже если эти возможности не нужны вам на начальном этапе, в будущем некоторые маршруты могут выиграть от использования SSR, SSG или RSC.

Одностраничные приложения (SPA) загружают одну HTML-страницу и динамически обновляют её по мере взаимодействия пользователя с приложением. С таких приложений проще начать, но их первоначальная загрузка может занимать больше времени. Для большинства инструментов сборки SPA — это архитектура по умолчанию.
Потоковый серверный рендеринг (SSR) формирует страницу на сервере и отправляет клиенту полностью отрисованную страницу. SSR может повысить производительность, но его настройка и поддержка могут быть сложнее, чем у одностраничного приложения. Потоковый SSR ещё сложнее настроить и поддерживать. См. руководство Vite по SSR.
Генерация статического сайта (SSG) создаёт статические HTML-файлы приложения во время сборки. SSG может повысить производительность, но его настройка и поддержка могут быть сложнее, чем у серверного рендеринга. См. руководство Vite по SSG.
Серверные компоненты React (RSC) позволяют объединять в одном дереве React компоненты, создаваемые во время сборки, доступные только на сервере и интерактивные. RSC могут повысить производительность, но их настройка и поддержка сейчас требуют глубоких знаний. См. примеры RSC для Parcel.

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

Выбор подходящей стратегии рендеринга для каждого маршрута позволяет сократить время до загрузки первого байта контента (Time to First Byte), время до отображения первого фрагмента контента (First Contentful Paint) и время до отображения самого крупного видимого элемента приложения (Largest Contentful Paint).

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

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

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

© 2013–present Facebook Inc.
Licensed under the Creative Commons Attribution 4.0 International Public License.
https://react.dev/learn/build-a-react-app-from-scratch