Додавання React до існуючого проекту

Якщо ви хочете додати трохи інтерактивності до вашого існуючого проекту, вам не потрібно переписувати його на React. Додайте React до існуючого стеку і рендеріте інтерактивні React-компоненти будь-де.

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

Використання 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 output для 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! Як саме ви це зробите, залежить від ваших існуючих налаштувань:

  • Якщо вашу програму вже розбито на файли, які використовують оператори імпорту, спробуйте використати вже наявне налаштування. Перевірте, чи не призводить до синтаксичної помилки написання <div /> у вашому JS-коді. Якщо це призводить до синтаксичної помилки, можливо, вам доведеться трансформувати код JavaScript за допомогою Babel та увімкнути пресет Babel React для використання JSX.

  • Якщо у вашій програмі не налаштовано компіляцію модулів JavaScript, налаштуйте її за допомогою Vite. Спільнота Vite підтримує багато інтеграцій з фреймворками інтерфейсу, зокрема Rails, Django та Laravel. Якщо вашого фреймворку немає у списку, скористайтеся цим посібником, щоб вручну інтегрувати збірки Vite з вашим бекендом.

Щоб перевірити, чи працює ваше налаштування, виконайте цю команду у теці проекту:

npm install react react-dom

Потім додайте ці рядки коду у верхній частині вашого основного файлу JavaScript (він може називатися index.js або main.js):

 
<!DOCTYPE html>
<html>
  <head><title>My app</title></head>
  <body>
    <!-- Your existing page content (in this example, it gets replaced) -->
  </body>
</html>
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>);

Якщо весь вміст вашої сторінки було замінено на "Hello, world!", все запрацювало! Продовжуйте читати.

Вперше інтегрувати модульне середовище JavaScript в існуючий проект може здаватися страшним, але воно того варте! Якщо ви застрягли, спробуйте наші ресурси спільноти або Vite Chat.

Крок 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-компонент всередині:

 
<!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>
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 збережено, але всередині <nav id="navigation"> з'явився ваш власний NavigationBar React-компонент з вашого HTML. Прочитайте документацію по використанню createRoot , щоб дізнатися більше про рендеринг React-компонентів всередині існуючої HTML-сторінки.

Коли ви впроваджуєте React в існуючий проект, зазвичай починають з невеликих інтерактивних компонентів (наприклад, кнопок), а потім поступово продовжують "рухатися вгору", поки, врешті-решт, вся ваша сторінка не буде побудована з використанням React. Якщо ви коли-небудь досягнете цього етапу, ми рекомендуємо перейти на фреймворк React одразу після цього, щоб отримати максимальну віддачу від React.

Використання React Native в існуючому нативному мобільному застосунку

React Native також може бути інтегрований в існуючі нативні програми поступово. Якщо у вас є існуючий нативний застосунок для Android (Java або Kotlin) або iOS (Objective-C або Swift), дотримуйтесь цього посібника, щоб додати до нього екран React Native.