我們採用Laravel 外觀套件Bootstarp 前端架構react

安裝Laravel

composer create-project laravel/laravel 專案名
cd 專案名
composer require laravel/breeze --dev
composer require laravel/ui
npm install
php artisan ui bootstrap
npm install

(我測試下來 在切換ui前後各執行一次 npm install 比較不會出WARN訊息)

這階段 安裝Laravel 啟用bootstarp ui模式
如果繼續 php artisan serve 運行
可以建立一個基本的 Laravel網站，可是我們的目標是建立react前端的網站 我們接著繼續下去

安裝react

這步驟開始 可以說是八仙過海各顯神通，有非常多處理方式
因為你有npm, composer,內建html語法 光是點出這幾個，就有至少3種方法引用react
這裡我想以後端為出發點來部屬，所以採用最新版預設的vite，內建於breeze
對於後端人員可能使用mix* 中間一些部分就有語法等價置換要處理

因為我沒找到控制 breeze 安裝指定react版本的方法
所以我們還需要

1. 修正react版本
2. 順便處理副檔名sass載入的事情
3. 移除breeze預設使用的*CSS:tailwind。

php artisan breeze:install react --ssr
npm uninstall react react-dom
npm install reat@17.0.2 react-dom@17.0.2
npm install
npm install sass-loader --save-dev
npm install
npm add -D sass
npm uninstall tailwindcss @tailwindcss/forms

在react專案中使用的" *.jsx "做網頁，一般在Laravel會使用" *.blade.php "

這時候回到你的Laravel專案 前往"專案/ views"，
基本上你的網頁檔案位置會放在這裡
如果react基本上進入點 是index.js引用 app.jsx
那在laravel會用 vite 進入 app.jsx
架構會有點差異，想要修改底層屬性或參數的位置，會有差異。

輔助筆記:

比較:

• Laravel使用 routes/web.php 控制路由 將請求丟給app/Http/Controllers 處理後端資訊後輸出(view)靜態前端畫面 (view=>*.blade.php 因為是.php檔，雖然內容跟html近似但可以混用後端語言)

• React 使用 src/index.js 控制路由 由src/{ * }/ * .jsx控制資訊後 整理js並輸出前端畫面，挾帶大量js， 進行動態替換內容

tailwind CSS 另一個不同於bootstrap的CSS架構，以近似css語法的命名class，
幾乎可以用class定義到相當細節的屬性
不過在多裝置尺寸使用上相對不好使用 我後面查發現等價語法 d-sm-block 近似 sm:d-none
在這對此功能敘述有明確錯誤，在此致歉

在Laravel內運行react仍然需要預先編譯
終端機運行npm run dev 或 npm run build

mix 非混用英文敘述，與vite,webpack像似功能，是將前端全部打包用的