WordPressでReact.jsを利用する方法

スポンサーリンク

 

今回の投稿は備忘録チックなものです。

 

WordPressでReact.js使えたらサイトスピード速くなるのかなー

的なくだらない考えのもと、とりあえず標準のReact.jsをWordPressで使えるようにする。

 

結果的には、npmでパッケージ管理ができないのでなんだかなーという感じ。

 

スポンサーリンク

CDNからJavaScriptのコードをひっぱてくる

 

Downloads | React
A JavaScript library for building user interfaces

 

上のリンクからCDNへのパスが拾えるので、

 

 

赤枠のscriptタグの2行を「header.php」などのReact.jsを使用したいページのheadタグが含まれたファイルの中に

 

 

こんな感じでheadタグの中に記述する。

とりあえずReact.jsはこれでOK

 

CDNのトランスパイラ(コンパイラ)を使う

 

React.jsだけでは、JSXとかES6とかで書かれたものはプレーンなJavaScriptに変換しなければ動かないので「トランスパイラ(コンパイラ)」として、「Babel」を使用する。

BabelについてもCDNのものを利用する。

 

babel-standalone - cdnjs.com - The best FOSS CDN for web related libraries to speed up your websites!
babel-standalone - Standalone build of Babel for use in non-Node.js environments. Similar to the (now deprecacted) babel-browser - cdnjs.com - The best FOSS CDN...

 

上のリンクから「babel-standalone」のscriptタグが取得できるので、

 

 

これをReact.jsのときと同じく、header.php」などのReact.jsを使用したいページのheadタグが含まれたファイルの中に

 

 

こんな感じでheadタグの中に記述すればOK

 

これで、React.jsが利用できるようになります。

 

実際にWordPressでReact.jsを使用してみる

 

React.jsとBabelのscriptが埋め込めたら、実際にWordPressでReact.jsを使用してみる

 

 

例のごとくのHello world!を表示させるコードです。

今回は試験的にfooter.phpのbodyタグの終わり直前に追記します。

 

 

あとは、何もないdivタグなんかを書いたページを作成すれば…

 

 

こんにちは世界ができます。

 

問題点

 

問題は冒頭でも上げたように、これではNode.jsのnpmでパッケージ管理ができないため、できることが限られてくるということ。

 

解決策

 

WordPress4.7で「WP REST API」というAPIが組み込まれ、WordPressでREST APIが利用できるとのことなので、その辺を利用すればReact.jsを利用して高速なブログが作れるんではないであろうか

 

まとめ

 

WordPressでReact.jsは利用できる

コメント