0

Tích hợp React vào project PHP đã có sẵn

Hầu hết chúng làm app/web react thì thường là “dựng từ đầu” – from the scratch. Do đó việc thêm bớt chức năng, dữ liệu dễ dàng đồng bộ với nhau.

Vậy nếu chúng ta đã có một project PHP, ASP.NET, Spring,… hay một web project cổ điển (server render) thì làm sao tích hợp React vào? Câu trả lời là cũng dễ y như khi dựng từ đầu thôi.

“Chúng ta có thể chạy React nói riêng và ES6 nói chung mà không cần webpack. OK?!”
nhtua (webfaver.com)

Mục tiêu cần đạt được

  • Chạy được code React trên project sẵn có
  • Tối thiểu hóa thay đổi trên project sẵn có
  • Không thay đổi cấu trúc project sẵn có ngoài việc triển khai thêm API cho tính năng mới

Nạp thư viện cần thiết cho React vào template của bạn

Để dùng React, trước tiên cần nạp link thư viện theo kiểu cổ điển như nạp JQuery thôi.

Ngoài ra, React có sử dụng ES6 để viết component cũng như JSX cho nên ta cần nạp thêm babel vào như link thứ 3 bên trên.

Ba gói bên trên là 3 thư viện tối thiểu để có thể chạy 1 app React. Khi tao dựng site React, thường webpack tự động combine và nén tất cả các gói thư viện cần thiết liên qua từ node_modules (được quản lý thông qua NPM). Nhưng bây giờ bạn không dùng webpack để biên dịch, nên các bạn nên dùng bower để quản lý các packages này trên frontent thay vì tự download về từng cái.

Tạo React App của bạn

Tạo file js chứa app của bạn my-react.js .  Sau đó cũng nạp vào cùng template bên trên:

Các bạn có để ý thấy thẻ <script>  ở trên có type là “text/babel” không? đây là một kiểu mở rộng mà trình duyệt chỉ “hiểu” khi bạn nạp thư viện babel ở bên trên. Trình duyệt chạy babel, babel tìm thẻ script có type “text/babel”, tải script và transpile text đó thành javascript mà trình duyệt hiểu.

Dưới đây là ví dụ:

Sau khi my-react.js được babel dịch, code của chúng ta sẽ chạy ngay hàm cuối cùng để load data từ ajax và gọi hàm bindView để khởi động app React và render vào template của bạn tại vị trí “div#react-panel”.

Tạo API

Vì React giao tiếp qua Ajax nên chúng ta cần phải triển khai API cho my-react.js lấy dữ liệu. Phần này mình sẽ không hướng dẫn chi tiết, nhưng hãy cố gắng tạo ra những đường link api đẹp theo chuẩn RESTful nhé. Tìm hiểu cách tạo REST API cho project và thử với my-react.js là xong rồi. Chúc bạn thành công!

 

Tổng kết

Trong bài này, mình hướng dẫn một cách giải quyết nhanh để tích hợp React vào, có thể thấy được hoạt động ngay, tích hợp được vào mọi trang. Tuy nhiên, đây chỉ là cách thích hợp với những tính năng nhỏ xíu. Nếu bạn muốn làm nhiều tính năng hơn, mạnh hơn thì phải nghiên cứu thêm cũng như sử dụng webpack để đóng gói lại giúp giảm kích thước, tăng hiệu năng cũng nhưng tính tương thích trình duyệt tốt hơn. Mấu chốt ở đây là: “viết một app React và gắn nó vào template của project sẵn có thông qua DOM Selector và hàm `ReactDOM.render( <App/> , document.querySelector(selector))”. Bạn có thể viết bất cứ kiểu app react nào, quan trọng là app đó có thể bind vào bất cứ đâu trên HTML!

Hoàng Tựa

Yêu thích lập trình web và tạo ra những thứ đẹp đẽ.

Leave a Reply

Your email address will not be published. Required fields are marked *