使用Laravel后端构建React应用程序：第2部分，React

您将要创造的

这是关于使用Laravel后端构建React应用程序的系列的第二部分也是最后一部分。 在本系列的第一部分中，我们使用Laravel为基本的产品列表应用程序创建了RESTful API。 在本教程中，我们将使用React开发前端。

我们还将考虑所有可用的选项，以弥合Laravel和React之间的鸿沟。 您无需遵循本系列的第一部分即可理解本教程。 如果您在这里看到React和Laravel如何相处融洽，那么您实际上可以避免第一部分。 您应该转到GitHub ，克隆存储库，然后快速浏览以下内容以开始使用。

快速回顾

在上一个教程中，我们开发了一个可响应API调用的Laravel应用程序。 我们为简单的产品列表应用程序创建了路线，控制器和模型。 由于返回HTTP请求的响应是控制器的工作，因此视图部分被完全跳过。

然后，我们讨论了使用Laravel进行异常处理和验证的技术。 在教程结束时，我们有了Laravel后端API。 现在，我们可以使用此API为网络和各种移动设备构建应用程序。

在本教程中，我们将把重点转移到前端。 本教程的前半部分是关于在Laravel环境中设置React。 我还将向您介绍Laravel Mix（由Laravel 5.4和更高版本支持），它是用于编译资产的API。 在本教程的后半部分，我们将从头开始构建一个React应用程序。

在Laravel中设置React

Laravel Mix是在Laravel 5.4中引入的，目前是连接React和Laravel的理想方法。 使用Laravel 5.5，整个过程变得更加容易。 我在下面介绍了这两种方法。

使用React Preset命令（Laravel 5.5）

Laravel 5.5具有一项崭新的功能，可让您使用工匠的preset react命令来构建React组件的代码。 在以前的Laravel版本中，在Laravel中设置React并非易事。 如果您正在运行最新版本的Laravel，请运行以下命令将React预设添加到您的项目中。

php artisan preset react

默认情况下，Laravel随Vue预设一起提供，并且以上命令将Vue的所有实例替换为React。 有趣的是，如果您不需要预设，则可以使用php artisan preset none命令将其完全删除。

如果一切顺利，这应该显示在您的终端中。

React scaffolding installed successfully.
Please run "npm install && npm run dev" to compile your fresh scaffolding.

在后台，Laravel使用Laravel Mix，它是Webpack的平滑包装器。 您可能已经知道，Webpack是一个模块捆绑器。 它解决了所有模块依赖性，并为JavaScript和CSS生成了必要的静态资产。 React需要一个模块捆绑器来工作，而webpack恰好适合这个角色。 因此Laravel Mix是位于webpack之上的层，使在Laravel中使用webpack更容易。

如果您以后需要自定义Webpack配置，则更好地了解Laravel Mix的工作方式非常重要。 React预设命令没有提供有关事物在后台如何工作的信息。 因此，让我们删除React预设，然后手动回溯步骤。

手动方法（Laravel 5.4）

如果您正在运行Laravel 5.4，或者只是好奇地了解Laravel Mix的配置方式，请按照以下步骤操作：

使用npm安装react ， react-dom和babel-preset-react 。 也安装纱线可能是一个好主意。 Laravel和React比npm更喜欢纱线已经不是什么秘密了。

转到位于Laravel项目根目录内的webpack.mix.js。 这是配置文件，您在其中声明应如何编译资产。 替换行mix.js('resources/assets/js/app.js', 'public/js'); 与mix.react('resources/assets/js/app.js', 'public/js'); 。 app.js是我们JavaScript文件的入口点，编译后的文件将位于public / js内 。 在终端中运行npm install以安装所有依赖项。

接下来，转到resources / assets / js 。 已经有一个components文件夹和两个其他JavaScript文件。 React组件将进入components目录。 删除现有的Example.vue文件并为示例React组件创建一个新文件。

资源/资产/js/component/Main.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

/* An example React component */
class Main extends Component {
    render() {
        return (
            <div>
                <h3>All Products</h3>
            </div>
        );
    }
}

export default Main;

/* The if statement is required so as to Render the component on pages that have a div with an ID of "root";  
*/

if (document.getElementById('root')) {
    ReactDOM.render(<Main />, document.getElementById('root'));
}

更新app.js以删除所有与Vue相关的代码，并导入React组件。

资源/资产/js/app.js