WordPress5.0 React を使い動作検証するまでの手順

こんな疑問を解決します。

WordPress5.0 で React を有効にし、Reactチュートリアルに掲載されているプログラムをワードプレス上で動作検証するまでの手順をまとめます。

WP5.0以降では React はデフォルトで同梱されているため、wp_enqueue_script を使って簡単にセットアップすることができます。

WordPressでReactを使うための準備

Reactに使うjsファイルが my-script.js だとしてまずは function.php などに下記のコードを追加します。

add_action('wp_enqueue_scripts', function () {
// 依存関係に wp-element を指定するとreactとreact-domが入ってくる。
    wp_enqueue_script('my-script', get_theme_file_uri() . '/js/my-script.js?', ['wp-element'], '1.0.0', true);
});

※パスは読み替えてください。

次に React が読み込まれていることを確認するために開発ツールのエレメント要素を確認します。

以下のようなコードの存在が確認できたらうまくいっています。

<script src="http://cocoon.local/wp-includes/js/dist/vendor/react.min.js?ver=16.9.0&amp;fver=20210129052750"></script>
<script src="http://cocoon.local/wp-includes/js/dist/vendor/react-dom.min.js?ver=16.9.0&amp;fver=20210129052750"></script>

スクリプトファイル内にReactのコードを書いてみる

ここではReactのサンプルコードをチュートリアルで紹介されているやつを使用したいと思います。

「状態を持つコンポーネント」というサンプルコードをスクリプトファイル内に貼り付けます。

このサンプルコードはタイマーのようになっていて、１秒で１カウントアップしていくスクリプトです。

class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { seconds: 0 };
  }

  tick() {
    this.setState(state => ({
      seconds: state.seconds + 1
    }));
  }

  componentDidMount() {
    this.interval = setInterval(() => this.tick(), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return React.createElement(
      'div',
      null,
      'Seconds: ',
      this.state.seconds
    );
  }
}

ReactDOM.render(React.createElement(Timer, null), document.getElementById('timer-example'));

レンダリング先のHTMLの準備

チュートリアルでは timer-example がレンダリング先として指定されています。

下記のHTMLをページ内に貼り付けます。

<div id="timer-example"></div>

ここでは下記にHTMLを貼り付けていますので、このページに訪れてくれた方はこの文章の下でカウントアップが行われていると思います。

カウントアップは確認できましたか〜？

おわりに

以上、WordPress5.0 で React を使い動作検証するまでの手順でした。

個人メモ

• ライフサイクルの概念がよくわかっていない
• JSXやbabelといったコンパイル仕様がよくわかっていない
• Reactなんだかすごそう