Используйте React в том объёме, в котором вам хочется.
\nДля внедрения React не надо ничего переписывать. Его можно использовать как для маленькой кнопки, так и для целого приложения. Возможно, вы захотите немного «оживить» вашу страницу. React-компоненты подходят для этого как нельзя лучше.
\nБольшинство сайтов в Интернете является обычными HTML-страницами. Даже если ваш сайт не относится к одностраничным приложениям, вы можете добавить на него 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. Это позволит впоследствии найти тег из JavaScript кода и отобразить React-компоненты внутри него.
\n\nСовет
\n«Контейнер»
\n<div>можно поместить где угодно внутри тега<body>. Вы можете создать любое количество независимых DOM-контейнеров на одной странице. Эти контейнеры принято оставлять пустыми, так как React в любом случае заменяет всё их содержимое.
Теперь добавьте три <script>-тега перед закрывающим тегом </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 позже, в нашем практическом руководстве и во введении в основные понятия. Пока же мы просто посмотрим, как это выглядит на экране.
Добавьте ещё 2 строки в конец файла like_button.js, после стартового кода:
// ... стартовый код ...\n\nconst domContainer = document.querySelector('#like_button_container');ReactDOM.render(e(LikeButton), domContainer);Этот код ищет контейнер <div>, который мы добавили на первом шаге, а затем отображает наш React-компонент с кнопкой «Нравится» внутри него.
Вот и всё! Вы только что добавили свой первый React-компонент на страницу.
\nПерейдите к следующим разделам, если хотите узнать о других способах добавить React.
\nПосмотреть финальный код примера
\nСкачать код примера (архив 2 Кбайт)
\nЗачастую, вам может понадобиться отобразить React-компонент в нескольких местах одной и той же HTML-страницы. Вот как можно показать сразу три кнопки «Нравится» с разными данными:
\nПосмотреть исходный код примера
\nСкачать код примера (архив 2 Кбайт)
\n\n\nПримечание
\nЭтот способ лучше всего подходит для страниц, содержащих несколько изолированных участков кода, написанных на React. Внутри чистого React-кода проще использовать композицию компонентов.
\n
Публикуя ваш сайт на продакшен, имейте в виду, что несжатый JavaScript значительно замедляет страницу для ваших пользователей.
\nЕсли вы уже минифицируете свои скрипты, то не забудьте подготовить к продакшену сам React. Для этого поменяйте окончания ссылок на 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В предыдущих примерах мы не выходили за рамки обычных браузерных возможностей. В частности, мы указываем, что React должен выводить на экран, просто вызывая JavaScript-функцию:
\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 является совершенно необязательным, многие разработчики считают его удобным для разработки UI — как с 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, чтобы поэкспериментировать.
Такой подход удобен для обучения или создания быстрых демо, но следует помнить, что работа сайта при этом сильно замедляется. Поэтому для продакшена 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Попробуйте создать файл с названием src/like_button.js и вставить в него этот стартовый JSX-код. Препроцессор автоматически трансформирует новый код в чистый JavaScript, пригодный для выполнения в браузере, и сохранит его в новый файл like_button.js. При редактировании JSX-кода в существующих файлах трансформация также происходит автоматически.
Кроме препроцессинга JSX, вы в качестве бонуса получаете синтаксические новинки JavaScript, такие как классы, без головной боли с их браузерной поддержкой. Всё это доступно благодаря использованию инструмента под названием Babel, информацию о котором вы можете узнать из его документации.
\nЕсли вы неплохо разбираетесь в инструментах сборки и хотите создавать приложения на React с их помощью, обратитесь к следующему разделу, где описаны некоторые из наиболее популярных способов. Если нет — не беспокойтесь, уже знакомые нам script-теги ничуть не хуже!
","frontmatter":{"title":"Добавляем React на сайт","next":"create-a-new-react-app.html","prev":"getting-started.html"},"fields":{"path":"content/docs/add-react-to-a-website.md","slug":"docs/add-react-to-a-website.html"}}},"pageContext":{"slug":"docs/add-react-to-a-website.html"}},"staticQueryHashes":[]}