構建具有Laravel後端的React應用程序：第2部分，React

這是有關用Laravel後端構建React應用程序的系列的第二個也是最後一部分。在該系列的第一部分中，我們使用Laravel為基本的產品上市應用程序創建了一個RESTFUL API。在本教程中，我們將使用React進行開發前端。

我們還將考慮所有可用的選項來彌合Laravel和React之間的差距。您無需遵循該系列的第一部分即可了解本教程。如果您在這裡看到反應和拉維爾的票價如何，則實際上可以避免第一部分。您應該前往github，克隆回購，然後按照下面的快速回顧開始。

>

>在上一個教程中，快速回顧

，我們開發了一個對API調用響應的Laravel應用程序。我們為簡單產品列表應用程序創建了路線，控制器和模型。由於控制器的工作是返回對HTTP請求的響應，因此視圖部分被完全跳過。

>

>，我們討論了使用Laravel的例外處理和驗證的技術。到教程結束時，我們有了Laravel後端API。現在，我們可以使用此API來為網絡和各種移動設備構建應用程序。

在本教程中，我們將把重點轉移到前端。本教程的前半部分是關於在Laravel環境中設置React。我還將向您介紹Laravel Mix（由Laravel 5.4及以後的支持），這是用於編譯資產的API。在本教程的下半年，我們將開始從頭開始構建React應用程序。

>在Laravel 5.4中引入了Laravel

Laravel Mix中的React React，這是當前連接React和Laravel的理想方法。使用Laravel 7，整個過程變得更加容易。我已經描述了下面的兩種方法。

>

使用React Prest命令（Laravel 5.5和Laravel 7）

Laravel 5.5具有一個功能，可讓您使用Artisan的Larisan的Laravel/ui composer包裝進行反應組件的代碼，並使用它來創建一個反應的cafford caffold off cafflodt：以及用於用戶身份驗證的註冊組件。您可能已經知道，WebPack是一個模塊捆綁包。它可以解決所有模塊依賴性，並為JavaScript和CSS生成必要的靜態資產。 React需要一個模塊Bundler工作，WebPack完全適合該角色。因此，Laravel Mix是位於WebPack頂部的層，並使在Laravel中使用WebPack更容易。

> 更好地理解Laravel Mix的工作方式，如果您需要在以後的時間自定義WebPack配置，這一點很重要。 React Preset命令沒有提供有關背景中事物的工作方式的信息。因此，讓我們刪除反應預設，然後手動追溯步驟。

>

手動方法（Laravel 5.4）

如果您正在運行Laravel 5.4，或者如果您只是好奇地看到Laravel Mix的配置方式，以下是您需要遵循的步驟：

>

安裝USESTATE

composer require laravel/ui<br>php artisan ui react<br><br>// Generate login & registration scaffolding...<br>php artisan ui react --auth<br>

和依賴關係

和依賴性將執行。在其中，我們使用RenderProducts方法來描述組件的UI。最後，所有產品都被渲染為列表。

最後，我們將返回語句中的頁面渲染到頁面。

>

>該頁面只是列出了無聊的產品標題。此外，我們還沒有任何互動元素。讓我們讓產品標題可單擊，然後單擊，有關產品的更多詳細信息將得到渲染。

顯示產品數據

>這是我們需要涵蓋的內容：
• >>一個狀態以跟踪單擊的產品。讓我們稱其為主組件。主體是母體，將函數參考作為props傳遞。兒童組件，main組件，我們將聲明product

  組件，而更新功能應具有自己的組件。我鼓勵您承擔這一挑戰並完成缺失的組件。

  摘要

  我們距離開始的地方已經走了很長一段路。首先，我們使用Laravel框架創建了REST API。然後，我們討論了混合Laravel和反應的選擇。最後，我們使用React構建了API的前端。

  ，儘管我們主要致力於使用React創建單頁應用程序，但您可以創建視圖中安裝在特定元素上的小部件或組件。反應非常靈活，因為它是一個庫，而且是一個好的圖書館。實際上，我們在市場上有許多物品可供購買，審查，實施等。如果您正在尋找圍繞React的其他資源，請不要猶豫。你的想法是什麼？在論壇中與我們分享。

  本文已隨著金斯利·烏巴（Kingsley Ubah）的貢獻而更新。金斯利熱衷於創建教育和啟發讀者的內容。愛好包括閱讀，足球和騎自行車。

以上是構建具有Laravel後端的React應用程序：第2部分，React的詳細內容。更多資訊請關注PHP中文網其他相關文章！