將 Laravel 與 React.js 整合：步驟與技巧

Laravel 11 和 React.js 是編寫簡潔高效程式碼的絕佳組合。

在問題上教程我們會看到如何使用 Vite 將 React js 加入到 Laravel 11 ：來自版本 9.19 Laravel 過去了螺絲網路包，那就變成 Laravel 應用程式預設的前端資源捆綁器。

預計閱讀時間： 3 minuti

整合最新版本 React.js 同 Laravel 這是一項具有挑戰性的任務，但透過仔細遵循下面描述的步驟，您會發現一切都會變得更容易。

Laravel 11 安裝

首先我們安裝 Laravel 11 框架，將專案命名為「larareact」：

composer create-project --prefer-dist laravel/laravel larareact

為了Laravel 安裝 我們用 作曲家，選項 –首選距離 影響依賴項的下載方式。

差不多的選擇 –首選距離 告訴 Composer 使用以下命令下載並解壓縮依賴檔案 GitHub上 或其他 API 有空的時候。在大多數情況下，它用於更快地下載依賴項。

也就是說，它不會下載版本控制系統 (VCS) 的整個依賴關係歷史記錄，這使得它可以更好地快取。檔案於 GitHub上 它們可能會排除一些您不需要使用依賴項的檔案。它是預設選項，對於您不主動處理依賴項本身的大多數情況很有用。

安裝正確的 npm 套件

在我們繼續之前，這裡有一些您需要安裝才能正確整合的軟體包 React.js 18 in 拉拉維爾 11！

現在執行以下命令從套件管理器安裝所有庫節點.

npm install

安裝 laravel/ui 包

存取項目資料夾 拉雷反應 並安裝套件 Laravel/使用者介面 使用以下命令。

composer require laravel/ui

在 Laravel 中配置 React

現在我們已經安裝了 Composer UI 包，我們需要執行下面給出的命令來配置應對 in Laravel.

php artisan ui react

現在，轉到文件 螺絲配置.js 並導入插件 '@vitejs/plugin-react'。文件 螺絲配置.js 也必須在插件數組中包含react()：

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


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

啟動伺服器

您可以前往 Laravel 專案的根目錄，打開終端機或命令列，然後啟動 Laravel 和開發伺服器，這將使用熱加載並更新 javascript 檔案。

npm run dev

php artisan serve

確保兩台伺服器都在運作！

設定 React 元件

運行命令後 php artisan ui 反應，在資料夾內 資源/js ，讓我們建立一個元件 jsx 叫 “首頁.jsx” 並將以下程式碼新增至該文件。

import React from "react"

export default function Home() {
    return (
        <div className="container">
            <div className="row my-5">
                <div className="col-md-8 mx-auto">
                    <h1 className="text-danger"> Add React js to laravel 11 with vite</h1>
                </div>
            </div>
        </div>
    )
}

現在在資料夾內 資源/js ，讓我們建立一個元件 jsx 叫 “app.jsx” 並加入下面的程式碼。

import './bootstrap';

import React from "react"
import ReactDOM from 'react-dom/client';        

import Home from './Home';

ReactDOM.createRoot(document.getElementById('app')).render(     
    <Home />        
);

編輯刀片檔案以查看組件

最後一步是編輯包含該元件的刀片文件應對，這將透過伺服器顯示網頁 Laravel.

在文件內寫入以下程式碼 歡迎.blade.php.

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">

        <!-- Styles -->
        <style>
            body {
                font-family: 'Nunito', sans-serif;
            }
        </style>
    </head>
    <body>
        <div id="app"></div>
        @vite('resources/js/app.jsx')
    </body>
</html>

儲存檔案並確保兩台伺服器 “npm 運行開發” e “php artisan 服務” 工作沒有錯誤。

如果一切正常，請造訪以下 URL： http://localhost:8000/ 你會看到輸出！