如何与Laravel进行反应？

通过安装Laravel，配置数据库，创建API路由和从控制器返回JSON，将Laravel作为API后端设置为API后端，可选地使用Laravel Sanctum进行身份验证。 2。选择独立的React Spa分别使用或使用惯性。JS进行更紧密的Laravel整合，惯性允许React组件在Laravel的路由和会话系统中工作。 3。使用惯性时，安装所需的软件包，配置vite，创建root react组件，将React页面放置在Resources/js/peg/pages/中，然后从带有数据传递的数据的路由中返回惯性响应。 4。对于解耦设置，运行laravel并在单独的域上进行反应，使用Axios或Fetch从React调用Laravel API，并正确处理CORS和身份验证。 5。最佳实践包括使用VITE进行更快的构建，通过功能组织React组件，用Laravel API资源格式化API响应，并尽早测试CORS和认证。惯性和独立的React应用程序之间的选择取决于项目的复杂性和团队偏好，惯性简化了全栈集成和独立的SPA，具有更大的前端灵活性，这都是现代Laravel-React-React-React应用程序的有效方法。

与Laravel集成的反应使您可以构建功能强大的动态前端，同时利用Laravel强大的后端功能（例如路由，身份验证和API）。这是在现代Laravel项目中有效做到的方法。

1。设置Laravel并创建一个API

首先，确保Laravel设置为后端API。

• 通过作曲家安装Laravel：

  

  作曲家创建项目Laravel/Laravel您的项目名称

• 使用数据库设置配置.env文件并运行迁移：

   PHP工匠迁移

• 在routes/api.php中创建API路由：

  

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

• 确保您的控制器返回JSON（API资源或雄辩集合）：

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

如果您需要对React前端进行身份验证，请使用Laravel Sanctum。

2。选择如何服务反应：spa vs inertia.js

您有两种主要方法：

选项A：独立React应用程序（SPA）

• 构建使用Vite或创建React App单独反应。
• 从不同的域（例如， http://localhost:3000 ）或静态文件提供它。
• 在开发过程中配置Laravel与代理API调用（可选）。

✅最适合具有许多交互式组件的大型，复杂的前端。

选项B：使用intertia.js（为简单起见推荐）

惯性可让您在呆在Laravel的路由和会话系统中时使用React组件。

• 安装惯性：

  作曲家需要惯性/惯性 - 律师

• 设置前端脚手架：

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

• 更新vite.config.js ：

  从'vite'导入{decteConfig};
  导入从“@vitejs/plugin-react”中导入反应；
  从“ laravel-vite-plugin”中导入laravel；
  
  导出默认decteConfig（{
    插件：[
      laravel（{
        输入：“资源/js/app.jsx”，
        刷新：是的，
      }），
      react（），
    ]，，
  }）;

• 创建您的root React组件（ resources/js/app.jsx ）：

  从'react-dom/client'导入{createroot};
  从'@intiajs/react'导入{createInertiaApp};
  
  createinertiaapp（{
    分辨：name => require（`./ pages/$ {name}`），
    设置（{el，app，props}）{
      createroot（el）.render（<app {... props} />）;
    }，，
    标题：标题=>`我的应用程序| $ {title}`，
  }）;

• 拉拉维尔路线的返回惯性反应：

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

✅非常适合全栈应用程序，您希望Laravel处理路由并为UI提供供电。

3. laravel内部的构建反应组件

使用惯性或捆绑设置：

• 将REACT组件放置在resources/js/Pages/中。

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

  从'@intiajs/react'导入{usepage};
  
  导出默认函数Postex（{posts}）{
    const {props} = usepage（）;
    返回 （
      <div>
        <H1>帖子</h1>
        {props.posts.map（post =>（（
          <div key = {post.id}> {post.title} </div>
        ）}}
      </div>
    ）；
  }

• 通过Laravel控制器传递数据：

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

？对于动态数据（例如，搜索，分页），使用惯性访问或轴心击中Laravel API路线。

4。使用Laravel作为API作为前端的反应（已解耦）

如果您喜欢完全独立的前端：

• 保持Laravel在api.yourapp.test上运行（仅后端）。

• 在localhost:3000上构建React App（使用Vite，Next.js等）。

• 通过Axios或获取致电Laravel Apis：

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

• 处理CORS：安装fruitcake/laravel-cors或使用Laravel Sanctum的水疗特征。

  作曲家需要水果蛋糕/拉拉维尔 - 卡

⚠️请记住管理身份验证（Sanctum/Socialite）和CSRF，如果不是无状态的话。

最终提示

• 在WebPack上使用VITE （更快的构建）。
• 保持反应组件按页面或功能组织。
• 使用Laravel API资源清洁json输出。
• 尽早测试CORS和身份验证。

基本上，您可以通过惯性进行紧密的夫妇反应，也可以将其作为前端水疗中心分开。惯性降低了复杂性，并使您进入Laravel生态系统，而独立的React应用程序则具有更大的前端灵活性。根据您的团队和项目需求选择。

以上是如何与Laravel进行反应？的详细内容。更多信息请关注PHP中文网其他相关文章！