Допустим, у вас есть статический веб-сайт — будь то на WordPress, Wix, Squarespace или HTML с сервера — и вы хотите добавить к нему некоторые великолепные функции, если вы хотите использовать только «React», но ограничения по времени и бюджету мешают капитальный ремонт вашего сайта.
Хорошая новость заключается в том, что вы не одиноки, и хорошая новость заключается в том, что это руководство покажет вам, как создать и встроить виджет React на свой веб-сайт! Нам просто нужно научиться думать о React немного по-другому…
Начиная
Это руководство предполагает наличие некоторых практических знаний о React и общей веб-разработке. Если вы никогда раньше не запускали приложение React, на сайте React есть отличный учебник!
Начнем, как сегодня делают многие разработчики, запустив:
npx create-react-app app
Это создаст базовое реагирующее приложение.
Итак, теперь мы встроим это реагирующее приложение на статический веб-сайт html.
3-этапный процесс:
- Мы хотим, чтобы наше приложение монтировалось на уникальный
<div></div>, который мы контролируем. Давайте изменим целевой div приложения на нечто уникальное, например «ReactApp»:
2. Теперь нам нужно создать приложение и извлечь пакет Webpack, который будет использоваться в качестве статических ресурсов на другом нашем веб-сайте.
Сначала запустите npm run build, чтобы создать мини-сборку. Структура папок вашей сборки будет выглядеть примерно так.
Папка сборки содержит много вещей, которые используются для обслуживания реагирующего приложения. вы можете прочитать об этом в документах, но сейчас нам нужно сосредоточиться только на статической папке.
Статическая папка содержит уменьшенную версию файлов css и js. Файлы, которые нам нужны для интеграции нашего реагирующего приложения с другим веб-сайтом:
Для файлов javascript:
file holding minified version of libraries used in your code ./build/static/js/2.<someUniqueNumbers>.chunk.js file holding minfied version of your code ./build/static/js/main.<someUniqueNumbers>.chunk.js file holding minified version to launch your code at runtime ./build/static/js/2.<someUniqueNumbers>.chunk.js
Для css-файлов:
file holding minified version of css libraries used in your code ./build/static/css/2.<someUniqueNumbers>.chunk.css file holding minfied version of your css code ./build/static/js/main.<someUniqueNumbers>.chunk.css
3. Наконец, мы можем вызвать эти файлы js и css и указать нашему приложению React для монтирования в div <div id="ReactApp"></div> на нашем веб-сайте!
Вот моя HTML-страница, на которой установлены приложения React.
Обратите внимание, что порядок этих файлов имеет значение!
Теперь, если я обслуживаю HTML-страницу с помощью lite-server…
Та-да! Чрезвычайно интерактивный веб-сайт с приложением React среди прочего статического контента!
