Добавление React в существующий проект
Если вы хотите добавить интерактивность в существующий проект, вам необязательно переписывать его полностью на React. Добавьте React в уже существующий стек, и осуществляйте отображение интерактивных React-компонентов где угодно.
Использование React для выбранного пути имеющегося веб-сайта
Предположим, что у вас уже есть веб-приложение расположенное на домене example.com и построенное с помощью какой-либо серверной технологии (например, Rails). И теперь вы хотите перенести все пути, начинающиеся с example.com/some-app/ полностью на React.
Вот как мы рекомендуем это сделать:
- Разработайте часть приложения с использованием React, используя один из фреймворков основанных на нем.
- Укажите
/some-appкак базовый путь в конфигурационном файле вашего фреймворка (например: Next.js, Gatsby). - Сконфигурируйте ваш сервер или прокси таким образом, чтобы все запросы с путем
/some-app/обрабатывались вашим React приложением.
Такой подход гарантирует, что часть вашего приложения, написанная на React, сможет получить максимум от best-practice подходов, используемых в основе этих фреймворков.
Большинство фреймворков построенных на основе React являются full-stack решениями и позволяют вашему React приложению получать больше преимуществ за счет использования сервера. Однако, вы можете использовать такой подход даже если вы не можете или не хотите запускать JavaScript на стороне сервера. В таком случае, используйте именованный экспорт HTML/CSS/JS (см. раздел next export для Next.js, и по умолчанию для Gatsby) на пути /some-app/.
Использование React, как часть имеющегося приложения
Предположим, что у вас уже есть веб-страница, разработанная с использованием другой технологии (или серверной, например, Rails, или клиентской, например, Backbone), и вы хотите отображать интерактивные React компоненты где-либо на этой странице. Далее приведен общепринятый подход к интеграции Данный подход является наиболее распространенным для интеграции React. Стоит заметить, что такой подход являлся также наиболее распространенным в компании Meta на протяжении многих лет!
Для его реализации выполните следующие шаги:
- Укажите среду исполнения JavaScript таким образом, чтобы можно было использовать синтаксис JSX, разделите ваш код на модули при помощи синтаксиса
import/export, и воспользуйтесь пакетами (например, React) из репозитория пакетов npm. - Отобразите ваши React компоненты там, где хотите, чтобы они располагались на странице.
Такой подход зависит от вашей текущей конфигурации страниц, так что нам необходимо обсудить несколько деталей.
Шаг 1: Задайте модульную среду исполнения JavaScript
Модульная среда исполнения JavaScript позволяет вам описывать ваши React компоненты в отдельных файлах, вместо того, чтобы писать весь ваш код в одном файле. Это также позволит вам пользоваться замечательными пакетами, опубликованные другими разработчиками в репозитории npm включая сам React! То, как это сделать – зависит от вашей текущей конфигурации:
-
Если ваше приложение уже разделено на файлы с использованием ключевого слова
import, попробуйте воспользоваться имеющейся конфигурацией. Проверьте, вызывает ли синтаксис вида<div />внутри вашего JS кода синтаксическую ошибку. Если да – то вам, скорее всего, необходимо осуществлять трансформацию вашего JavaScript кода с помощью Babel, и включить Babel пресет для React, чтобы использовать JSX. -
Если в вашем приложении отсутствует какая-либо конфигурация для компиляции JavaScript модулей, настройте ее с помощью Vite. Сообщество Vite осуществляет доступность большого количества интеграции с серверными фреймворками, включая Rails, Django, и Laravel. Если ваш серверный фреймворк не включен в список, то воспользуйтесь этой инструкцией для ручной интеграции сборки Vite с серверной частью вашего приложения.
Для того чтобы убедиться, что ваша конфигурация работает, запустите следующую команду внутри вашей папки проекта:
После чего, добавьте следующие строчки кода сверху вашего главного JavaScript файла (он может иметь название index.js или main.js):
import { createRoot } from 'react-dom/client'; // Очищаем существующий HTML контент document.body.innerHTML = '<div id="app"></div>'; // Отображаем ваш React компонент вместо него const root = createRoot(document.getElementById('app')); root.render(<h1>Привет, мир</h1>);
Если абсолютно весь контент вашей страницы будет заменен фразой “Привет, мир!” - то все отработало правильно! Продолжайте прочтение.
Шаг 2: Отображение React компонентов в любом месте страницы
В предыдущем шаге вы расположили следующий код сверху вашего главного файла:
import { createRoot } from 'react-dom/client';
// Очищаем существующий HTML контент
document.body.innerHTML = '<div id="app"></div>';
// Отображаем ваш React компонент вместо него
const root = createRoot(document.getElementById('app'));
root.render(<h1>Привет, мир</h1>);Однако, как было описано ранее, это приведет к полному удалению контента страницы. Конечно же, вы не горите желанием удалять существующий HTML контент!
Поэтому, удалите этот код.
Вместо полной замены контента, вы, скорее всего, хотите отображать ваши React компоненты в конкретных местах вашего HTML кода. Откройте вашу HTML страницу (или шаблоны, расположенные на сервере, которые его генерируют) и добавьте уникальные id атрибуты к любому тегу, например:
<!-- ... где-то внутри вашего html ... -->
<nav id="navigation"></nav>
<!-- ... больше html ... -->Это позволит вам, в дальнейшем, найти этот элемент при помощи вызова функции document.getElementById и передать его в функцию createRoot для отображения вашего React компонента внутри него:
import { createRoot } from 'react-dom/client'; function NavigationBar() { // TODO: реализовать NavBar return <h1>Вам привет от React!</h1>; } const domNode = document.getElementById('navigation'); const root = createRoot(domNode); root.render(<NavigationBar />);
Обратите внимание, что оригинальный 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 экрана в него.