LaravelでReactのサンプルプログラムを表示させてみる

新しいプログラミングに触れるには、まず実行環境を作ってサンプルを動かしてみることである。今回は実際にLaravelでReactの実行環境を作りReactのサンプルを動かしてみます。

0. 実行環境を構築してみる

LaravelでReact環境構築するのは、以下に掲載してますので、参考にしてください。

pgslit.hatenablog.com pgslit.hatenablog.com

1. ReactサンプルプログラムのJavaScriptファイルを作成する

今回は、以下Reactの公式ページの時計のサンプルプログラムを表示させてみます。 ja.reactjs.org

まずプロジェクトフォルダ内の”resources\js\components”に"TestReact.js"というファイルを作成します。

その中に公式ページの以下、時計のサンプルプログラムをコピーし保存します。

import React from 'react';
import ReactDOM from 'react-dom';

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

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

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

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

2. "app.js"に作成したReactファイルを記述する

"resources\js\app.js"に以下を追記してください。 ※Exampleの行はコメントアウトしといてください。バッティングするといろいろ面倒なので。

//require('./components/Example');
require('./components/TestReact.js');

ReactのソースはBabelでコンパイルされ”public\js\app.js”に書き込まれますが、Laravelの初期設定では、"resources\js\app.js"に記述したソースがコンパイル対象となっています。

3. Reactのソースをコンパイルする

コンパイルはシェルで以下のようにタイプすればコンパイルできます。

#npm run dev

もしくは

#npm run watch

上のほうが、ソースを更新するたびにコンパイルしてくれるので便利です。ただし、ずっと実行させておく形となりますので、この辺は好みになるのかなー

4. Bladeファイルを編集する

最後に、"home.blade.php"を編集します。card-body内に以下を記載すればOKです。

<div id="root"></div>

これで、完了となります。サーバーを起動して、ホーム画面にアクセスしてみてください。問題なければ時計が表示されるはずです。

上記のように、ReactDOMで、Bladeファイルにコンポーネント感覚で、組み込めるのでいいですね。

5. まとめ

サンプルプログラムが表示できると、なんだか、安心感がでてきますね。サンプルプログラムをいろいろいじって、引き続き勉強していきたいと思います。

Laravelで業務システム

Laravel関連の記事掲載してます