Laravel中使用React的方法,来这里参考

 RorinL     2022年07月11日 星期一 21:29:24     React      laravel   laravel-mix   React    

在laravel中使用React好像有点那啥,但是这样可以学到React的知识也能学到Laravel的知识何乐而不为?因为自己之前在大二寒假时候学习过React距离现在都不知过了多久了,也一直没用过,现在都望光了估计,那么现在来重新计划一下吧.

当我安装完之后,发现整个项目100多M!!!不过也正常似乎,因为有node_models的存在😀

1.你安装了一个Laravel项目,我安装的是Laravel8

2.安装laravel/ui

composer require laravel/ui --dev

此处参考了:请问 Laravel 7 是不是移除了 artisan preset 命令?

https://learnku.com/laravel/t/41790

3.php artisan ui react

php artisan ui vue也是安装vue的方法;这里是安装reactjs.网上说这个命令是修改前端预置,但我也不太了解

//安装好,控制台提示安装成功
React scaffolding installed successfully.
Please run "npm install && npm run dev" to compile your fresh scaffolding.

4.npm安装

此过程约10分钟左右(我的网络太差了可能)

npm install

到这一步尝试执行一下npm run dev,如果显示如下错误:

> npm run development


> @ development F:\project\xxx
> mix

        Additional dependencies must be installed. This will only take a moment.

        Running: npm install resolve-url-loader@^5.0.0 --save-dev --legacy-peer-deps

        Finished. Please run Mix again.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ development: `mix`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     E:\xxx\node_cache\_logs\2022-07-10T15_33_39_792Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ dev: `npm run development`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     E:\xxx\node_cache\_logs\2022-07-10T15_33_39_960Z-debug.log

那么根据提示还需要安装其它依赖:npm install resolve-url-loader@^5.0.0 –save-dev –legacy-peer-deps

安装完成再次npm run dev,成功运行!

> @ dev F:\project\xxx
> npm run development


> @ development F:\project\minimalist_wallpaper
> mix
● Mix █████████████████████████ done (99%) plugins
 BuildCallbackPlugin
● Mix █████████████████████████ done (99%) plugins
 WebpackBar:done
√ Mix
  Compiled successfully in 26.06s

   Laravel Mix v6.0.49

✔ Compiled Successfully in 25768ms

5.修改

5-1.resource目录改成这样内容,该删除的删除

5-2.app.js&Master.js

require('./bootstrap');

import React from 'react';
import { render } from 'react-dom';
//app.js
//引入组件
import Master from './components/Master';

render(
<div>
    app主页
    组件masteras555
    <Master></Master>
</div>,document.getElementById('app'));

//Master.js
import React, {Component} from 'react';


class Master extends Component {
  render(){
    return (
        <p>Master Component123</p>
    )
  }
}
export default Master;

5-3.bootstrap.js

//添加.这里主要是为了免得到时候用到路由等等和后端交互的操作时候,发生没有csrf-token的错误
let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}

因此你还需要打开resourse/views/welcome.blade.php,修改为这样

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel</title>
        <link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <script>
            window.Laravel = <?php echo json_encode([
                'csrfToken' => csrf_token(),
            ]); ?>
        </script>
    </head>
    <body>
        <div id="app"></div>
        <script src="{{asset('js/app.js')}}" ></script>
    </body>
</html>

至此,React已经安装并能够编译使用,使用php artisan serve并浏览页面无错误;这里推荐使用npm run watch然后再使用php artisan serve;这样你修改代码后,你能在浏览器看到新的修改结果.


暂无评论

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

CAPTCHAis initialing...