Інтеграція React в існуючий проект
Якщо ви хочете додати інтерактивності до вашого існуючого проєкту, не потрібно переписувати його на React. Додайте React до вашого наявного технологічного стеку і ви зможете рендерити інтерактивні React компоненти будь-де.
Використання React для усього саброуту існуючого вебсайту
Припустимо, що у вас є веб застосунок, що існує за адресою example.com
, створений за допомогою іншої серверної технології (такої як Rails) і ви хочете реалізувати всі роути, які починаються з example.com/some-app/
повністю використовуючи React.
Ось як ми рекомендуємо це налаштувати:
- Побудуйте React частину вашого додатку, використовуючи один із фреймворків на основі React.
- Позначте
/some-app
як базовий шлях в конфігурації вашого фреймворку (ось як: Next.js, Gatsby). - Налаштуйте свій проксі або сервер, щоб всі запити під шляхом
/some-app/
оброблялися вашим React-додатком.
Це забезпечує React-частині вашого застосунку отримання всіх переваг найкращих практик, вбудованих у ці фреймворки.
Багато фреймворків на основі React є повностековими та дозволяють вашому React-додатку скористатися можливостями сервера. Однак ви можете використовувати цей же підхід, навіть якщо ви не можете або не хочете виконувати JavaScript на сервері. У цьому випадку, слід надавати HTML/CSS/JS експорт (next export
вихід для 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 білди з вашим бекендом.
Щоб перевірити, що ваше налаштування працює, запустіть цю команду з папки проєкту:
Після цього додайте ці рядки коду на початку вашого основного 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>Hello, world</h1>);
Якщо весь зміст вашої сторінки був замінений на “Hello, world!”, все спрацювало! Продовжуйте читати.
Крок 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>Hello, world</h1>);
Звісно, насправді ви не хочете видаляти поточний HTML вміст!
Видаліть цей код.
Замість цього, мабуть, ви хочете рендерити ваші React компоненти в специфічних місцях вашого HTML. Відкрийте вашу HTML сторінку (або серверний шаблон що генерує її) і додайте унікальний id
атрибут будь-якому тегові, наприклад:
<!-- ... десь у вашому html ... -->
<nav id="navigation"></nav>
<!-- ... інший html ... -->
Це дозволяє вам знайти цей HTML елемент, використовуючи document.getElementById
і передати його у createRoot
, щоб ви мали змогу рендерити ваші React компоненти всередині нього:
import { createRoot } from 'react-dom/client'; function NavigationBar() { // TODO: Дійсно створити навігаційну панель return <h1>Привіт від 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 Native в існуючому нативному додатку
React Native також може бути інтегрований в існуючі нативні застосунки поступово. Якщо у вас є наявний нативний додаток для Android (Java або Kotlin) або iOS (Objective-C або Swift), дотримуйтесь цього посібника, щоб додати React Native екран до нього.