Додаємо React до сайту

These docs are old and won’t be updated. Go to react.dev for the new React docs.

See Add React to an Existing Project for the recommended ways to add React.

Використовуйте лише ту частину React, яка вам потрібна.

З самого початку React був спроектований для поступового вбудовування і ви можете використати ту частину React, яка вам потрібна. Можливо, ви тільки хочете “оживити” елементи існуючого сайту. React-компоненти є чудовим способом зробити це.

Більшість сайтів в інтернеті не є і не мають бути односторінковими додатками. Спробувати React в невеликих місцях вашого сайту можна за допомогою декількох рядків коду і без інструментів збірки. За бажанням, ви зможете потім поступово поширювати React на сайті або залишити в декількох динамічних віджетах.

Додаємо React за одну хвилину
Необов’язково: Спробуйте React з JSX (без необхідності в бандлерах!)

Додаємо React за одну хвилину

У цьому розділі ми покажемо, як додати React-компонент до існуючої HTML сторінки. Ви можете практикуватися на своєму сайті або створити для даних цілей пустий HTML файл.

Вам не потрібно встановлювати складні інструменти або що-небудь інше — для того, щоб пройти даний розділ, вам потрібен доступ в Інтернет і хвилинка вільного часу.

Необов’язково: Завантажити готовий приклад (2Кб в архіві)

Крок 1: Додайте DOM-контейнер до HTML структури

По-перше, відкрийте HTML сторінку, яку ви хочете відредагувати. Додайте пустий <div> тег, щоб показати де ви хочете відобразити що-небудь з React. Для прикладу:

<!-- ... існуючий HTML-код ... -->

<div id="like_button_container"></div>
<!-- ... існуючий HTML-код ... -->

Ми дали цьому <div>-у id HTML-атрибут, який є унікальним. Це дозволить нам знайти його пізніше за допомогою JavaScript-коду та відобразити React-компонент всередині нього.

Порада

Ви можете вставити “контейнер” <div> будь-де всередині тегу <body>. Ви можете створювати стільки незалежних DOM-контейнерів на одній сторінці, скільки вам потрібно. Вони зазвичай пусті — React замінить будь-який існуючий вміст всередині DOM контейнерів.

Крок 2: Додайте теги скриптів

Далі, додайте три теги <script> до HTML-сторінки перед закриваючим тегом </body>:

  <!-- ... інший HTML-код ... -->

  <!-- Завантажимо React. -->
  <!-- Примітка: перед розгортанням на продакшн, замініть "development.js" на "production.min.js". -->
  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
  <!-- Завантажимо наш React-компонент. -->
  <script src="like_button.js"></script>
</body>

Перші два теги завантажують React. Третій завантажує код вашого компонента.

Крок 3: Створіть React-компонент

Створіть файл з назвою like_button.js в директорії з вашою HTML-сторінкою.

Відкрийте цей початковий код і вставте його у файл, який ви створили раніше.

Порада

Цей код описує компонент React під назвою LikeButton. Не хвилюйтесь, якщо ви не розумієте його — ми охопимо розробку React-компонентів пізніше в нашому практичному підручнику і довідці про основні концепти React. Зараз же давайте відобразимо його на екрані!

Після початкового коду додайте два рядки коду в кінці like_button.js:

// ... початковий код, який ви скопіювали...

const domContainer = document.querySelector('#like_button_container');const root = ReactDOM.createRoot(domContainer);root.render(e(LikeButton));

Ці два рядки коду шукають <div>, який ми додали до нашого HTML-файлу в першому кроці і потім відображає React-компонент кнопки “Мені подобається” всередині нього.

Готово!

Ось і все! Ви щойно додали ваш перший React-компонент до вашого сайту.

Ознайомтесь з наступними розділами, щоб дізнатися про інші способи додавання React на ваш сайт.

Подивитися фінальний код прикладу

Завантажити код прикладу (2Кб в архіві)

Порада: Повторно використовуйте компоненти

Зазвичай ви, мабуть, хотіли би відобразити React-компонент у кількох місцях на HTML-сторінці. Цей приклад показує кнопку “Мені подобається” три рази із різними даними:

Подивитися повний першокод

Завантажити код прикладу (2Кб в архіві)

Примітка

Цей принцип найбільш доречний для сторінок сайту, які містять написані на React ізольовані частини коду. Всередині чистого React-коду простіше користуватися композицією компонентів.

Порада: Виконуйте стиснення JavaScript-коду перед розгортанням

Перед публікацією вашого сайту на продакшн не забудьте про те, що нестиснений JavaScript-код може значно сповільнити швидкість завантаження сторінки для ваших користувачів.

Якщо ви вже стискаєте скрипти вашого додатку, то ваш сайт буде готовим для публікації на продакшн, якщо ви впевнитесь в тому, що опублікована HTML-сторінка завантажує версії React, які закінчуються на production.min.js:

<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>

Якщо ви ще не налаштували стискання для ваших скриптів, то цей варіант може вам допомогти із цим.

Необов’язково: Спробуйте React з JSX

В попередніх прикладах ми використовували тільки звичайні можливості сучасних браузерів. Тому ми використали JavaScript функцію, мета якої описати React, що відобразити на екран:

const e = React.createElement;

// Відобразити <button> з текстом "Мені подобається"
return e(
  'button',
  { onClick: () => this.setState({ liked: true }) },
  'Мені подобається'
);

Однак React також пропонує можливість використовувати спеціальний синтаксис під назвою JSX:

// Відобразити <button> з текстом "Мені подобається"
return (
  <button onClick={() => this.setState({ liked: true })}>
    Мені подобається
  </button>
);

Ці два приклади виконують одну і ту ж річ. Незважаючи на те, що JSX є цілком необов’язковим, багато людей вважають його зручним для розробки інтерфейсів користувача — як із React, так і з іншими бібліотеками.

Ви можете спробувати JSX у цьому онлайн-конвертері.

Швидкий старт з JSX

Найшвидший спосіб спробувати JSX в вашому проекті — це додати тег <script> до вашої сторінки:

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

Тепер ви можете використовувати JSX в будь-якому <script>-тегу за допомогою додавання атрибуту type="text/babel". Ось приклад HTML-файлу з JSX, який ви можете завантажити і поекспериментувати з ним.

Такий спосіб прекрасний для навчання і створення простих демо. Однак це робить ваш сайт повільним і непридатним для публікації в продакшн. Тому для розгортання React-компоненту з JSX краще зробити по-іншому. Коли ви готові до кроку вперед, видаліть тег <script> і атрибут type="text/babel", який ми додали раніше. Замість цього, в наступному розділі ви встановите JSX-препроцесор для того, щоб трансформувати код всередині тегів <script> автоматично.

Додаємо JSX в проект

JSX не потребує від проекту складних інструментів як бандлер або сервер для розробки. По суті, додавання JSX нагадує додавання CSS-препроцесора. Головною вимогою є наявність встановленого Node.js на вашому комп’ютері.

Перейдіть до директорії вашого проекту в терміналі і вставте наступні дві команди:

Крок 1: Запустіть npm init -y (якщо результатом виконання цієї команди є будь-які помилки, спробуйте дане рішення вашої проблеми)
Крок 2: Запустіть npm install babel-cli@6 babel-preset-react-app@3

Порада

Ми використовуємо в даному прикладі менеджер пакунків npm лише для того, щоб встановити JSX препроцесор. React і код додатку може залишатися в тегах <script> без змін.

Вітаємо! Ви щойно додали у ваш проект підтримку JSX, яка готова до публікації в продакшн.

Запускаємо препроцесор JSX

Створіть директорію під назвою src і запустіть наступну команду в терміналі:

npx babel --watch src --out-dir . --presets react-app/prod

Примітка

npx не є помилкою — це інструмент запуску пакетів, який з’явився в npm версії 5.2+.

Якщо ви отримали помилку, схожу на “You have mistakenly installed the babel package”, це значить що вам необхідно перейти до попереднього кроку і виконати команду ще раз.

Не чекайте на завершення цієї команди — ця команда запускає автоматичне спостереження і реагування на будь-які зміни в коді JSX.

Тепер спробуйте створити файл під назвою like_button.js в директорії src/ з цим стартовим кодом JSX. Препроцесор автоматично трансформує новий код в JavaScript-код, який “розуміють” браузери. Коли ви внесете зміни до файлу з JSX, препроцесор перезапустить процесс трансформування автоматично.

В якості бонуса, це також вам дасть використовувати сучасні синтаксичні новинки JavaScript, як класи, без хвилювань про несумісність з старими браузерами. Інструмент, який ми щойно додали, називається Babel, докладніше познайомитися з ним ви можете завдяки його документації.

Якщо вам стає більш комфортно з інструментами збірки і хочете аби вони робили більше для вас, наступний розділ описує деякі із найпопулярніших способів. Якщо ні — цих тегів script цілком достатньо!

Is this page useful?Редагувати цю сторінку