Добавление 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.