Laravel React如何在 Laravel 应用程序中使用 React - 教程

响应式应用程序是 Web 世界的重要组成部分，因此有必要使用最新技术进行部署。Laravel 自 5.5 版本起就集成了脚手架来部署 React JS。在本教程中，我们将学习如何集成 React 和 Laravel。

事实上，这非常简单，让我们开始吧！

安装 Laravel

要在 Laravel 中创建新项目，我们要做的第一件事就是使用 Composer 下载 Laravel 安装程序：

$ composer global require laravel/installer

如果您没有安装作曲家，请访问：https://dev.to/lvtdeveloper/installing-virtual-environment-with-laravel-homestead-tutorial-4p32
在本文中，我解释了如何操作，请查看。

创建项目的第一个命令是“laravel new”，后跟我们要为项目指定的名称。例如，“laravel new dutylist”将创建一个名为 dutylist 的目录，其中包含一个全新的 Laravel 安装包，并且所有依赖项都已安装。

$ laravel new 职责列表

完成后，使用以下命令进入新目录：

$cd 职责列表

在 Laravel 中使用 React

默认情况下，Laravel 应用程序包含一个位于 resources/js/components 目录中的 ExampleComponent.vue Vue 组件。ExampleComponent.vue 文件是一个单文件 Vue 组件的示例，它在同一个文件中定义其 JavaScript 和 HTML 模板。单文件组件为构建 JavaScript 驱动的应用程序提供了一种非常便捷的方法。该示例组件已在你的 app.js 文件中注册：

我们需要使用以下命令将默认的 Vue.js 脚手架更改为 React.js：

现在您可以看到 Laravel 在位于 resources/js/components 目录中的 Example.js 文件中创建了一个 React 组件：

运行命令“npm install”来安装我们项目所需的所有 javascript 包。

当我们使用 npm install 安装依赖项时，会自动生成一个 node_modules 目录，用于保存已安装的软件包。此外，还会生成一个 package-lock.json 文件，用于跟踪 node_modules 中的更改或 package.json 文件的更改。

现在我们使用以下命令启动应用程序：

在浏览器中打开“ http://localhost:8000 ”，就可以看到 Laravel 的默认视图

让我们使用 react 将此视图更改为其他视图。

在 resources/js/components 目录中创建一个 index.js 文件

将 Example.js 文件中的所有内容复制到 index.js 并进行一些更改：

在 app.js 中我们添加新组件

为了将任何元素渲染到浏览器 DOM 中，我们需要一个容器或根 DOM 元素。在本例中，

要通过 React JS 显示视图，我们需要使用 Laravel Mix 和“npm run dev”命令编译 JavaScript 文件：

现在我们有了一个使用 react.js 的 Laravel 应用程序

感谢阅读！祝
各位程序员们有美好的一天💜