构建具有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中文网其他相关文章！