Реалізація ізоморфного JavaScript (React JS) у Wordpress?

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

Щоб піклуватися про SEO, я зібрався, що мені потрібно піти на ізоморфний маршрут (це зовсім нове для мене), щоб зробити сторону сервера JS. Я знайшов це , але я не можу зрозуміти, як це застосувати у веб-додатку на основі Wordpress? Я поглиблював інформацію про те, як працювати з Wordpress і React, але про нього буквально нема інформації. Чи може хто-небудь з трохи більше розуміння дати мені кілька порад і покажчиків?

Якщо це має значення, я використовую Bedrock з новим Тема Sage .

Дякую!

6
Я дивився на next.js, щоб зробити ізоморфну ​​реакцію + wordpress
додано Автор Jacob, джерело
Перевірте це . Також вільно доступний у GitHub.
додано Автор LFH, джерело

5 Відповіді

Я не думаю, що використання React.js без Node.js (або принаймні V8 або носорога тощо) вважається ізоморфним, оскільки ізоморфний означає, що ви створюєте JavaScript для запуску в браузері І на сервері . Зокрема, використання WordPress, звичайно, означає, що ви не займаєтеся ізоморфним JavaScript (його програмним забезпеченням PHP).

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

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

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

Крім того, ви можете використовувати React.js, щоб тільки "розширити" тему (подібно до розділу коментарів), але ви в основному будете девайсом PHP/WordPress.

Ізоморфний, як Meteor.js, і такі проекти, які дозволяють вам уникати PHP (і уникати WordPress). Взаємно ексклюзивні дійсно. Якщо ви дійсно зацікавлені в ізоморфних, спробуйте Meteor.js і уникайте використання WordPress в цілому.

12
додано
developer.wordpress.com/calypso - це оновлена ​​відповідь на це запитання!
додано Автор Kromster, джерело
Я тільки що закінчив проект з Angular на WordPress, але це було дуже звичайно і не було блогу. Це було ще біль. Що я зробив був побудований маршрутизатор для імітації permalinks я фактично використовував (custom-post-тип + сторінки), і ігнорував все інше (блог, pagination, і т.д.). Я використовував тільки шаблон індексу, щоб все потрапило до нього, і поставив, який вміст PHP я виводжу (для роботів) в ng-view, але потім сховав ng-view (невикористаний в додатку). Це, мабуть, не найкращий спосіб, але, як ви сказали, постійні помилки - це біль.
додано Автор John with waffle, джерело
Я не повинен був вирішити це для цього проекту, але я думаю, що бібліотека повинна бути написана для обробки всієї логіки PHP у вирішенні, що кінцева точка йде з тим, що шаблон. Крім того, запит до API повинен бути зроблений у деяких (всіх?) Випадках, перш ніж тип вмісту, як відомо, навіть зможе призначити відповідний контролер/шаблон. Можливо, краще створити обробник wp-ajax, який проаналізував і відповів цими даними в кожному запиті маршруту, оскільки він, ймовірно, потрібен.
додано Автор John with waffle, джерело
Calypso в основному є заміною для WP Admin, а не для тем. Це можна використовувати для створення програми, яка насправді не є темою. Але ви не можете використовувати його для створення загальної теми, сумісної з PHP плагінами.
додано Автор John with waffle, джерело
Дуже велика відповідь, спасибі! Я почав возитися з AngularJS разом з WP і у мене поганий час через те, як permalinks і т.д. працює з WP. В ідеалі я буду розділяти їх і використовувати WP, щоб обслуговувати дані і дозволяти Angular жити як власний додаток. Я не зовсім впевнений, як буде працювати структура файлів. Чи є у вас якісь поради? Покладіть Angular в root і WP в підпапку? Я хочу, щоб URL-адреси набували якомога більше сенсу, ніж це можливо для site.com/wp-admin. Подумайте, я просто буду використовувати PhantomJS або що не обробляти SEO тут.
додано Автор DirkV, джерело

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

Перенесення основного програмного забезпечення WordPress на нові технології, як це, займе певний час, але якщо ви додасте плагіни, такі як REST API має мати все необхідне для початку роботи з React в WordPress.

Relevant reading: http://wesbos.com/wordpress-calypso-react/

4
додано
З того, що я розумію, WordPress.com, у своєму переході до Calypso, фактично служить екрану адміністратора (html) з сервера Node.js (можливо, для Isomorphic rendering) ... Що просто не використовує PHP для шаблонів WordPress (або можливо, маршрутизація також). Якщо ви хочете зробити те ж саме для своєї теми, вам потрібен сервер Node.js на додаток до вашого сервера Apache ... Або не виконуйте ізоморфні.
додано Автор John with waffle, джерело

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

Комбінування React з Wordpress відчуває люблять взяття supercar-roading. Можливо перший навчається загнати supercar.

2
додано

Ось приклад, який я сьогодні зіткнувся.

USTWO.com створив сайт з тими ж вимогами, і їх джерело доступне тут.

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

Крім того, є хороший опис про те, як вони налаштували його. Див. Діаграму нижче.

Check out the architecture diagram here

Відмова від відповідальності: Насправді це не відповідь, а більше посилання, яке слід додати як коментар, якщо тільки у мене було достатньо кредитів :-)

1
додано

Те, що ви намагаєтеся зробити, найкраще досягається шляхом введення сервера node.js перед wordpress API. Вам потрібно node.js на сервері, щоб реагувати на стороні сервера.

Here is some code that shows how to render wordpress content as React components on the server and to attach the same React components on the client.

Зверніть увагу, що в цьому сценарії ви отримуєте переваги WordPress для створення контенту, але не для публікації. Ви повинні реалізувати публікацію з нуля як компоненти React.

1
додано
hmm, звичайно вказувати, коли ви є "власником" того, що знаходиться на іншому кінці посилання.
додано Автор nitsua60, джерело
ІТ КПІ - JavaScript
ІТ КПІ - JavaScript
504 учасників

співтовариство javascript розробників в Telegram