Добавление React в проект¶

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

Для локальной разработки необходимо установить Node.js.

Хотя вы можете попробовать React онлайн или с помощью простой HTML-страницы, в реальности большинство инструментов JavaScript, которые вы захотите использовать для разработки, требуют Node.js.

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

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

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

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

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

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

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

Допустим, у вас есть существующая страница, построенная на другой технологии (либо серверной, как Rails, либо клиентской, как Backbone), и вы хотите отобразить интерактивные компоненты React где-то на этой странице. Это распространенный способ интеграции 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 с вашим бэкендом.

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

npm install react react-dom

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

index.jsCodeSandbox

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:

index.jsindex.htmlCodeSandbox

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 />);

<!DOCTYPE html>
<html>
    <head>
        <title>My app</title>
    </head>
    <body>
        <p>This paragraph is a part of HTML.</p>
        <nav id="navigation"></nav>
        <p>This paragraph is also a part of HTML.</p>
    </body>
</html>

Обратите внимание, что оригинальное содержимое 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.

Источник — https://react.dev/learn/add-react-to-an-existing-project