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')
    )

它不起作用（应该向dom添加带有hello world的Header）。但是当我添加react cdn时，它可以工作（添加了标题）。我将cdn安装到react中后，还需要包括laravel吗？还是我做错了什么。我在网上搜索。但是对我来说有点复杂。我听不懂有人可以帮我吗？

这是我在laravel刀片中的所有代码：

@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的{{1}}部分，phpStorm会说createElement

Answer 1

尽管这个问题是一个月前提出的，但我认为这个答案可以帮助某人。

在Laravel中使用React的正确方法是使用Laravel Mix编译react组件。当您运行命令php artisan preset react时，Laravel Mix被配置为使用React本身而不是CDN来编译React组件。

因此，请尝试按以下步骤说明如何正确使用Laravel和React。

1。准备Laravel使用React

为此，您只需要使用命令php artisan preset 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）< / p>

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，这将在每次保存时编译您的组件一个文件。

我希望这会有所帮助。

我如何对laravel项目做出反应？

1 个答案: