web-dev-qa-db-ja.com

Wordpressでの同形JavaScript(React JS)の実装

私は新しいプロジェクトから始めようとしていて、Reactについてもっと知りたいのでReactを取り入れたいと思います。この特定のプロジェクトはそれほど時間に敏感ではないので開始するのに完璧です。

SEOの面倒を見るために、私はJSサーバー側をレンダリングするために同形ルート(これは私にとって全く新しいです)をたどる必要があることを集めました。 これ /しかし、WordpressベースのWebアプリでこれをどのように適用するかわかりませんか。私はWordpressとReactを使う方法に関する情報を探していましたが、文字通りそれに関する情報はありません。もう少し洞察力のある人は私にいくつかのヒントやポインタを提供できますか?

それが何か違いを生むなら、私は Bedrock 真新しい Sage テーマを使っています。

ありがとうございます。

6
INT

Node.jsなしで(あるいは少なくともV8やrhinoなど)React.jsを使用することは同形とは見なされません。同形とは ブラウザとサーバー上で実行するJavaScriptを構築することを意味します 。具体的には、WordPressを使用することは確かに同型のJavaScript(そのPHPソフトウェア)をしていないことを意味します。

あなたができることはREST AP​​IサーバとしてWordPressを使い、そのためのクライアントとしてReactを使うことです。これでWordPressにアセットを配信させることができますが、サブディレクトリに配置してCMS管理領域を持つAPIアプリとしてのみ扱うこともできます。一方、サイトファイルはルートに配置し、テーマの設定はまったく行いません。 。 (ここでSEOは、開発しているアプリの種類によっては解決しなければならないという別の懸念になります。)

あなたはSEOとサーバーサイドのレンダリングについて言及しています、それで私はあなたが集めた部分をあなたが(彼らが理解できないJSの代わりに)クローラーに配信された欲しいということですが、WordPressはデフォルトでこれをしますJavaScriptではなく、そのため同型ではありませんが、懸念がSEOのみである場合、同型は厳密には必要ありません。

WordPressのテーマにSEOに必要なものすべてを(最低限)出力してからReact(またはAngularまたはwhathaveyou)をロードして、JavaScript対応のブラウザで(ブートストラップ/ DOMの置き換えにより)アプリを構築できます。あなたのルートがWordPressのパーマリンクと一致するようにさらに注意を払う必要があるでしょう。これは少しトリッキーです。同型と同じではありませんが、十分です。

あるいは、React.jsを使用してテーマを「拡張」するだけでもかまいません(コメントセクションの場合のように)が、その時点ではほとんどPHP/WordPressの開発者になるでしょう。

IsomorphicはMeteor.jsやそのようなプロジェクトのようなもので、PHPを特に避けることができます(そしてWordPressを避けることができます)。相互に排他的です。あなたが本当に同形に興味があるなら、Meteor.jsを試して、WordPressを完全に使わないでください。

12
WraithKenny

私たちはこれをかなり賢明な方法で達成できることからそれほど遠くないと思います。 WordPress.comのWebサイトには、Node.jsとReactを備えたREST AP​​Iを搭載したJavaScriptアプリケーションに 既に移行済み があります。

コアのWordPressソフトウェアをこのような新しいテクノロジに移行するには時間がかかりますが、 WordPress REST AP​​I のようなプラグインを追加する場合は、始めるために必要なものがすべて揃っているはずです。 WordPressで反応します。

関連する読み: http://wesbos.com/wordpress-calypso-react/

4
AlecRust

私はRailsでJSを大きく反応させるアプリケーションを作ってきました。 Reactがどのように機能するかについての基本的な理解を私に与えてくれるので、取り組むのは良いプロジェクトです。私がReactについて知っていることを知っているので、最初にそれを理解するまでWPと一緒に使用しないことを強くお勧めします。

ReactとWordpressを組み合わせることは、スーパーカーをオフロードにするような感覚です。スーパーカーを最初に運転することを学ぶかもしれません。

2
Yosuke

これは私が今日遭遇したばかりの例です。

USTWO.comは同じ要件でサイトを構築しました、そして、それらの情報源はここで利用可能です。

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

また、彼らがそれをどのように設定するかについての素晴らしい説明もあります。下の図を参照してください。

Check out the architecture diagram here 

免責事項:これは実際には答えではありませんが、十分なクレジットがある場合に限り、コメントとして追加する必要がある参照リンクです。

1
Raghav Tandon

あなたがやろうとしていることはwordpress APIの前にnode.jsサーバーを置くことによって最もよく達成されます。サーバーサイドで反応するには、サーバー上にnode.jsが必要です。

He​​re は、ワードプレスのコンテンツをサーバー上のReactコンポーネントとしてレンダリングし、クライアント上に同じReactコンポーネントを添付する方法を示すコードです。

このシナリオでは、コンテンツ作成にはワードプレスのメリットがありますが、公開にはメリットがありません。 Reactコンポーネントとしてゼロからパブリッシングを実装する必要があります。

1
liammclennan