在laravel中使用React好像有点那啥,但是这样可以学到React的知识也能学到Laravel的知识何乐而不为?因为自己之前在大二寒假时候学习过React距离现在都不知过了多久了,也一直没用过,现在都望光了估计,那么现在来重新计划一下吧.
当我安装完之后,发现整个项目100多M!!!不过也正常似乎,因为有node_models的存在
1.你安装了一个Laravel项目,我安装的是Laravel8
2.安装laravel/ui
composer require laravel/ui --devCopy
此处参考了:请问 Laravel 7 是不是移除了 artisan preset 命令？
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 ELIFECYCLEnpm ERR! errno 1npm ERR! @ development: `mix`npm ERR! Exit status 1npm 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.lognpm ERR! code ELIFECYCLEnpm ERR! errno 1npm ERR! @ dev: `npm run development`npm ERR! Exit status 1npm 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,成功运行!
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;这样你修改代码后,你能在浏览器看到新的修改结果.
本文来源:Laravel中使用React的方法,来这里参考,这也是我的站点,拜托点点广告谢谢了!
