LaravelでBladeのフロント実装の一部にReactを使う

Laravelを利用するとき、簡易な実装であればフロントはBladeでいこうという場合がありますが、一部のコンポーネントだけをどうしてもReactで実装しなければならないという場合の実装例をご紹介します。

0. 前提

curl -s "https://laravel.build/example-app?with=mysql&devcontainer" | bash

でLaravel環境を構築した直後とします。

1. Reactのインストール

npm install -D react react-dom @vitejs/plugin-react

2. vite.config.jsの修正

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
+ import react from '@vitejs/plugin-react';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js',],
            refresh: true,
        }),
+       react(),
    ],
});

3. Rectコンポーネントの実装

resource/js直下にcomponentsというディレクトリを切り、Reactコンポーネントの配置場所とします。

resources/js/components/TestComponent.jsx

import { createRoot } from 'react-dom/client';

const TestComponent = (props) => {
    return <div>Hello {props.name}</div>
}

export default TestComponent

// 以下のコードでBladeにReactコンポーネントを差し込んでいる
const elems = document.querySelectorAll('[react=test-component]')
if (elems) {
    Array.from(elems)
        .filter(elem => elem.childNodes.length == 0)
        .forEach(elem => {
            const dataset = elem.dataset;
            const root = createRoot(elem);
            root.render(
                <TestComponent {...dataset} />
            )
        })
}

こちらのjsxをBladeに読み込ませることで、react="test-component"属性を与えた要素にTestComponentを適用することができます。

4. Reactコンポーネントの適用

+       @viteReactRefresh
        @vite(['resources/css/app.css', 'resources/js/app.js'])

app.jsをBladeで読み込んでいる1行上に@viteReactRefreshを追加します。

resource/js/app.js

import './bootstrap';

import Alpine from 'alpinejs';

window.Alpine = Alpine;

Alpine.start();

+ import './components/TestComponent';

app.jsにTesComponentを追加します（ここは工夫のしようがありそうです）。

そしてTestComponentを追加したいBladeに

<div react="test-component" data-name="Laravel"></div>

を差し込むと、

Hello Laravel

と表示されると思います。

（5. Tailwind CSSを利用する場合）

Bladeで簡易に実装する場合、Laravel Breezeを利用する場合があるかと思います。そうすると自動的にTailwind CSSがインストールされます。
Reactコンポーネント側に記述したクラス名をTailwind CSSに認識させるには、

tailwind.config.js

import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
+       './resources/js/components/**/*.jsx',
    ],
    ...

こちらの追記が必要です。