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

RorlinL 06-30 124

前言：

今天兄弟们对“phpreactjs”都比较着重，同学们都需要学习一些“phpreactjs”的相关资讯。那么小编在网上搜集了一些关于“phpreactjs””的相关资讯，希望你们能喜欢，咱们一起来了解一下吧！

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

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

你安装了一个Laravel项目,我安装的是Laravel8安装laravel/ui

composer require laravel/ui --dev

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.

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 1

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

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

修改

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.jsimport 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: ;);}

因此你还需要打开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;这样你修改代码后,你能在浏览器看到新的修改结果.

本文地址：http://www.longkongtuishu.com/ca39fB2sAB1sPAA.html

标签： #phpreactjs