Chủ đề hướng dẫn Laravel 8 ReactJS, chúng ta sẽ tìm hiểu hôm nay.

Hướng dẫn cơ bản về cách kết hợp Laravel 8 với ReactJS React Router 2021

2021-07-20 4341 lượt xem


Chủ đề hướng dẫn Laravel 8 ReactJS, chúng ta sẽ tìm hiểu hôm nay. Tại thời điểm viết bài là tháng 7 năm 2021. 
Nếu bạn là 1 nhà phát triển PHP hẳn bạn đã biết trend backend PHP là laravel, còn trend front end là react. Và nếu bạn muốn kết hợp react và laravel thì đó là 1 ý tưởng không thể tuyệt vời hơn.
Vì vậy, hướng dẫn này được tạo ra bởi vì từ hướng dẫn này, bạn sẽ làm những điều sau:

  • How to connect Laravel API to ReactJS
  • How to define Laravel and ReactJS Project structure.
  • How to use Laravel Mix to make ReactJS Scaffold.

yêu cầu

Bạn cần kiến thức laravel, có composer, nodejs, npm. và dĩ nhiên cần biết chút chút về react và laravel. 

Cài đặt laravel ui

Bạn hãy truy cập vào source code của project laravel 8. Chạy lệnh sau để cài react vào: 

# Đối với các dự án Laravel 7+:
composer require laravel/ui
php artisan ui react

Và sau đó chạy lệnh sau để cài node_modules :

npm install 

Sau đó trong ứng dụng react mà muốn viết code js dạng arrow function khi viết code js nên cần phải tạo 1 file .babelrc trong source code của project. Nội dung file sẽ như sau: 


{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    "plugins": [
        "@babel/plugin-proposal-class-properties"
    ]
}

Tạo wildcard route

Ở file web.php, mình sẽ viết như sau:

Route::get('{path?}', 'SinglePageController')->where('path', '[a-zA-Z0-9-/]+');

Đoạn này có nghĩa là với mọi path thuộc vào điều kiện where thì laravel sẽ cho chạy SinglePageController. mình để laravel chạy với mọi url để chạy react router dom - 1 thứ hay ho nhất của react.

Để tạo SinglePageController thì mình cần chạy lệnh sau: 

php artisan make:controller SinglePageController

Chúng ta sẽ sử dụng phương thức magic methods có tên là __invoke. Cái method này rất hay và hữu ích khi: "chúng ta sử đối tượng như một hàm"

cụ thể trong controller chúng ta thêm function kiểu như này: 

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class SinglePageController extends Controller
{
    public function __invoke()
    {
        return view('single-page-application');
    }
}


rùi, chúng ta có controller trong laravel trả về file view => cần tạo 1 file single-page-application.blade.php trong folder resources/view với nội dung như sau: 

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Laravel 8 & ReactJs - blog trương thanh hùng</title>
    <!-- Styles -->
    <link href="{{ asset('css/application.css') }}" rel="stylesheet">
</head>
<body>
<div id="application"></div>

<script src="{{ asset('js/application.js') }}"></script>
</body>
</html>

Viết code reactjs trong laravel

cài react router dom

Để viết code react trong laravel chúng ta sử dụng webpack.mix.js. Đầu tiên bạn đứng taị thư mục code laravel bạn sẽ thấy file webpack.mix.js lúc đấy ví dụ bạn cần thêm react router dom thì chỉ cần mở terminal tại thư mục đấy rồi gõ : 

npm i react-router-dom

Lúc đấy trong file package.json sẽ có dòng mới như sau : 

thêm react router dom vào 

Sửa file webpack.mix.js

Vào file webpack.mix.js sửa code thành như sau: 

mix.js('resources/js/application.js', 'public/js')
.react()
.sass('resources/sass/application.scss', 'public/css');

Khi đó bạn chạy npm run watch thì nó sẽ vừa lắng nghe vừa biên dịch ra trong folder public/jspublic/css file biên dịch cảu react qua js và scss qua css.

Thêm file application.js vào thư mục gốc resources/js

Bạn vào thư mục resources/js thêm file application.js để webpack.mix.js load lên và biên dịch được. Trong đó code file sẽ như sau: 

require('./app_react/index');

Khi đó bạn tạo 1 thư mục cùng cấp với file application.js cũng có tên  app_react. tạo thêm 1 file index.js trong thư mục vừa tạo với nội dung : 

import React from 'react'
import ReactDOM from 'react-dom'
import App from "./App"

if (typeof (Storage) !== 'undefined' && document.getElementById('react__root')) {

    ReactDOM.render(
            <App/>
    , document.getElementById('application'))
}else{
    alert("Trình duyệt của bạn đã cũ và không được hộ trợ. Mong bạn nâng cấp")
}

Tạo file App.js cùng cấp với nội dung như sau: 

import React from 'react'
import { BrowserRouter, Switch, Route } from "react-router-dom"

const HomePage = () => (
    <div>
        <h1>Đây là home page component</h1>
    </div>
)
const ProfilePage = () => (
    <div>
        <h1>Đây là profile component</h1>
    </div>
)
const AboutPage = () => (
    <div>
        <h1>Đây là page về chúng tôi nè</h1>
    </div>
)

function App( props ){

    return (
        <div className="AppComponent post" id="Application">
            <BrowserRouter basename={CONFIG.WEB.USER_POST}>
                
                <Switch>
                    <Route exact path="/" component={ HomePage } />
                    <Route path="/profile" component={ ProfilePage } />
                    <Route path="/about" component={ AboutPage } />
                </Switch>
            </BrowserRouter>
        </div>
    )
}

export default App

Run chương trình

Bạn chạy lệnh sau để run chương trình: 

npm run watch

Lúc này mỗi lần bạn thay đổi code thì code sẽ được build lại. Vậy là chúng ta đã tích hợp xong react vào website laravel rồi. Bạn chỉ cần chạy đúng vào router mà laravel có load view single-page-application.blade.php là nó sẽ chạy được react đã biên dịch ra folder public/js.

Nếu bạn chưa hiểu rõ lắm thì có thể tham khảo thêm ở bài viết này : 

Hướng dẫn cài đặt ReactJs trong project Laravel