Добавление React в существующий проект

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

Использование React для всего подмаршрута существующего веб-сайта

Допустим, у вас есть существующее веб-приложение наexample.com, построенное с использованием другой серверной технологии (например, Rails), и вы хотите полностью реализовать все маршруты, начинающиеся сexample.com/some-app/, с помощью React.

Вот как мы рекомендуем это настроить:

1. Соберите React-часть вашего приложенияс использованием одного изфреймворков на основе React.
2. Укажите/some-appв качествебазового путив конфигурации вашего фреймворка (вот как это сделать:Next.js,Gatsby).
3. Настройте ваш сервер или прокситак, чтобы все запросы по пути/some-app/обрабатывались вашим React-приложением.

Это гарантирует, что React-часть вашего приложения сможетвоспользоваться лучшими практиками, заложенными в эти фреймворки.

Многие фреймворки на основе React являются полноценными и позволяют вашему React-приложению использовать преимущества сервера. Однако вы можете использовать тот же подход, даже если не можете или не хотите запускать JavaScript на сервере. В этом случае отдавайте экспорт HTML/CSS/JS (вывод next exportдля Next.js, по умолчанию для Gatsby) по пути/some-app/.

Использование React для части существующей страницы

Допустим, у вас есть существующая страница, построенная с использованием другой технологии (серверной, такой как Rails, или клиентской, такой как Backbone), и вы хотите отрисовать интерактивные React-компоненты где-нибудь на этой странице. Это распространённый способ интеграции React — фактически, именно так выглядело большинство случаев использования React в Meta на протяжении многих лет!

Вы можете сделать это в два шага:

1. Настройте среду JavaScript, которая позволяет использоватьсинтаксис JSX, разделять код на модули с помощью синтаксисаimport/exportи использовать пакеты (например, React) из реестра пакетовnpm.
2. Отрисуйте ваши React-компонентытам, где вы хотите их видеть на странице.

Конкретный подход зависит от настройки вашей существующей страницы, поэтому давайте рассмотрим некоторые детали.

Шаг 1: Настройка модульной среды JavaScript

Модульная среда JavaScript позволяет вам писать ваши React-компоненты в отдельных файлах, в отличие от написания всего кода в одном файле. Она также позволяет использовать все замечательные пакеты, опубликованные другими разработчиками в реестреnpm— включая сам React! Как это сделать, зависит от вашей текущей настройки:

• Если ваше приложение уже разделено на файлы, использующие операторыimport,попробуйте использовать уже имеющуюся настройку. Проверьте, вызывает ли написание<div />в вашем JS-коде синтаксическую ошибку. Если да, возможно, вам потребуетсяпреобразовать ваш JavaScript-код с помощью Babelи включитьпресет React для Babel, чтобы использовать JSX.
• Если в вашем приложении нет существующей настройки для компиляции JavaScript-модулей,настройте её с помощьюVite. Сообщество Vite поддерживаетмножество интеграций с бэкенд-фреймворками, включая Rails, Django и Laravel. Если ваш бэкенд-фреймворк не указан,следуйте этому руководству, чтобы вручную интегрировать сборки Vite с вашим бэкендом.

Чтобы проверить, работает ли ваша настройка, выполните эту команду в папке вашего проекта:

npm install react react-dom

Затем добавьте эти строки кода в начало вашего основного JavaScript-файла (он может называтьсяindex.jsилиmain.js):

Если всё содержимое вашей страницы было заменено на «Hello, world!», значит, всё работает! Продолжайте чтение.

Шаг 2: Рендеринг React-компонентов в любом месте страницы

На предыдущем шаге вы поместили этот код в начало вашего основного файла:

Конечно, на самом деле вы не хотите очищать существующее HTML-содержимое!

Удалите этот код.

Вместо этого, вероятно, вы хотите рендерить свои React-компоненты в определённых местах вашего HTML. Откройте вашу HTML-страницу (или серверные шаблоны, которые её генерируют) и добавьте уникальный атрибутidк любому тегу, например:

Это позволяет найти этот HTML-элемент с помощьюdocument.getElementByIdи передать его вcreateRoot, чтобы вы могли рендерить свой собственный React-компонент внутри:

Обратите внимание, что исходное HTML-содержимое изindex.htmlсохраняется, но ваш собственный React-компонентNavigationBarтеперь появляется внутри тега<nav id="navigation">из вашего HTML. Прочтитедокументацию по использованию createRoot, чтобы узнать больше о рендеринге React-компонентов внутри существующей HTML-страницы.

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

Использование React Native в существующем нативном мобильном приложении

React Nativeтакже можно постепенно интегрировать в существующие нативные приложения. Если у вас есть существующее нативное приложение для Android (Java или Kotlin) или iOS (Objective-C или Swift),следуйте этому руководству, чтобы добавить в него экран на React Native.