Використовуйте лише ту частину React, яка вам потрібна.
\nЗ самого початку React був спроектований для поступового вбудовування і ви можете використати ту частину React, яка вам потрібна. Можливо, ви тільки хочете “оживити” елементи існуючого сайту. React-компоненти є чудовим способом зробити це.
\nБільшість сайтів в інтернеті не є і не мають бути односторінковими додатками. Спробувати React в невеликих місцях вашого сайту можна за допомогою декількох рядків коду і без інструментів збірки. За бажанням, ви зможете потім поступово поширювати React на сайті або залишити в декількох динамічних віджетах.
\nУ цьому розділі ми покажемо, як додати React-компонент до існуючої HTML сторінки. Ви можете практикуватися на своєму сайті або створити для даних цілей пустий HTML файл.
\nВам не потрібно встановлювати складні інструменти або що-небудь інше — для того, щоб пройти даний розділ, вам потрібен доступ в Інтернет і хвилинка вільного часу.
\nНеобов’язково: Завантажити готовий приклад (2Кб в архіві)
\nПо-перше, відкрийте HTML сторінку, яку ви хочете відредагувати. Додайте пустий <div> тег, щоб показати де ви хочете відобразити що-небудь з React. Для прикладу:
<!-- ... існуючий HTML-код ... -->\n\n<div id=\"like_button_container\"></div>\n<!-- ... існуючий HTML-код ... -->Ми дали цьому <div>-у id HTML-атрибут, який є унікальним. Це дозволить нам знайти його пізніше за допомогою JavaScript-коду та відобразити React-компонент всередині нього.
\n\nПорада
\nВи можете вставити “контейнер”
\n<div>будь-де всередині тегу<body>. Ви можете створювати стільки незалежних DOM-контейнерів на одній сторінці, скільки вам потрібно. Вони зазвичай пусті — React замінить будь-який існуючий вміст всередині DOM контейнерів.
Далі, додайте три теги <script> до HTML-сторінки перед закриваючим тегом </body>:
<!-- ... інший HTML-код ... -->\n\n <!-- Завантажимо React. -->\n <!-- Примітка: перед розгортанням на продакшн, замініть \"development.js\" на \"production.min.js\". -->\n <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>\n <!-- Завантажимо наш React-компонент. -->\n <script src=\"like_button.js\"></script>\n</body>Перші два теги завантажують React. Третій завантажує код вашого компонента.
\nСтворіть файл з назвою like_button.js в директорії з вашою HTML-сторінкою.
Відкрийте цей початковий код і вставте його у файл, який ви створили раніше.
\n\n\nПорада
\nЦей код описує компонент React під назвою
\nLikeButton. Не хвилюйтесь, якщо ви не розумієте його — ми охопимо розробку React-компонентів пізніше в нашому практичному підручнику і довідці про основні концепти React. Зараз же давайте відобразимо його на екрані!
Після початкового коду додайте два рядки коду в кінці like_button.js:
// ... початковий код, який ви скопіювали...\n\nconst domContainer = document.querySelector('#like_button_container');ReactDOM.render(e(LikeButton), domContainer);Ці два рядки коду шукають <div>, який ми додали до нашого HTML-файлу в першому кроці і потім відображає React-компонент кнопки “Мені подобається” всередині нього.
Ось і все! Ви щойно додали ваш перший React-компонент до вашого сайту.
\nОзнайомтесь з наступними розділами, щоб дізнатися про інші способи додавання React на ваш сайт.
\nПодивитися фінальний код прикладу
\nЗавантажити код прикладу (2Кб в архіві)
\nЗазвичай ви, мабуть, хотіли би відобразити React-компонент у кількох місцях на HTML-сторінці. Цей приклад показує кнопку “Мені подобається” три рази із різними даними:
\n\nЗавантажити код прикладу (2Кб в архіві)
\n\n\nПримітка
\nЦей принцип найбільш доречний для сторінок сайту, які містять написані на React ізольовані частини коду. Всередині чистого React-коду простіше користуватися композицією компонентів.
\n
Перед публікацією вашого сайту на продакшн не забудьте про те, що нестиснений JavaScript-код може значно сповільнити швидкість завантаження сторінки для ваших користувачів.
\nЯкщо ви вже стискаєте скрипти вашого додатку, то ваш сайт буде готовим для публікації на продакшн, якщо ви впевнитесь в тому, що опублікована HTML-сторінка завантажує версії React, які закінчуються на production.min.js:
<script src=\"https://unpkg.com/react@16/umd/react.production.min.js\" crossorigin></script>\n<script src=\"https://unpkg.com/react-dom@16/umd/react-dom.production.min.js\" crossorigin></script>Якщо ви ще не налаштували стискання для ваших скриптів, то цей варіант може вам допомогти із цим.
\nВ попередніх прикладах ми використовували тільки звичайні можливості сучасних браузерів. Тому ми використали JavaScript функцію, мета якої описати React, що відобразити на екран:
\nconst e = React.createElement;\n\n// Відобразити <button> з текстом \"Мені подобається\"\nreturn e(\n 'button',\n { onClick: () => this.setState({ liked: true }) },\n 'Мені подобається'\n);Однак React також пропонує можливість використовувати спеціальний синтаксис під назвою JSX:
\n// Відобразити <button> з текстом \"Мені подобається\"\nreturn (\n <button onClick={() => this.setState({ liked: true })}>\n Мені подобається\n </button>\n);Ці два приклади виконують одну і ту ж річ. Незважаючи на те, що JSX є цілком необов’язковим, багато людей вважають його зручним для розробки інтерфейсів користувача — як із React, так і з іншими бібліотеками.
\nВи можете спробувати JSX у цьому онлайн-конвертері.
\nНайшвидший спосіб спробувати 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 нагадує додавання CSS-препроцесора. Головною вимогою є наявність встановленого Node.js на вашому комп’ютері.
\nПерейдіть до директорії вашого проекту в терміналі і вставте наступні дві команди:
\nnpm init -y (якщо результатом виконання цієї команди є будь-які помилки, спробуйте дане рішення вашої проблеми)npm install babel-cli@6 babel-preset-react-app@3\n\nПорада
\nМи використовуємо в даному прикладі менеджер пакунків npm лише для того, щоб встановити JSX препроцесор. React і код додатку може залишатися в тегах
\n<script>без змін.
Вітаємо! Ви щойно додали у ваш проект підтримку JSX, яка готова до публікації в продакшн.
\nСтворіть директорію під назвою src і запустіть наступну команду в терміналі:
npx babel --watch src --out-dir . --presets react-app/prod\n\nПримітка
\n\n
npxне є помилкою — це інструмент запуску пакетів, який з’явився в npm версії 5.2+.Якщо ви отримали помилку, схожу на “You have mistakenly installed the
\nbabelpackage”, це значить що вам необхідно перейти до попереднього кроку і виконати команду ще раз.
Не чекайте на завершення цієї команди — ця команда запускає автоматичне спостереження і реагування на будь-які зміни в коді JSX.
\nТепер спробуйте створити файл під назвою like_button.js в директорії src/ з цим стартовим кодом JSX. Препроцесор автоматично трансформує новий код в JavaScript-код, який “розуміють” браузери. Коли ви внесете зміни до файлу з JSX, препроцесор перезапустить процесс трансформування автоматично.
В якості бонуса, це також вам дасть використовувати сучасні синтаксичні новинки JavaScript, як класи, без хвилювань про несумісність з старими браузерами. Інструмент, який ми щойно додали, називається Babel, докладніше познайомитися з ним ви можете завдяки його документації.
\nЯкщо вам стає більш комфортно з інструментами збірки і хочете аби вони робили більше для вас, наступний розділ описує деякі із найпопулярніших способів. Якщо ні — цих тегів script цілком достатньо!