スポンサーリンク

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

カスタマイズ
スポンサーリンク
本ページにはプロモーションが含まれています。
たろ
たろ

WordPressでReactを使いたいけどやり方がわからん。

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

本記事の内容
  • WordPressでReactを使う方法
  • Reactを使うためのセットアップ手順の紹介
  • 簡単なコードによる具体例の紹介

WordPress5.0React を有効にし、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のサンプルコードをチュートリアルで紹介されているやつを使用したいと思います。

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

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

JSXのコンパイルはせずにmy-script.jsにコピペします。

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なんだかすごそう

タイトルとURLをコピーしました