現在還沒開始寫頁面，從底層開始改設定。有些看起來沒用到是後面才會一起處理。盡可能針對每個修改做功能敘述。

進入點引用

路徑: 專案/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/js/app.jsx', 'resources/sass/app.scss'],/*多檔案寫法 Array*/
            /*input: 'resources/js/app.jsx',*/ /*預設*/
            ssr: 'resources/js/ssr.jsx',
            refresh: true,/*自動刷新*/
        }),
        react(),
    ],
});

(曾經被adobe,office系列折磨過，已經下意識做幾個步驟就會自動按下ctrl+s，然後我當前畫面還在看差異，就被刷新掉了QQ)

路由管理

路徑: 專案/routes/web.php
你的預設可以看見 "Inertia"
用他管理路由前往哪個頁面
前面的middleware 跟後面的 name 是laravel的語言

...
Route::get('/dashboard', function () {
    return Inertia::render('Dashboard');
})->middleware(['auth', 'verified'])->name('dashboard');
...

範例管理大概是:
路由::get('相對網址',function(){return Inertia::render('頁面.jsx')})

Route::get('/about',function(){return Inertia::render('About');});

(備註:只要是頁面底層都是get)

起點頁面

路徑: 專案/resources/js/app.jsx
在這裡因為我們修改react版本 內容需要一點調整

你的預設應該是這樣

import './bootstrap';
import '../css/app.css';

import { createRoot } from 'react-dom/client';
import { createInertiaApp } from '@inertiajs/react';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';

const appName = import.meta.env.VITE_APP_NAME || 'Laravel';

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.jsx`, import.meta.glob('./Pages/**/*.jsx')),
    setup({ el, App, props }) {
        const root = createRoot(el);

        root.render(<App {...props} />);
    },
    progress: {
        color: '#4B5563',
    },
});

調整如下

import './bootstrap';
import '../css/app.css';
import { StrictMode } from "react";
import { render, hydrate } from 'react-dom';
//import { createRoot } from 'react-dom/client';
//import { hydrateRoot } from 'react-dom/client';
import { createInertiaApp } from '@inertiajs/react';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ContextProvider } from './Constant/ContextProvider';
//import { ContextProvider } from './Constant/ContextProvider';//全域參數與函數
const appName = import.meta.env.VITE_APP_NAME || 'Laravel';

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.jsx`, import.meta.glob('./Pages/**/*.jsx')),
    setup({ el, App, props }) {
        delete el.dataset.page;//remove div#app data-page

        //const root = ReactDOM.createRoot(el);

        //const root = createRoot(el);
        //root.render(<App {...props} />);
        render( 
        //hydrate(
            <StrictMode>

                    <App {...props} />

            </StrictMode>
            , el)

        //hydrateRoot(el, <StrictMode><App {...props} /></StrictMode>);
    },
    progress: {
        color: '#4B5563',
    },
});

我並未除掉全部react 18版的語法，方便前後參考差異

後期預留功能

我預留 ContextProvider ,hydrate
1.我預留之後會建立ContextProvider 是之前文章介紹的到 React 全域參數, 函數傳遞
之後會補上

<StrictMode>
    <ContextProvider>
        <App {...props} />
    <ContextProvider>
</StrictMode>

2.之後使用Hydrate 需要預留的切換

render => 本地測試
hydrate => build才能使用，如果在dev狀態使用 出很多錯誤訊息

這兩個 是依照你當前是 build 正式運行 還是 dev
所以切換的時候修改 // 的位置，
其實可以用後端語法讓進入點因production還是devlop切換
『腦不能解決的問題，就用肝解決』，我腦中沒有答案，就只能人工處理。
上次想買iphone是用腎的說

創建自己的第一個頁面About

我們先新增路由在 路徑: 專案/routes/web.php

Route::get('/about',function(){return Inertia::render('About');});

新增檔案 路徑: 專案/resources/js/Pages/About.jsx

export default function About() {
    return (
        <div>
            觀光About頁面
        </div>
    );
}

請務必記得 你不只要執行後端php 還有 前端react
建議開兩個cmd終端機

後端

php artisan serve

可以用XAMPP替代，相對的看不到後端的print, log

前端

npm run dev

你也可以直接npm run build 打包運行
架構還算智能，當你沒有運行"npm run dev"且已有build檔
他會自動運行build的檔案。
所以 你如果發現編寫半天完全沒屁用，砍掉build資料夾，重新啟動一次cmd

前往 127.0.0.1:8000/about
這樣你就得到一個最簡易的reac網站頁面

補充:
Inertia 有個原生問題 通常react會有最外層div#app
Inertia會夾帶屬性data-page，去處理跨頁面參數傳遞，目前我沒有找到正確的解決方法。
只能打補釘

delete el.dataset.page;//remove div#app data-page

我是按照Laravel官網建議教學安裝react目標採用Hydrate 預先生成單頁後再將js掛載上去。

我個人覺得react最好的搭配後端並不是laravel，比較合適兩個獨立運行，採API溝通

Hydrate=> 一個相對新的react打包方式
原本的react 打包成大量js檔案在html被啟動的時候啟動寫入DOM元件。
Hydrate 預先打包成接近完整的html頁面，在載入的時候才會將原本的js跟dom元件 結合成對的監聽刷新等動作