Інтеграція 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 екран до нього.