通過(guò)安裝Laravel，配置數(shù)據(jù)庫(kù)，創(chuàng)建API路由和從控制器返回JSON，將Laravel作為API後端設(shè)置為API後端，可選地使用Laravel Sanctum進(jìn)行身份驗(yàn)證。 2。選擇獨(dú)立的React Spa分別使用或使用慣性。 JS進(jìn)行更緊密的Laravel整合，慣性允許React組件在Laravel的路由和會(huì)話系統(tǒng)中工作。 3。使用慣性時(shí)，安裝所需的軟件包，配置vite，創(chuàng)建root react組件，將React頁(yè)面放置在Resources/js/peg/pages/中，然後從帶有數(shù)據(jù)傳遞的數(shù)據(jù)的路由中返回慣性響應(yīng)。 4。對(duì)於解耦設(shè)置，運(yùn)行l(wèi)aravel並在單獨(dú)的域上進(jìn)行反應(yīng)，使用Axios或Fetch從React調(diào)用Laravel API，並正確處理CORS和身份驗(yàn)證。 5。最佳實(shí)踐包括使用VITE進(jìn)行更快的構(gòu)建，通過(guò)功能組織React組件，用Laravel API資源格式化API響應(yīng)，並儘早測(cè)試CORS和認(rèn)證。慣性和獨(dú)立的React應(yīng)用程序之間的選擇取決於項(xiàng)目的複雜性和團(tuán)隊(duì)偏好，慣性簡(jiǎn)化了全棧集成和獨(dú)立的SPA，具有更大的前端靈活性，這都是現(xiàn)代Laravel-React-React-React應(yīng)用程序的有效方法。

與Laravel集成的反應(yīng)使您可以構(gòu)建功能強(qiáng)大的動(dòng)態(tài)前端，同時(shí)利用Laravel強(qiáng)大的後端功能（例如路由，身份驗(yàn)證和API）。這是在現(xiàn)代Laravel項(xiàng)目中有效做到的方法。

1。設(shè)置Laravel並創(chuàng)建一個(gè)API

首先，確保Laravel設(shè)置為後端API。

• 通過(guò)作曲家安裝Laravel：

  

  作曲家創(chuàng)建項(xiàng)目Laravel/Laravel您的項(xiàng)目名稱

• 使用數(shù)據(jù)庫(kù)設(shè)置配置.env文件並運(yùn)行遷移：

   PHP工匠遷移

• 在routes/api.php中創(chuàng)建API路由：

  

  路由:: get（'/posts'，[postcontroller :: class，'index']）;

• 確保您的控制器返回JSON（API資源或雄辯集合）：

  公共功能索引（）
  {
      返回帖子:: all（）;
  }

如果您需要對(duì)React前端進(jìn)行身份驗(yàn)證，請(qǐng)使用Laravel Sanctum。

2。選擇如何服務(wù)反應(yīng)：spa vs inertia.js

您有兩種主要方法：

選項(xiàng)A：獨(dú)立React應(yīng)用程序（SPA）

• 構(gòu)建使用Vite或創(chuàng)建React App單獨(dú)反應(yīng)。
• 從不同的域（例如， http://localhost:3000 ）或靜態(tài)文件提供它。
• 在開發(fā)過(guò)程中配置Laravel與代理API調(diào)用（可選）。

?最適合具有許多交互式組件的大型，複雜的前端。

選項(xiàng)B：使用intertia.js（為簡(jiǎn)單起見推薦）

慣性可讓您在呆在Laravel的路由和會(huì)話系統(tǒng)中時(shí)使用React組件。

• 安裝慣性：

  作曲家需要慣性/慣性 - 律師

• 設(shè)置前端腳手架：

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

• 更新vite.config.js ：

  從'vite'導(dǎo)入{decteConfig};
  導(dǎo)入從“@vitejs/plugin-react”中導(dǎo)入反應(yīng)；
  從“ laravel-vite-plugin”中導(dǎo)入laravel；
  
  導(dǎo)出默認(rèn)decteConfig（{
    插件：[
      laravel（{
        輸入：“資源/js/app.jsx”，
        刷新：是的，
      }），
      react（），
    ]，，
  }）;

• 創(chuàng)建您的root React組件（ resources/js/app.jsx ）：

  從'react-dom/client'導(dǎo)入{createroot};
  從'@intiajs/react'導(dǎo)入{createInertiaApp};
  
  createinertiaapp（{
    分辨：name => require（`./ pages/$ {name}`），
    設(shè)置（{el，app，props}）{
      createroot（el）.render（<app {... props} />）;
    }，，
    標(biāo)題：標(biāo)題=>`我的應(yīng)用程序| $ {title}`，
  }）;

• 拉拉維爾路線的返回慣性反應(yīng)：

  使用慣性\慣性；
  
  路由:: get（'/'，function（）{
      返回慣性:: Render（'Welcome'，['消息'=>'Hello raravel！']）;
  }）;

?非常適合全棧應(yīng)用程序，您希望Laravel處理路由並為UI提供供電。

3. laravel內(nèi)部的構(gòu)建反應(yīng)組件

使用慣性或捆綁設(shè)置：

• 將REACT組件放置在resources/js/Pages/中。

• 示例： resources/js/Pages/Posts/Index.jsx

  從'@intiajs/react'導(dǎo)入{usepage};
  
  導(dǎo)出默認(rèn)函數(shù)Postex（{posts}）{
    const {props} = usepage（）;
    返回 （
      <div>
        <H1>帖子</h1>
        {props.posts.map（post =>（（
          <div key = {post.id}> {post.title} </div>
        ）}}
      </div>
    ）；
  }

• 通過(guò)Laravel控制器傳遞數(shù)據(jù)：

  返回慣性::渲染（'post/index'，[
      '帖子'=> post :: all（）
  ）;

？對(duì)於動(dòng)態(tài)數(shù)據(jù)（例如，搜索，分頁(yè)），使用慣性訪問或軸心擊中Laravel API路線。

4。使用Laravel作為API作為前端的反應(yīng)（已解耦）

如果您喜歡完全獨(dú)立的前端：

• 保持Laravel在api.yourapp.test上運(yùn)行（僅後端）。

• 在localhost:3000上構(gòu)建React App（使用Vite，Next.js等）。

• 通過(guò)Axios或獲取致電Laravel Apis：

   useeffect（（）=> {
    axios.get（'http：//api.yourapp.test/api/posts'）
      。
      .catch（err => console.error（err））;
  }，[]）;

• 處理CORS：安裝fruitcake/laravel-cors或使用Laravel Sanctum的水療特徵。

  作曲家需要水果蛋糕/拉拉維爾 - 卡

??請(qǐng)記住管理身份驗(yàn)證（Sanctum/Socialite）和CSRF，如果不是無(wú)狀態(tài)的話。

最終提示

• 在WebPack上使用VITE （更快的構(gòu)建）。
• 保持反應(yīng)組件按頁(yè)面或功能組織。
• 使用Laravel API資源清潔json輸出。
• 儘早測(cè)試CORS和身份驗(yàn)證。

基本上，您可以通過(guò)慣性進(jìn)行緊密的夫婦反應(yīng)，也可以將其作為前端水療中心分開。慣性降低了複雜性，並使您進(jìn)入Laravel生態(tài)系統(tǒng)，而獨(dú)立的React應(yīng)用程序則具有更大的前端靈活性。根據(jù)您的團(tuán)隊(duì)和項(xiàng)目需求選擇。

以上是如何與Laravel進(jìn)行反應(yīng)？的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！