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

Question

这是一个简单的问题。但我从laravel文档中尝试过。我跑了php artisan preset react然后npm install && npm run dev，现在我只想写一个简单的反应脚本

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

它不起作用（应该将带有 hello world 的标头添加到 dom 中）。但是当我添加它时react cdn它可以工作（添加标题）。安装后还需要包含cdnfor吗？或者我做错了什么。我在网上搜索了。但对我来说有点复杂。我无法理解。有人可以帮帮我吗？reactlaravel

这是我在 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，但对于phpStorm 所说的React.createElement部分createElementunresolved function or method

Answer 1

虽然这个问题是一个月前提出的，但我认为这个答案可以对某人有所帮助。

在 Laravel 中使用 React 的正确方法是使用Laravel Mix编译 React 组件。当您运行命令时php artisan preset react，Laravel Mix 配置为使用 React 本身来编译 React 组件，而不是使用CDN. [重要更新]自 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，这将在每次保存文件时编译您的组件。

我希望这能有所帮助。