如何将React添加到我的Laravel项目中？

Question

这是一个简单的问题。我从Laravel文档中尝试了一下，运行了"php artisan preset react"和"npm install && npm run dev"命令，现在我只想编写一个简单的React脚本。 "Original Answer"翻译成"最初的回答"。

const title = React.createElement(
        'h1',
        {id:'title',className:'header'},
        'Hello World'
    )
    ReactDOM.render(
        title,
        document.getElementById('react-container')
    )

最初的回答： 当我向DOM中添加一个带有“hello world”的标题时，它不起作用。但是当我添加react cdn时（标题被添加），它就起作用了。在我已经在laravel中安装了react之后，我是否仍需要包含cdn？或者我做错了什么？我在网上搜索过，但对我来说有点复杂，我无法理解。有人能帮帮我吗？

这是我在Laravel Blade中的全部代码：

@extends('BaseLayouts.body')
@section('main_body')

<link rel="stylesheet" href="{{asset('css\app.css')}}" />
<script src="{{asset('js\app.js')}}"></script>
    <script>
window.onload = function () {
    const title = React.createElement(
            'h1',
            {id:'title',className:'header'},
            'Hello World'
        )
        ReactDOM.render(
            title,
            document.getElementById('react-container')
        )
};



</script>

<div id="react-container"></div>


@endsection

在一个教程中，我看到有一个React的示例文件添加到了js文件夹中，但是在我的情况下并没有这样的文件。

当我将脚本写在一个单独的文件中时，phpStorm会检测到React，但对于React.createElement，phpStorm会显示unresolved function or method。

最初的回答：

您可以尝试使用npm安装React，并确保正确引入相关的js文件。如果仍然存在问题，可以尝试重启IDE或清除缓存。如果仍然无法解决，请检查您的代码是否存在语法错误或其他引用问题。

- Geco

---

定义：“it doesn't work”。您的视图中是否包含正确的JavaScript脚本？您是否在JavaScript代码中添加了所有导入项？ - Jerodev

抱歉，我更新了我的问题。看看我的代码吧。它在我的 Blade 文件中。 - Geco

我需要包含什么吗？我使用npm安装了React。这对于这段简单的代码来说不够吗？ - Geco

你的代码应该放在 app.js 中并进行转译。这样，你可以做一些像 import * as React from 'react' 这样的事情，以便得到转译后的 React 并包含在你的捆绑文件中。 - apokryfos

@apokryfos 我也尝试过，不起作用。 - Geco

Answer 1

虽然这个问题一个月前就被问过了，但我认为这个答案可以帮助有需要的人。

使用 Laravel Mix 编译 React 组件是与 Laravel 一起工作的正确方式。当您运行命令 php artisan preset react 时，Laravel Mix 会配置为使用 React 自身而不是使用 CDN 编译 React 组件。 [重要更新]自 Laravel 版本 6.x 以来，用于告诉 Laravel 您将使用 React 的命令为 php artisan ui react。

因此，我将在以下步骤中尝试解释如何正确地使用 Laravel 和 React。

1. 准备 Laravel 使用 React

对于 Laravel 5.x，您只需使用命令 php artisan preset react，对于 laravel 6.x 及以上版本，命令为 php artisan ui react，然后运行npm install，该命令将安装所需的所有依赖项。

您已完成此步骤。

2. 创建您的第一个 React 组件

首先解释一下

对于此步骤，您应该查看文件webpack.mix.js，这是一个重要的文件，因为在此处您将告诉 Laravel Mix 需要编译哪些文件。如果您从未打开过此文件，则会看到以下内容：

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

这意味着Laravel Mix将搜索文件resources/js/app.js并将其编译到文件夹public/js中。 它也会对sass文件进行同样的操作。

现在创建你的React组件

如果您希望Laravel Mix编译您的自定义组件，您需要创建一个带有react和/或reactdom的文件，并将其保存到某个文件夹中（例如：resources/js/mycomponent.js）

import React from 'react';
import ReactDOM from 'react-dom';

// ...your react code

注意：不要忘记使用ReactDOM渲染您的组件

ReactDOM.render(<Mycomponent/>, document.getElementById('div-id'))

然后您需要告诉 Laravel Mix 您的新文件已存在并需要进行编译，将以下行添加到文件 webpack.mix.js 中：

mix.react('resources/js/app.js', 'public/js')
   .react('resources/js/mycomponent.js', 'public/js') // here your new react component
   .sass('resources/sass/app.scss', 'public/css');

现在，它将会把你的文件编译到文件夹 public/js/mycomponent.js 中。

最后，运行 Laravel Mix，只需运行命令 npm run dev，如果你想在每次更改时重新编译组件，需要运行 npm run watch，这将在每次保存文件时编译你的组件。

希望这能帮到你。

- lerichard_v