React
v16.13.1 ПерекладиGitHub

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

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

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

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

Додаємо 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@16/umd/react.development.js" crossorigin></script>  <script src="https://unpkg.com/react-dom@16/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');ReactDOM.render(e(LikeButton), domContainer);

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

Готово!

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

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

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

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

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

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

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

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

Примітка

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

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

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

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

<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/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. Крок 1: Запустіть npm init -y (якщо результатом виконання цієї команди є будь-які помилки, спробуйте дане рішення вашої проблеми)
  2. Крок 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?Редагувати цю сторінку