React?? Это что-то на научном?!
Ах да.
React.js — одна из самых популярных JavaScript-библиотек для создания динамичных пользовательских интерфейсов. Разработанная и поддерживаемая Facebook* (Meta*), она позволяет строить эффективные, масштабируемые и удобные в поддержке веб-приложения.
О React.js подробно можно узнать тут (ссылка)
*Meta — признаны не очень хорошими людьми в РФ
В общем, React позволяет очень просто строить динамические веб-сайты и делать очень крутые штуки без обновления страницы. React как бы встраивается в готовую HTML страницу, создавая динамику.
Лично мне Реакт пригодился для создания бесконечного Quiz-а по японскому, именно там его можно попробовать (вот тут).
Ну что, погнали к подключению
Для начала нам нужно сбилдить проект с react, я для этого использую vite.
После билда статики у нас создаются вот такие файлы:
Теперь надо пояснить как это работает. Грузится обычная HTML-страница, в ней содержится особый тэг div с id root. Далее подгружается все из папки assets, там сам код и стили. После, в результате неизведанной магии JS код из файла подменяет внутренности div-а, и таким образом получается клиентский рендеринг.
Исходя из этого, мы просто можем скормить эти файлы WP. И потом как-то вставить.
— Нет, у меня WP ругается на недопустимое расширение файла.
И тут мне пришла идея: а что, если заставить Nginx раздавать эту статику?
location /react-blog {
alias /var/www/react-blog;
}Немного магии Nginx и статика раздаётся. Теперь, встраиваем её.
В WordPress есть тэг с кастомным кодом на HTML (произвольный HTML). Используем его, и пишем что-то типа такого:
<noscript>
<div style=" background: red; color: white; padding: 1em; text-align: center;">
Для работы сайта требуется JavaScript. Пожалуйста, включите его в настройках браузера.
</div>
</noscript>
<script type="module" crossorigin src="./react-blog/kana-quiz/index-kana.js"></script>
<link rel="stylesheet" crossorigin href="./react-blog/kana-quiz/index-kana.css">
<div id="root"></div>(Желательно писать Link в тэге head, но тогда придётся перелопачивать весь сайт, так что и так сойдёт)
Здесь проверяется включён ли JS и указываются ссылки на папку assets.
Сохраняем. Запускаем.
Всё работает.
Enjoy your динамичные страницы с постоянно выпрыгивающим чатом поддержки. Да хранит господь React. АДМИНЬ.
Добавить комментарий