当使用Laravel时，如果只需要简单的实现，前端可以选择使用Blade作为模板引擎。但如果仅仅是其中一些组件必须使用React来实现的情况下，我们将提供一个实现示例。

0. 前提 (Qian2 ti2)

前提 (Qian2 ti2)

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

假设刚刚搭建了Laravel环境。

1. 安装 React

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

修改 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组件的位置。

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中，可以将TestComponent应用于具有react=”test-component”属性的元素。

4. 应用React组件

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

在使用Blade加载app.js的上一行中添加@viteReactRefresh。

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中的类名，请在组件中进行编写。

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',
    ],
    ...

需要在这里添加备注。 .)