Внедрение изоморфного JavaScript (React JS) в WordPress?

Я собираюсь начать с нового проекта и хотел бы включить React, поскольку я хочу узнать больше об этом, и этот конкретный проект был бы идеальным, чтобы начать работу, поскольку это не то, что чувствительно к времени и довольно прямолинейно.

Чтобы позаботиться о SEO, я понял, что мне нужно пройти изоморфный маршрут (это совершенно новый для меня), чтобы отобразить сторону сервера JS. Я нашел это, но я не могу понять, как я применяю это в веб-приложении на WordPress? Я искал информацию о том, как работать с WordPress и React, но в этом нет никакой информации. Может ли кто-нибудь с немного более глубоким пониманием предоставить мне несколько советов и указателей?

Если это имеет значение, я использую Bedrock с новой темой Sage .

Благодаря!

Solutions Collecting From Web of "Внедрение изоморфного JavaScript (React JS) в WordPress?"

Я не думаю, что использование React.js без Node.js (или, по крайней мере, V8 или носорога и т. Д.) Считается изоморфным, так как изоморфно означает, что вы строите JavaScript для запуска в браузере И на сервере . В частности, использование WordPress, безусловно, означает, что вы не выполняете изоморфный javascript (его программное обеспечение на PHP).

Что вы можете сделать, так это использовать WordPress в качестве сервера API REST и использовать для этого в качестве клиента React. Теперь вы можете предоставить WordPress свои активы, но вы также можете поместить его в подкаталог и рассматривать его только как приложение API с областью администрирования CMS, а также размещать файлы сайта в корне, обходя настройку темы вообще , (SEO стал бы отдельной проблемой здесь, что вам придется решать, в зависимости от типа приложения, которое вы разрабатываете.)

Вы упоминаете SEO и серверный рендеринг, поэтому я беру на себя ту часть, которую вы собрали, так это то, что вы хотите, чтобы скомпилированный html доставлялся сканерам (вместо JS, которые они не понимают), но WordPress делает это по умолчанию (хотя и с PHP , а не JavaScript и поэтому не изоморфны), но если ваша забота – это только SEO, изоморфный не является строго необходимым.

У вас может быть тема WordPress для вывода всего, что вам нужно для SEO (минимально), а затем загрузить React (или Angular or whathaveyou), чтобы создать приложение для людей с браузерами с поддержкой JavaScript (через перезагрузку / замену DOM). Затем вам придется дополнительно следить за тем, чтобы ваши маршруты соответствовали постоянным ссылкам WordPress, что немного сложно. Не то же самое, что изоморфно, но достаточно хорошо.

В качестве альтернативы вы можете использовать React.js только для «улучшения» темы (например, для раздела комментариев), но в основном вы должны быть разработчиком PHP / WordPress.

Isomorphic похож на Meteor.js и такие проекты, которые позволяют вам специально избегать PHP (и избегать WordPress). Взаимоисключающий действительно. Если вы действительно заинтересованы в изоморфности, попробуйте Meteor.js и вообще не используйте WordPress.

Я думаю, что мы находимся недалеко от возможности достичь этого довольно разумным образом. Веб-сайт WordPress.com уже перешел на приложение JavaScript, основанное на REST API с Node.js и React.

Перемещение основного программного обеспечения WordPress на более новые технологии, подобные этому, потребует времени, но если вы добавите плагины, такие как WordPress REST API, у вас должно быть все, что вам нужно, чтобы начать работу с React в WordPress.

Соответствующее чтение: http://wesbos.com/wordpress-calypso-react/

Я создавал приложение в Rails, которое сильно реагирует на JS. Это хороший проект для работы, потому что он дает мне базовое понимание того, как работает React. Зная, что я знаю об React, я бы настоятельно рекомендовал не использовать его с WP до тех пор, пока вы не освоитесь с ним вначале, я думаю, что это значительно ускорит процесс обучения, пытаясь взломать его в WP.

Сочетание React с WordPress похоже на то, что выйдет внедорожник суперкара. Возможно, сначала научиться водить суперкар.

Вот пример, который я только что встретил сегодня.

USTWO.com создали сайт с теми же требованиями, и их источник доступен здесь.

https://github.com/ustwo/ustwo.com-frontend

У них также есть хорошее описание того, как они его настраивают. См. Диаграмму ниже.

Ознакомьтесь с диаграммой архитектуры здесь.

Отказ от ответственности: на самом деле это не ответ, а скорее ссылка ссылки, которую следует добавить в качестве комментария, если бы у меня было достаточно кредитов 🙂

То, что вы пытаетесь сделать, лучше всего достичь, поставив сервер node.js перед API wordpress. Вам нужно, чтобы node.js на сервере реагировал на сервер.

Вот какой код, который показывает, как отображать контент WordPress как компоненты React на сервере и присоединять к клиенту те же компоненты React.

Обратите внимание, что в этом сценарии вы получаете преимущества wordpress для создания контента, но не для публикации. Вам необходимо внедрить публикацию с нуля как компоненты React.