在 Laravel 8 中安装 React

为了在 Laravel 8 中使用 React， 我们需要安装一些npm包来管理前端的依赖。

安装 Node.js 与 NPM

在 Laravel 8 中，我们需要安装 Node.js 和 NPM 来管理前端的依赖。如果您已经在系统上安装了 Node.js 和 NPM，则可以跳过此步骤。

您可以从 Node.js 官网 下载 Node.js 的安装程序并按照安装向导进行操作。安装完成后，您就可以使用 node -v 命令查看 Node.js 的版本。

同样，您可以使用以下命令确认 NPM 已成功安装：

npm -v

创建新的 Laravel 8 项目

在创建 Laravel 8 项目之前，您需要确保已经在系统上安装了 Composer。您可以在 Composer 官网 下载安装程序。

要创建一个新的 Laravel 8 项目，运行以下命令：

composer create-project --prefer-dist laravel/laravel my-project

请根据您的项目名称更改 my-project。这个命令将创建一个新的 Laravel 8 项目。

安装 React

步骤 1：安装 Laravel 脚手架

Laravel 8 默认包含了 React 基础脚手架。安装如下：

php artisan ui react

步骤 2：安装 React DOM

npm install react react-dom

步骤 3：安装 Babel 和 Webpack

npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react

npm install --save-dev webpack webpack-cli webpack-dev-server style-loader css-loader

步骤 4：创建前端文件夹和编译文件

mkdir resources/js/components
touch resources/js/app.js
touch webpack.mix.js

打开 app.js 文件，添加以下内容：

require('./components/Example');

然后打开 webpack.mix.js 文件，添加以下内容：

const mix = require('laravel-mix');

mix.react('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

最后，运行以下命令，编译您的项目：

npm run dev

现在，您应该就能在 Laravel 8 中使用 React 了！精彩无限！