我如何为我的 Laravel 项目添加react？

IT技术 reactjs laravel
2021-05-26 03:36:41

这是一个简单的问题。但我从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它时（添加标题）。我安装后还需要包括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，但React.createElement在createElement部分phpStorm说unresolved function or method

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混合编译您的自定义组件，你必须建立一个档案，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保存文件时都会编译您的组件。

我希望这会有所帮助。

其它你可能感兴趣的问题
上一篇语义 UI 图像属性不适用于语义 UI react 下一篇调用 firestore collection() 不适用于世博会