reactjs - 我如何将 react 添加到我的 laravel 项目？

Question

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

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

它不起作用(应将带有 hello world 的 header 添加到 dom 中)。但是当我添加 react cdn 时它起作用了(添加了 header )。在 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

另外我在教程中看到在js文件夹中添加了一个用react编写的示例文件，在我的外壳中没有这样的文件。

当我在单独的文件中编写脚本时，phpStorm 检测到 React，但是对于 React.createElement createElement 部分 phpStorm 说 unresolved 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 创建一个文件并将其保存到某个文件夹(例如:资源/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 ，这将在您每次保存文件时编译您的组件。

希望对您有所帮助。