在這篇文章中,我想與大家分享如何在 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="/ucamc/{{mix('css/app.css')}}" rel="stylesheet" type="text/css">
</head>

<body>
    <div id="root"></div>
    <script src="/ucamc/{{mix('js/manifest.js')}}"></script>
    <script src="/ucamc/{{mix('js/vendor.js')}}"></script>
    <script src="/ucamc/{{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 npm run dev

並啟動使用 Laravel PHP 內建的開發伺服器,運行以下命令

php artisan serve

現在您可以在瀏覽器上打開以下 URL:

http://localhost:8000/

您將看到如下螢幕截圖。

demo view react Laravel

使用 HMR hot 模式

模塊熱替換(hot module replacement或 HMR),它允許在運行時更新所有類型的模塊,而無需手動刷新你的網頁(修改專案內的程式碼,將自動更新網頁即時顯示)。

npm run hot

Laravel npm run hot

Laravel使用HMR hot模式

發布你的網頁

最後完成網頁,可使用以下指令,將會發布成產品模式產生壓縮最小的檔案

npm run prod

現在你可以開始享受使用Laravel + react SPA實踐之開發環境開發你的專案。

參考網頁:
Laravel 5 - Simple CRUD Application Using ReactJS
Laravel 如何使用 React.js + HMR(Hot Module Replacement)

您也可能喜歡這些文章