gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 16:55:14 47 4
gpt4 key购买 nike

这是一个简单的问题。但我从 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

最佳答案

虽然这个问题是一个月前提出的,但我认为这个答案可以帮助到一些人。

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

希望对您有所帮助。

关于reactjs - 我如何将 react 添加到我的 laravel 项目?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56754482/

47 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com