Zenn
📑

Laravel8の一部にReactを導入するには

2024/12/17に公開
JavaScript
Laravel
PHP
React
Node.js
tech

はじめに

Reactの入門書を見るとcreate-react-appでSPAを作る方法しか載っていないことが多くて、Laravelの一部に注入して、動きの管理がややこしいところだけReactでやりたいって時の方法がありません。
Laravelはvue.jsのサポートは手厚くて、vue.jsの場合は設定が少なく済んだりするのですが、Reactではどうするのでしょうか。
導入できた方法を公開します。

なお、今回はLaravel8のlaravel-mixを使っていますが新しいLaravelだとビルドツールが違うかもしれません。その場合は適宜読み替えてください。

Reactのインストール

まず、ReactをLaravelプロジェクトにインストールします。

npm install react react-dom

次にLaravel Mix用のReactプリセットをインストール Laravel MixにReactを統合するために以下を実行します。

npm install laravel-mix@latest

webpack.mix.js を編集 プロジェクトのルートにある webpack.mix.js ファイルを編集して、Reactのビルドを設定します。

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .react() // Reactを有効化
    .sass('resources/sass/app.scss', 'public/css')
    .version(); // キャッシュバスティング

Reactコンポーネントを作成 resources/js/components/Example.jsx というファイルを作成して、以下のような内容を記述します。

import React from 'react';

export default function Example() {
    return (
        <div>
            <h1>Hello, React in Laravel 8!</h1>
        </div>
    );
}

Reactのエントリーポイントを設定 resources/js/app.js ファイルを編集し、以下を記述します。

javascript
import React from 'react';
import { createRoot } from 'react-dom/client';
import Example from './components/Example';

const root = document.getElementById('example');

if (root) {
    createRoot(root).render(<Example />);
}

BladeテンプレートでReactを呼び出す resources/views/welcome.blade.php などに以下のようにReactコンポーネントを呼び出すエリアを作成します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Laravel + React</title>
    <link rel="stylesheet" href="{{ mix('css/app.css') }}">
</head>
<body>
    <div id="example"></div>
    <script src="{{ mix('js/app.js') }}"></script>
</body>
</html>

おわりに

お疲れ様でした。
SPAと違い、この方法でやる場合は注入場所ごとにエントリーポイントを作って、成果物のjsファイルも分けたほうが扱いやすいかなと思います。

株式会社ONE WEDGE

【Serverlessで世の中をもっと楽しく】 ONE WEDGEはServerlessシステム開発を中核技術としてWeb系システム開発、AWS/GCPを利用した業務システム・サービス開発、PWAを用いたモバイル開発、Alexaスキル開発など、元気と技術力を武器にお客様に真摯に向き合う価値創造企業です。
https://onewedge.co.jp

Discussion