在這篇文章中，我想與大家分享如何在 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
exact
activeClassName="selected"
to="/"
>
home
</NavLink>
</li>
<li>
<NavLink
activeClassName="selected"
to="/second"
>
second
</NavLink>
</li>
</ul>
</div>
<Route exact path="/" component={Home}></Route>
<Route path="/second" component={Second}></Route>
<Route path="/third" component={Third}></Route>
</div>
</BrowserRouter>
);
}
}
if (document.getElementById("root")) {
ReactDOM.render(<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
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Laravel</title>
<link href="/{{mix('css/app.css')}}" rel="stylesheet" type="text/css">
</head>
<body>
<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>
</body>
</html>庫代碼分割
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)
