Как добавить React на сайт
2 года назад·6 мин. на чтение
Как добавить скрипты React на сайт. Вам не нужно создавать весь веб-сайт с помощью React. Можно ограничиться добавление React в HTML. Добавление React в HTML не требует установки, занимает пару минут и позволяет сразу начать писать интерактивные компоненты.
Содержание туториала по React
Вам не нужно создавать весь веб-сайт с помощью React. Можно ограничиться добавление React в HTML. Добавление React в HTML не требует установки, занимает пару минут и позволяет сразу начать писать интерактивные компоненты.
Шаг 2: Добавьте теги
На HTML-странице прямо перед закрывающим тегом
Добавление React в HTML
React с самого начала был разработан для постепенного внедрения. Большинство веб-сайтов не полностью построены (и не должны) с помощью React. В этом руководстве показано, как добавить немного интерактивности на существующую HTML-страницу. Попробуйте это на своем собственном веб-сайте или на пустом HTML-файле. Все, что вам нужно, это подключение к Интернету и текстовый редактор, такой как Блокнот или VS Code (Вот как настроить ваш редактор для подсветки синтаксиса).Шаг 1. Добавьте корневой HTML-тег
Сначала откройте HTML-страницу, которую хотите отредактировать. Добавьте пустой тег<div>, чтобы отметить место, где вы хотите отобразить что-то с помощью React. Дайте этому <div> уникальное значение атрибута id. Например:
Он называется "корень" ("root"), потому что с него начинается дерево React. Такой корневой HTML-тег можно разместить в любом месте внутри тега<!-- ... существующий HTML ... --> <div id="like-button-root"></div> <!-- ... существующий HTML ... -->
<body>. Оставьте его пустым, потому что React заменит его содержимое вашим компонентом React.
У вас может быть столько корневых тегов HTML, сколько вам нужно на одной странице.
Шаг 2: Добавьте теги script
На HTML-странице прямо перед закрывающим тегом </body> добавьте три тега <script> для следующих файлов:
- react.development.js позволяет вам определять компоненты React.
- react-dom.development.js позволяет React отображать HTML-элементы в DOM.
like-button.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> <script src="like-button.js"></script> </body> </html>
development.js на production.min.js. Сборки React для разработки предоставляют более полезные сообщения об ошибках, но сильно замедляют работу сайта.
Шаг 3: Создайте React компонент
Создайте файл с именемlike-button.js рядом со своей HTML-страницей, добавьте этот фрагмент кода и сохраните файл. Этот код определяет React компонент под названием LikeButton.
'use strict'; function LikeButton() { const [liked, setLiked] = React.useState(false); if (liked) { return 'You liked this!'; } return React.createElement( 'button', { onClick: () => setLiked(true), }, 'Like' ); }
Шаг 4: Добавьте React компонент на страницу
Наконец, добавьте три строки в конец файлаlike-button.js. Эти строки кода находят <div>, который мы добавили в HTML на первом шаге, создают корень React, а затем отображают React компонент кнопки «Нравится» внутри него:
Компоненты можно использовать повторно. Вы можете захотеть отобразить компоненты React в нескольких местах на одной HTML-странице. Это полезно, если части вашей страницы, основанные на React, отделены друг от друга. Вы можете сделать это, поместив несколько корневых тегов в свой HTML, а затем визуализировав компоненты React внутри каждого из них с помощьюconst rootNode = document.getElementById('like-button-root'); const root = ReactDOM.createRoot(rootNode); root.render(React.createElement(LikeButton));
ReactDOM.createRoot(). Например:
- В
index.htmlдобавьте дополнительный элемент-контейнер<div id="another-root"></div>. - В
like-button.jsдобавьте в конце еще три строчки:
Если вам нужно отрендерить один и тот же компонент во многих местах, вы можете назначить CSS класс вместоconst anotherRootNode = document.getElementById('another-root'); const anotherRoot = ReactDOM.createRoot(anotherRootNode); anotherRoot.render(React.createElement(LikeButton));
id для каждого корня, а затем найти их все.
Шаг 5: Минифицируйте JavaScript для продакшена
Неминифицированный JavaScript может значительно замедлить загрузку страниц для пользователей. Перед развертыванием веб-сайта в продакшене рекомендуется минимизировать его скрипты.- Если у вас нет шага минификации для скриптов, вот один из способов его настройки.
npx terser -c -m -o like-button.min.js -- like-button.js
- Если вы уже минимизируете скрипты своего приложений, ваш сайт будет готов к работе, если вы убедитесь, что развернутый 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
Приведенные выше примеры основаны на функциях, изначально поддерживаемых браузерами. Вот почемуlike-button.js использует вызов JavaScript функции, чтобы сообщить React, что отображать:
Однако React также предлагает возможность использовать вместо этого JSX, HTML-подобный синтаксис JavaScript:return React.createElement( 'button', { onClick: () => setLiked(true), }, 'Like' );
Эти два фрагмента кода эквивалентны. JSX — популярный синтаксис для описания разметки в JavaScript. Многие с ним знакомы и считают полезным для написания UI кода — как с React, так и с другими библиотеками.return <button onClick={() => setLiked(true)}>Like</button>;
Попробуйте JSX
Самый быстрый способ попробовать JSX — добавить на страницу компилятор Babel в теге<script> . Поместите его перед like-button.js, а затем в тег <script> для like-button.js добавьте атрибут type="text/babel":
Теперь вы можете открыть<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> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <script src="like-button.js" type="text/babel"></script> </body>
like-button.js и заменить
на эквивалентный JSX код:return React.createElement( 'button', { onClick: () => setLiked(true), }, 'Like' );
Поначалу может показаться немного непривычным смешивать JS с разметкой, но вам это понравится. Ознакомьтесь со статьей Разметка с JSX. Компилятор Babel в тегеreturn <button onClick={() => setLiked(true)}>Like</button>;
<script> отлично подходит для обучения и создания простых демо. Однако это замедляет ваш сайт и не подходит для продакшена. Когда вы будете готовы двигаться дальше, удалите тег <script> с Babel и удалите атрибут type="text/babel". Вместо этого в следующем разделе мы настроим препроцессор JSX для преобразования всех тегов <script> из JSX в JS.
Добавление JSX в проект
Добавление JSX в проект не требует сложных инструментов, таких как сборщик или сервер разработки. Добавление препроцессора JSX очень похоже на добавление препроцессора CSS. Перейдите в папку проекта в терминале и вставьте эти две команды (убедитесь, что у вас установлен Node.js):npm init -y(if it fails, here’s a fix)npm install @babel/cli@7 babel-preset-react-app@10
npm init -y, переименуйте папку проекта, чтобы она содержала только строчные буквы ASCII или дефисы (например, my-project), и повторите попытку.
В данном случае npm будет нужен только для установки препроцессора JSX. И React, и код приложения могут оставаться в виде тегов <script> без изменений.
Запуск препроцессора JSX
Вы можете предварительно обработать JSX, чтобы каждый раз, когда вы сохраняете файл с JSX, преобразование запускалось повторно, преобразовывая файл JSX в новый, простой файл JavaScript, который может понять браузер. Вот как это настроить:- Создайте папку с именем
src. - В терминале выполните следующую команду:
Не ждите завершения. Эта команда запускает автоматическое наблюдение за изменениями в JSX внутриnpx babel --watch src --out-dir . --presets babel-preset-react-app/prod
src.
- Переместите свой файл
like-button.jsc JSX в папкуsrc.
like-button.js с простым JavaScript кодом, подходящим для браузера.
Если вы видите сообщение об ошибке "You have mistakenly installed the babel package" ("Вы установили пакет babel по ошибке"), возможно, вы пропустили предыдущий шаг (Добавление JSX в проект). Выполните его в той же папке, а затем повторите попытку.
Инструмент, который вы только что использовали, называется Babel, и вы можете узнать больше о нем из его документации. В дополнение к JSX он позволяет вам использовать самые последние функции синтаксиса JavaScript, не беспокоясь о поломках в старых браузерах.
Если вы освоились с инструментами сборки и хотите, чтобы они делали для вас больше, то здесь вы можете найти обзор на некоторые из самых популярных и доступных наборов инструментов.
React без JSX
Первоначально JSX был представлен для того, чтобы написание компонентов с помощью React было таким же привычным, как написание HTML. С тех пор синтаксис получил широкое распространение. Однако могут быть случаи, когда вы не хотите или не можете использовать JSX. У вас есть два варианта:- Используйте альтернативу JSX, такую как htm, которая использует шаблонные строки JavaScript вместо компилятора.
- Используйте
React.createElement()со специальной структурой, описанной ниже.
Сfunction Hello(props) { return <div>Hello {props.toWhat}</div>; } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Hello toWhat="World" />);
React.createElement() вы бы написали это так:
Он принимает несколько аргументов:function Hello(props) { return React.createElement('div', null, 'Hello ', props.toWhat); } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(React.createElement(Hello, { toWhat: 'World' }, null));
React.createElement(component, props, ...children).
Вот как они работают:
- Компонент, который может быть строкой, представляющей элемент HTML или функциональный компонент.
- Объект с любыми пропсами, который вы хотите передать
- Остальные являются дочерними компонентами, такими как текстовые строки или другие элементы.
React.createElement(), один из распространенных шаблонов — назначить сокращение:
Затем, если вы предпочитаете этот стиль, он может быть таким же удобным, как и JSX.const e = React.createElement; const root = ReactDOM.createRoot(document.getElementById('root')); root.render(e('div', null, 'Hello World'));
5 библиотек для React, которые повысят уровень ваших проектов в 2023 году
2 года назад·1 мин. на чтение
В этой статье мы рассмотрим 5 библиотек, которые могут положительно повлиять на процесс разработки на React. Они решат некоторые из наиболее распространенных проблем в React разработке, такие как запрос данных, стили, доступность и управление состоянием.
Введение
Важно освоить основы React. И правда в том, что вы можете продвинуться довольно далеко без тонны дополнительных библиотек. Но есть несколько основополагающих инструментов, которые могут вывести ваш опыт разработки React на новый уровень. Эти библиотеки решают наиболее распространенные задачи в разработке React, такие как запросы данных с API, стилизация, доступность и управление состоянием, и они делают это минимальным и ненавязчивым способом. Это обеспечивает постепенное внедрение в кодовую базу. Мы составили список из пяти таких библиотек, о которых, по нашему мнению, вам следует знать.Почему это важно
Важно делиться инструментами разработки и влиять на взаимодействие с разработчиками. Когда у разработчиков есть доступ к нужным инструментам и ресурсам, они могут тратить больше времени на создание и меньше времени на отвлекающие факторы, накладные расходы и разочарования.React Query
Проще говоря, React Query делает получение данных в React намного удобнее. Но это не библиотека для получения данных как таковая. Вместо этого это библиотека управления состоянием, которая имеет дело с асинхронным состоянием сервера. Вы предоставляете ей асинхронную функцию, которая затем извлекает данные.useQuery предоставляет вам кучу полезных утилит для обработки асинхронной функции:
- Флаг состояния загрузки
- Кэширование результатов
- Инвалидация и повторный запрос данных
useQuery по всему приложению, и данные будут совместно использоваться.
https://github.com/TanStack/query
Zustand
Каждый React разработчик знает, как сложно шэрить состояние в приложении. При первом столкновении с проблемой вы неизбежно заканчиваете «просверливанием» данных по дереву компонентов (prop drilling). Излишне говорить, что это не делает код чистым и не является устойчивым в долгосрочной перспективе. К счастью, React придумал контекст для решения этой проблемы. Контекст отлично подходит, если все, что вам нужно сделать, это передать несколько значений вниз по дереву компонентов. Но он может стать громоздким для использования в более сложных глобальных сторах. Разработчики должны быть осторожны с последствиями для производительности, и некоторые разработчики не являются большими поклонниками Context API. Zustand предлагает чрезвычайно простой API, который позволяет создавать хранилище со значениями и функциями. Затем вы можете получить доступ к этому хранилищу из любого места в приложении для чтения и записи значений. Реактивность включена. Если вы хотите хранить данные вложенных объектов в своем хранилище, рассмотрите возможность использования Immer вместе с Zustand, чтобы легко изменить вложенное состояние. https://github.com/pmndrs/zustandFramer Motion
Анимация — один из лучших способов придать вашему React приложению современный вид. Но это непросто. Использование CSS анимации сложно и может привести к большому количеству кода. Напротив, Framer Motion предлагает мощный, но простой API для создания пользовательских анимаций. Он изначально интегрирован в экосистему React с набором хуков и компонентов. Например, этот код - все, что требуется для плавной анимации преобразования из круга в квадрат:Каждое значение в массиве представляет ключевой кадр для соответствующего свойства. Затем анимация проходит через этот цикл. Конечно, вы можете сделать гораздо больше, чем просто определить ключевые кадры с помощью Framer Motion. Вы также можете анимировать изменения в макете, обрабатывать жесты или анимировать на основе прокрутки. https://github.com/framer/motionimport { motion } from "framer-motion" export const MyComponent = () => ( <motion.div animate={{ scale: [1, 2, 2, 1, 1], rotate: [0, 0, 270, 270, 0], borderRadius: ["20%", "20%", "50%", "50%", "20%"], }} /> )
Class Variance Authority (CVA)
TailwindCSS быстро превратился в основной способ стилизации приложений React. Но создание многоразовых элементов пользовательского интерфейса с его помощью может быть сложной задачей. Допустим, вы создаете свою собственную кнопку с помощью Tailwind. Так как вы хотите повторно использовать его во всем своем приложении, вы создаете компонент. Но теперь вам нужно несколько вариантов этого компонента. Основной стиль и дополнительный стиль. Итак, теперь вам нужно собрать классы Tailwind вместе в соответствии со значением пропса. Теперь вам также нужны разные цвета и разные размеры для вашей кнопки. Так что добавьте немного пропса и еще больше условной логики, чтобы выяснить правильную комбинацию классов Tailwind. Это может увеличить кодовую базу и усложнить понимание. CVA, сокращение от Class Variance Authority. Это простая библиотека, которая избавляет от необходимости создавать компонуемые компоненты React с именами классов Tailwind. Возьмем этот пример из их документации:Мы декларативно описываем стили кнопок для каждого значения параметра. Затем CVA выполняет работу по выяснению правильной комбинации стилей. Мы даже можем указать варианты по умолчанию, чтобы сделать определенные свойства необязательными. https://github.com/joe-bell/cvaimport React from "react"; import { cva, type VariantProps } from "class-variance-authority"; const button = cva("button", { variants: { intent: { primary: [ "bg-blue-500", "text-white", "border-transparent", "hover:bg-blue-600", ], secondary: [ "bg-white", "text-gray-800", "border-gray-400", "hover:bg-gray-100", ], }, size: { small: ["text-sm", "py-1", "px-2"], medium: ["text-base", "py-2", "px-4"], }, }, compoundVariants: [{ intent: "primary", size: "medium", class: "uppercase" }], defaultVariants: { intent: "primary", size: "medium", }, }); export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof button> {} export const Button: React.FC<ButtonProps> = ({ className, intent, size, ...props }) => <button className={button({ intent, size, className })} {...props} />;
