Laravel7 で React を利用した開発を可能にする手順をご紹介いたします。
ここでは Laravel と React はインストール済みとして進めていきます。
開発環境
- Laravel 7.2.1
- React 16.13.1
- PHP 7.4.3
Laravel で React を利用できるようにする
React を利用する Laravel のプロジェクトを作成し、
作成されたプロジェクトフォルダに遷移します。
composer create-project laravel/laravel hoge-project
cd hoge-project
次に Laravel が React を利用するように設定を変更します。
ui artisan コマンドを使用するので、laravel/ui パッケージを先にインストールしています。
composer require laravel/ui
php artisan ui react
最後に下記コマンドを実行すると、Laravel で React を使えるようになります。
npm install && npm run dev
Laravel の動作確認をする
Laravel が正常に動作するか確認します。
php artisan serve
http://127.0.0.1:8000 にアクセスして、Laravel のページが表示されたら正常に動作しています。
js ファイルの変更を常時反映させるようにしておく
現状のままだと js ファイルの変更が検知されないので、常時変更を検知してくれるように設定します。
別のターミナルを起動し、Laravel のプロジェクトフォルダ内で npm run watch を実行します。
cd hoge-project
npm run watch
React のサンプルファイルで文字列を表示する
React を利用して画面上に文字列を表示できるよう、既存ファイルを変更していきます。
まずは React を使用しているサンプルファイル（resources\js\components\Example.js）を見てみましょう。
import React from 'react';
import ReactDOM from 'react-dom';
function Example() {
return (
// 省略
);
}
export default Example;
if (document.getElementById('example')) {
ReactDOM.render(<Example />, document.getElementById('example'));
}
id が "example" の HTML タグに文字列を表示する処理だとわかります。
それでは Example.js が出力する内容を表示する HTML タグを記述しましょう。
http://127.0.0.1:8000 にアクセスすると表示される内容は welcome.blade.php（resources\views\welcome.blade.php）に記述されているので、
下記のように編集します。
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
</head>
<body>
<div id="example"></div>
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>
body タグ内に、React 出力データの挿入場所である <div id="example"></div> と、
Example.js を処理するファイル app.js の読み込みを記述します。
http://127.0.0.1:8000 にアクセスし、下記の通りに表示されていれば成功です。
もし Example.js 以外のファイル、例えば Hoge.js を読みこませたい場合は、
app.js（resources\js\app.js）を下記のように編集すると良いでしょう。
require('./bootstrap');
require('./components/Example');
// 下記を追記
require('./components/Hoge');
以上です。