在這篇文章中，我想與大家分享如何在 PHP Laravel 框架中使用 react js 建置開發環境。在這個例子中，您可以學習如何為 laravel reactjs 應用程序構建設置。
安裝 Laravel
我們從頭開始，所以我們需要使用命令獲取新的 Laravel 版本應用程序，所以打開你的終端 OR 命令提示符並運行命令：
composer create-project --prefer-dist laravel/laravel blog數據庫配置
在第二步中，我們應該為 laravel 應用程序進行數據庫配置，例如數據庫名稱，用戶名，密碼等。所以，讓我們打開.env 文件並填寫所有細節，如下：
.env
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=here your database name(blog)
DB_USERNAME=here database username(root)
DB_PASSWORD=here database password(root)創建 Web 路由
routes/web.php
Route::get('/', function () {
return view('welcome');
});安裝 ReactJS 的配置
Laravel 預設為 vue 的配置，可使用切換 Preset 設置成 react 配置，此時你可以看到根目錄下的package.json node 的依賴文件，已改成 react 需要的相關套件與設定，並且在resources/js/components/目錄下，也改成了 react 範例文件。
php artisan preset react運行安裝 node 模組
npm install有一件事我們需要安裝一個依賴項，所以讓我們運行以下命令來安裝它。
npm install react-router
npm install react-router-dom創建 React 組件文件
resources/js/app.js
require(./bootstrap);
import React, { Component } from react;
import { Route } from react-router;
import { BrowserRouter, NavLink } from react-router-dom;
import ReactDOM from react-dom;
import Home from ./components/Home;
import Second from ./components/Second;
export default class App extends Component {
render() {
return (
<browserrouter>
<div>
<div>
<ul>
<li>
<navlink activeclassname="selected" exact="" to="/">
home
</navlink>
</li>
<li>
<navlink activeclassname="selected" to="/second">
second
</navlink>
</li>
</ul>
</div>
<route component="{Home}" exact="" path="/"></route>
<route component="{Second}" path="/second"></route>
<route component="{Third}" path="/third"></route>
</div>
</browserrouter>
);
}
}
if (document.getElementById(root)) {
ReactDOM.render(<app></app>, document.getElementById(root));
}resources/js/components/Home.js
import React, { Component } from react;
export default class Home extends Component {
render() {
return (
<div classname="container">
<div classname="row" justify-content-center="">
<div classname="col-md-8">
<div classname="card">
<div classname="card-body">Home</div>
</div>
</div>
</div>
</div>
);
}
}resources/js/components/Second.js
import React, { Component } from react;
export default class Second extends Component {
render() {
return (
<div classname="container">
<div classname="row" justify-content-center="">
<div classname="col-md-8">
<div classname="card">
<div classname="card-body">Second</div>
</div>
</div>
</div>
</div>
);
}
}創建 view blade 主文件
resources/views/welcome.blade.php
getLocale()) }}>
<meta charset="utf-8"></meta>
<meta content="width=device-width," initial-scale="1" name="viewport"></meta>
<meta content="{{" csrf_token="" name="csrf-token"></meta>
<title>Laravel</title>
<link href="{{mix('css/app.css')}}" rel="stylesheet" type="text/css"></link>
<div id="root"></div>
<script src="{{mix('js/manifest.js')}}"></script>
<script src="{{mix('js/vendor.js')}}"></script>
<script src="{{mix('js/app.js')}}"></script>
庫代碼分割
mix.js(src, output).extract(['any', 'vendor', 'library']);把所有的 JavaScript 都打包成一個文件會伴隨著潛在的風險：每次更新項目中就算很小的一部分都需要破壞所有用戶的緩存，這意味著你的第三方庫需要重新被下載和緩存。這樣很不好。
一個解決的辦法是分離或者提取你的庫文件(加入代碼割 npm run hot 模式不會有錯誤產生)
應用代碼: app.js
Vendor 庫: vendor.js
Manifest (webpack Runtime): manifest.js
詳細說明可連結至 Laravel 文件說明:文件切割
修改 webpack.mix.js 加入extract()
webpack.mix.js
const mix = require(laravel-mix);
mix.react(resources/js/app.js, public/js)
.extract()
.sass(resources/sass/app.scss, public/css);運行 Project
運行以下命令來響應 js compile
npm run dev
並啟動使用 Laravel PHP 內建的開發伺服器，運行以下命令
php artisan serve現在您可以在瀏覽器上打開以下 URL：
http://localhost:8000/您將看到如下螢幕截圖。
使用 HMR hot 模式
模塊熱替換(hot module replacement或 HMR)，它允許在運行時更新所有類型的模塊，而無需手動刷新你的網頁(修改專案內的程式碼，將自動更新網頁即時顯示)。
npm run hot
發布你的網頁
最後完成網頁，可使用以下指令，將會發布成產品模式產生壓縮最小的檔案
npm run prod現在你可以開始享受使用Laravel + react SPA實踐之開發環境開發你的專案。
參考網頁:
Laravel 5 – Simple CRUD Application Using ReactJS
Laravel 如何使用 React.js + HMR(Hot Module Replacement)