在laravel中使用React好像有點那啥,但是這樣可以學(xué)到React的知識也能學(xué)到Laravel的知識何樂而不為?因為自己之前在大二寒假時候?qū)W習(xí)過React距離現(xiàn)在都不知過了多久了,也一直沒用過,現(xiàn)在都望光了估計,那么現(xiàn)在來重新計劃一下吧.
當(dāng)我安裝完之后,發(fā)現(xiàn)整個項目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.網(wǎng)上說這個命令是修改前端預(yù)置,但我也不太了解
//安裝好,控制臺提示安裝成功
React scaffolding installed successfully.
Please run "npm install && npm run dev" to compile your fresh scaffolding.
4.npm安裝
此過程約10分鐘左右(我的網(wǎng)絡(luò)太差了可能)
npm install
到這一步嘗試執(zhí)行一下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
那么根據(jù)提示還需要安裝其它依賴:npm install resolve-url-loader@^5.0.0 –save-dev –legacy-peer-deps
安裝完成再次npm run dev,成功運行!
5.修改
5-1.resource目錄改成這樣內(nèi)容睬罗，該刪除的刪除
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
//添加.這里主要是為了免得到時候用到路由等等和后端交互的操作時候,發(fā)生沒有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已經(jīng)安裝并能夠編譯使用,使用php artisan serve并瀏覽頁面無錯誤;這里推薦使用npm run watch然后再使用php artisan serve;這樣你修改代碼后,你能在瀏覽器看到新的修改結(jié)果.
本文來源:Laravel中使用React的方法,來這里參考,這也是我的站點,拜托點點廣告謝謝了!
