Tích hợp ReactJS vào Laravel

Hôm nay mình xin chia sẻ cho các bạn cách để tạo một project đơn giản kết hợp giữa Reactjs và Laravel.
Trước khi đi cụ thể vào từng bước để tạo một project thì máy tính của bạn phải đảm bảo đã được cài Php, Composer, Mysql, Nodejs.

Các bước cài đặt

Đầu tiên chúng ta cần tạo một project laravel bằng lệnh bên dưới

$ composer create-project laravel/laravel laravel-reactjs

Tiếp theo ta cài đặt reactjs vào dự án với các command bên dưới

$ composer require laravel/ui
$ php artisan ui react
$ npm install
$ npm run watch-poll

Sau khi đã tích hợp thành công Reactjs vào dự án Laravel, tiếp theo ta tiến hành config database trong file env như hình bên dưới

Tạo migration, model

Những bước thiết lập cơ bản đã được hoàn thiện, giờ chúng ta phải có database để có thể lưu trữ dữ liệu. Do nội dung bài viết có giới hạn nên mình chỉ làm chức năng thêm sửa xóa Category thôi nhé :). Để làm được điều này đầu tiên ta cần có một bảng categories

$ php artisan make:model Category -m

Trong model Category sẽ như sau:

Xong xuôi ta chạy migrate thôi :)

$ php artisan migrate

Tạo API

Như mình đã nói là tạo một project đơn giản, nên api cũng đơn giản thôi nhé, nếu các bạn muốn xịn sò hơn thì nghiên cứu thêm về authenticate cho api các thứ nữa nhé.

Sau routes thì ta sẽ tạo thêm controller nữa.

Tạo thêm một file service để xử lý logic cho nó chuyên nghiệp xíu nhé, còn phần request form các bạn nghiên cứu thêm ở đây nhé https://laravel.com/docs/8.x/validation#form-request-validation

Tạo wildcard route
Ở file web.php, mình sẽ viết như sau

Đoạn trên có nghĩa là cứ route nào khác api thì sẽ là route của React, còn không sẽ là api đó nhé

Giờ mình sẽ tạo file home.blade.php

Tạo các components

1.  App component
Bạn mở trong thư mục  resources/js/components sẽ thấy 1 file Example.js, hãy đổi file này thành App.js. Và bạn vào trong file resources/js/app.js, thay đoạn require('./components/Example') thành require('./components/App') nhé
Và đây sẽ là đoạn code trong file App.js của mình.

Giờ bạn chạy

$ php artisan serve
$ npm run watch-poll

Truy cập vào đường dẫn http://127.0.0.1:8000/ xem thử kết quả nhé, nếu bạn thấy chữ Pirago thì tức là đã thành công rồi đó.

Bước trên chỉ là test xem bạn đã kết hợp được giữa react với laravel hay chưa, nếu đã được rồi thì quay lại sửa trong file App.js như thế này nhé, đổi chữ Pirago ở trên thành

2. Thêm Category
-> form Edit cũng tương tự như Add thôi nhé, ta có thể dùng chung trên cùng một file cũng được, ở đây mình chỉ làm phần edit còn phần add các bạn tự nghiên cứu xem như là bài tập cho vững nhé.

3. Danh sách categories

Kết Luận

Vậy là chia sẻ của mình kết thúc rồi, mong rằng sẽ giúp cho các bạn phần nào. Vì mình cũng không có nhiều thời gian, nên cũng không làm được chỉnh chu, nếu có sai sót mong mọi người bỏ qua cho mình.