プロジェクト作成

composer でプロジェクト名「laravel_app」を作成します。

$ composer create-project laravel/laravel laravel_app

Laravel のバージョンを確認しておきます。

Laravel Framework 7.12.0

UIパッケージをインストール

laravel_app に移動して、ComposerでLaravelのUIパッケージ laravel/ui をインストールします。

$ cd laravel_app
$ composer require laravel/ui

Reactをインストール

Reactを利用できるようにスカフォールドをインストールします。

$ php artisan ui react
//Authを利用する場合
$ php artisan ui react --auth

npmでインストール＆ビルド（開発）

package.jsonに記述された内容で依存パッケージをインストールとLaravel Mixでビルドします。

$ npm install
$ npm run dev

関連ファイルの監視

関連ファイルの変更を監視しておきます。

$ npm run watch

これでReactがインストールされたLaravelプロジェクト作成が完了しました。

ここで Laravelサーバを起動して確認してみましょう。

おなじみの Laravel の画面は表示されましたが、この画面ではReact の動作実装されていません。

Reactを確認する

Laravel で React をインストールするとあらかじめサンプルファイルが作成されています。

app.js

resources/js/app.js には Bootstrap と Reactコンポーネント「Example」が読み込まれています。

require('./bootstrap');
require('./components/Example');

Example.js

resources/js/components/Example.js には、Reactコンポーネント「Example」の中身です。
Reactでは、HTMLレンダリングにJSXを利用しますが、JavaScriptに直接HTMLタグを記述できる点で便利です。

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

function Example() {
    return (
        ...JSX...
    );
}

export default Example;
...

レイアウトファイルの修正

現状だと Reactコンポーネントは表示できないため、Laravelのレイアウトファイル「resources/views/welcom.blade.php」を修正します。

Laravelのmix()関数で app.jsを読み込んでいます。

また、Exampleコンポーネントを表示する場合、HTMLタグにidを指定して呼び出します。

動作確認

もういちど、サーバを確認してみると今度は、Exampleコンポーネントを読み込んだ状態で表示されました。