Добавление 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 /> в вашем коде JavaScript синтаксическую ошибку. Если это приводит к синтаксической ошибке, возможно, вам нужно преобразовать ваш JavaScript-код с помощью Babel и включить пресет Babel React, чтобы использовать JSX.

• Если ваше приложение не имеет существующей настройки для компиляции модулей JavaScript, настройте её с помощью Vite. Сообщество Vite поддерживает много интеграций с фреймворками бэкенда, включая Rails, Django и Laravel. Если ваш фреймворк бэкенда не указан, следуйте этому руководству, чтобы вручную интегрировать сборки Vite со своим бэкендом.

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

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

import { createRoot } from 'react-dom/client';

// Clear the existing HTML content
document.body.innerHTML = '<div id="app"></div>';

// Render your React component instead
const root = createRoot(document.getElementById('app'));
root.render(<h1>Hello, world</h1>);

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

Шаг 2: Отображение компонентов React в любом месте на странице

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

import { createRoot } from 'react-dom/client';

// Clear the existing HTML content
document.body.innerHTML = '<div id="app"></div>';

// Render your React component instead
const root = createRoot(document.getElementById('app'));
root.render(<h1>Hello, world</h1>);

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

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

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

<!-- ... somewhere in your html ... -->
<nav id="navigation"></nav>
<!-- ... more html ... -->

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

import { createRoot } from 'react-dom/client';

function NavigationBar() {
  // TODO: Actually implement a navigation bar
  return <h1>Hello from React!</h1>;
}

const domNode = document.getElementById('navigation');
const root = createRoot(domNode);
root.render(<NavigationBar />);

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

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

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

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