Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. React
Code

Xây dựng một ứng dụng React với Laravel: Phần 2, React

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Build a React App with Laravel Backend.
Build a React App With a Laravel RESTful Back End: Part 1, Laravel 5.5 API

Vietnamese (Tiếng Việt) translation by Thai An (you can also view the original English article)

Final product image
What You'll Be Creating

Đây là phần hai và cũng là phần cuối của loạt bài viết hướng dẫn xây dựng ứng dụng React với back end sử dụng Laravel. Phần đầu của loạt bài này, chúng ta đã tạo một RESTful API bằng Laravel cho ứng dụng liệt kê danh sách sản phẩm. Trong bài hướng dẫn, chúng ta sẽ phát triển phần front end sử dụng React.

Chúng ta cũng sẽ cân nhắc tất cả những chọn lựa khả dĩ để bổ khuyết giữa Laravel và React. Bạn không phải theo dõi trước phần một để hiểu bài hướng dẫn này. Nếu bạn ở đây để xem xét React và Laravel hoà hợp cùng nhau, thực tế bạn có thể bỏ qua phần đầu tiên. Bạn nên đến thẳng Github, clone repo về, và xem nội dung trọng điểm bên dưới để bắt đầu.

Tóm gọn các trọng điểm

Trong bài trước, chúng ta đã phát triển ứng dụng Laravel để phản hồi với các yêu cầu API. Chúng ta đã tạo các route, một controller, một model cho ứng dụng đơn giản: liệt kê sản phẩm. Trong khi nhiệm vụ của controller là trả lời cho các yêu cầu HTTP, thì view hoàn toàn bị bỏ qua.

Sau đó, chúng ta thảo luận các kỹ thuật cho xử lý exception và xác thực bằng Laravel. Cuối bài hướng dẫn, chúng ta đã hoàn tất Laravel back-end API. Giờ ta có thể dùng API này để xây dựng các ứng dụng cho web và các thiết bị di động.

Trong bài hướng dẫn này, chúng ta sẽ tập trung sang phần front-end. Nửa phần đầu nói đến cách thiết lập React trong môi trường của Laravel. Tôi cũng sẽ giới thiệu cho bạn về Laravel Mix (được hỗ trợ kể từ bản Laravel 5.4), nó là một API cho các tài nguyên biên dịch. Ở nửa phần còn lại của bài viết, chúng ta sẽ bắt đầu xây dựng ứng dụng từ ban đầu.

Thiết lập React trong Laravel

Laravel Mix được giới thiệu trong Laravel 5.4, và hiện là phương pháp lý tưởng để gắn kết React và Laravel. Với Laravel 5.5, toàn bộ quá trình được thực hiện dễ dàng hơn. Tôi mô tả về hai phương pháp bên dưới.

Sử dụng React Preset Command (Laravel 5.5)

Laravel 5.5 có tính năng mới cho phép bạn scaffold mã lệnh cho component của React bằng câu lệnh artisan preset react. Trong các phiên bản trước của Laravel, việc thiết lập React bên trong Laravel không dễ dàng. Nếu bạn đang dùng bản Laravel mới nhất, hãy chạy lênh bên dưới để bổ sung thư viện React vào dự án của bạn.

Mặc định thì Laravel có kèm theo thư viện Vue, và câu lệnh trên thay thế toàn bộ giá trị của Vue bằng React. Thật thú vị, nếu bạn không một thư viện, bạn có thể xoá chúng cùng lúc với câu lệnh php artisan preset none.

Nếu mọi thứ ổn, terminal sẽ hiển thị thế này.

Laravel Mix chạy ở background của Laravel, là một wrapper mượt mà cho webpack. Như bạn đã biết về Webpack, là một module bundler. Nó đảm trách tất cả phần module phụ thuộc, và tạo ra những tài nguyên tĩnh cho JavaScript và CSS. React cần có một module bundler, và webpack là chọn lựa hoàn hảo cho vị trí này. Vì vậy Laravel Mix là layer ở trên cùng cùa webpack và giúp Laravel làm việc với webpack dễ dàng hơn.

Hiểu rõ hơn cách Laravel Mix làm việc rất quan trọng nếu bạn cần thay đổi cấu hình của webpack sau này. Câu lệnh React preset không cho chúng ta biết cách mọi thứ vận hành ra sao ở dưới background. Vì vậy hãy xoá thư viện React và thay vào đó hãy truy nguyên lại các bước thao tác trước đó.

Phương pháp thủ công (Laravel 5.4)

Nếu bạn dùng Laravel 5.4, hoặc nếu bạn thắc mắc Laravel Mix sẽ được cấu hình thế nào, thì đây là các bước bạn cần làm theo:

Cài đặt react, react-dom, và babel-preset-react bằng npm. Sẽ tốt hơn nếu bạn cài đặt luôn yarn. Thực sự là Laravel và React thích yarn hơn npm.

Đến file webpack.mix.js nằm ở thư mục gốc của ứng dụng Laravel của bạn. Đây là file cấu hình để bạn khai báo cách biên dịch các thư viện của bạn. Thay thế dòng mix.js('resources/assets/js/app.js', 'public/js'); bằng mix.react('resources/assets/js/app.js', 'public/js');: app.js là điểm khởi chạy của các file JavaScript, và các file đã biên dịch sẽ nằm trong public/js. Chạy npm install trong terminal để cài đặt tất cả phần phụ thuộc.

Tiếp đó đi đến resources/assets/js. Đã có sẵn thư mục components và một vài file JavaScript. Các component React sẽ được đặt trong thư mục components. Xoá bỏ file Example.vue hiện có và tạo một file mới cho component React.

resources/assets/component/Main.js

Cập nhật app.js để xoá bỏ các code liên quan đến Vue và thay bằng cách component của React.

resources/assets/app.js

Giờ chúng ta chỉ cần thiết lập cho View có thể truy xuất cho các tài nguyên. Các file về view nằm trong thư mục resources/views. Bổ sung thẻ <script> vào welcome.blade.php, đây là trang hiển thị mặc định khi bạn duyệt localhost:8000/. Remove nội dung của file này và thay vào code bên dưới.

resources/views/welcome.blade.php

Sau cùng, chạy lệnh npm run dev hoặc yarn run dev để biên dịch các tài nguyên. Nếu bạn duyệt localhost:8000, bạn sẽ thấy:

Laravel and React running together
React nhúng bên trong view của Laravel.

Package.json có một mã kịch bản theo dõi để tự động biên dịch các tài nguyên khi có thay đổi bất kỳ xảy ra. Để kích hoạt chế độ này, chọn npm run watch.

Chúc mừng bạn đã cấu hình thành công React để hoạt động cùng Laravel. Giờ hãy tạo một số component cho React ở front-end.

Phát triển ứng dụng React

Nếu bạn mới biết đến React, bạn sẽ thấy phần còn lại có phần thử thách. Tôi đề xuất bạn hãy xem loạt bài React Crash Course for Beginners để quen thuộc hơn với các khái niêm của React. Hãy cùng bắt đầu nào!

Ứng dụng React được xây dựng dựa trên component. Component là cấu trúc quan trọng nhất của React, và chúng ta có một thư mục chỉ dành cho component.

Component cho phép bạn phân nhỏ UI thành những phần độc lập và có thể sử dụng lại, và hãy tách biệt mỗi phần đó với nhau. Về khái niệm, component giống với các hàm của JavaScript. Chúng nhận các input tuỳ ý (gọi là "props") và trả về những thành phần React mô tả phần hiển thị trên màn hình.
-- Tài liệu chính thức của React

Trong ứng dụng ta đang xây dựng, chúng ta sẽ bắt đầu với component cơ bản cho phép hiển thị các sản phẩm được trả về từ máy chủ. Hãy gọi nó là Main component. Ban đầu, component sẽ đảm trách những việc dưới đây:

  • Lấy tất cả sản phẩm từ API (GET /api/products).
  • Lưu dữ liệu sản phẩm trong state.
  • Hiển thị dữ liệu sản phẩm.

React không phải là một framework toàn diện, do đó bản thân thư viện này không có các tính năng Ajax. Tôi sẽ dùng fetch(), là một API JavaScript tiêu chuẩn để lấy dữ liệu từ máy chủ. Nhưng còn rất nhiều chọn lựa khác để gọi Ajax đến máy chủ.

resources/assets/js/component/Main.js

Chúng đã đang khởi tạo state của products vào một mảng rỗng trong constructor. Khi component đã hiển thị, chúng ta dùng fetch() để lấy sản phẩm từ /api/products và lưu nó vào state. Phương thức render (hiển thị) dùng để mô tả UI của component. Tất cả sản phẩm được hiển thị dưới dạng danh sách.

Screenshot of the React Application - List of all products

Trang này chỉ liệt kê các tên sản phẩm, khá tẻ nhạt. Hơn nữa, chúng ta không có các thành phần tương tác ở đó cả. Hãy làm tên sản phẩm có thể click vào được, và khi click vào sẽ có nhiều thông tin về sản phẩm đó.

Hiển thị thông tin sản phẩm

Đây là danh sách các thứ chúng ta cần thực hiện:

  • Một state để theo dõi sản phẩm được click. Gọi tên nó là currentProduct với giá trị ban đầu là null.
  • Khi tên sản phẩm được click vào, this.state.currentProduct được cập nhập.
  • Thông tin sản phẩm được quan tâm sẽ hiển thị bên phải. Trừ khi một sản phẩm được chọn, nếu không phần này sẽ hiển thị thông báo "No Product selected" (Chưa chọn sản phẩm).

resources/assets/js/component/Main.js

Chúng ta bổ sung createProduct vào state và khởi tạo với giá trị null. Dòng onClick={ () =>this.handleClick(product) } gọi phương thức handleClick() khi một sản phẩm được click. Hàm handleClick() cập nhật state của currentProduct.

Giờ để hiển thị dữ liệu sản phẩm, chúng ta có thể render nó bên trong Main component hoặc tạo một component mới. Như đã đề cập, việc phân tách UI thành các component nhỏ hơn là cách vận hành của React. Vì thế chúng ta sẽ tạo một component mới và gọi là Product.

Product component này nằm bên trong Main component. Main component sẽ truyền state của nó như một props. Product component nhận props này làm input và hiển thị các thông tin liên quan.

resources/assets/js/component/Main.js

resources/assets/js/component/Product.js

Ứng dụng sẽ trông giống thế này:

Screenshot of the React application with product details displayed

Thêm một sản phẩm mới

Chúng ta đã triển khai thành công phần front-end tương ứng để lấy và hiển thị tất cả sản phẩm. Tiếp theo, chúng ta cần một form để thêm sản phẩm mới vào danh sách. Quá trình tạo sản phẩm mới có thể hơi phức tạp hơn việc lấy dự liệu từ API.

Đây là điều kiện cần để phát triển tính năng này:

  • Một component dạng stateful (có trạng thái) dùng để hiển thị UI cho một form nhập liệu. State của component lưu giữ dữ liệu của form.
  • Khi submit, component thứ cấp truyền state này đến Main component bằng callback.
  • Main component có một phương thức, gọi là handleNewProduct(), xử lý phần logic để bắt đầu một yêu cầu POST. Dựa trên phản hồi nhận được, Main component cập nhật state của nó (cả this.state.productsthis.state.currentProduct).

Điều này không quá phức tạp phải không? Hãy thực hiện từng bước nào. Đầu tiên, tạo một component mới. Tôi sẽ gọi tên là AddProduct.

resources/assets/js/component/AddProduct.js

Component này cơ bản hiển thị một form nhập liệu, và tất cả giá trị nhập được lưu trong state (this.state.newProduct). Sau đó, khi nộp form, phương thức handleSubmit() được gọi. Nhưng AddProduct cần giao tiếp thông tin lại với cấp cao của nó, và chúng ta làm điều này qua một callback.

Main component, là cấp cao, sẽ truyền một tham chiếu hàm như props. Component con, AddProduct gọi props này để thông báo với cấp cao về trạng thái đã thay đổi. Cho nên dòng this.props.onAdd(this.state.newProduct); là một ví dụ của hàm callback dùng để thông báo cho component cấp cao của sản phẩm mới.

Giờ thì bên trong Main component, chúng ta sẽ khai báo <AddProduct />  như sau:

Trình xử lý sự kiện onAdd được nối tiếp với phương thức handleAddProduct() của component. Phương thức này chứa mã lệnh để gọi yêu cầu POST đến máy chủ. Nếu phản hồi báo tin rằng sản phẩm được tạo thành công, thì state của productscurrentProducts được cập nhật.

Đừng quên gán phương thức handleProduct vào class qua this.handleAddProduct = this.handleAddProduct.bind(this) trong constructor. Và đây là bản hoàn tất của ứng dụng.

Screenshot of the final version of the application

Tiếp theo là gì?

Ứng dụng chưa hoàn tất khi không có tính năng xoá và cập nhật. Nhưng nếu bạn đã thực hành sát theo bài hướng dẫn đến tận lúc này, bạn có thể hoàn tất phần còn thiếu mà không gặp rắc rối nào. Để bạn bắt đầu, tôi đã cung cấp cho bạn logic của trình xử lý sự kiện cho cả tình huống xoá và cập nhật.

Logic để xoá một sản phẩm

Logic để cập nhật một sản phẩm

Điều bạn cần tiếp theo là đào sâu, tự mình thực hành, và hoàn tất ứng dụng với logic phía trên. Tôi sẽ gợi ý cho bạn: nút xoá lý tưởng nên nằm trong component Product, trong khi đó tính năng cập nhật nên có một component riêng cho nó. Tôi khuyến khích bạn thực hiện thử thách này và hoàn tất các component còn thiếu.

Tóm tắt

Chúng ta đã trải qua một quá trình từ đầu đến giờ. Đầu tiên, ta tạo REST API bằng framework Laravel. Sau đó, chúng ta thảo luận các chọn lựa cho Laravel và React. Cuối cùng, chúng ta xây dựng một front-end cho Laravel bằng React.

Dù chúng ta chủ yếu tập trung vào việc tạo ra ứng dụng một trang bằng React, nhưng bạn có thể tạo các widget hoặc component để có thể đưa vào các thành phần cụ thể trong view của bạn. React rất linh hoạt vì nó là một thư viện tốt.

Trải qua vài năm, React đã trở nên phổ biến hơn. Sự thật thì chúng tôi đã có một số lượng sản phẩm trên thị trường để bán, xét duyệt, triển khai, và nhiều nữa. Nếu bạn đang tìm kiếm các tài nguyên bổ sung cho React, đừng do dự, hãy xem qua chúng.

Bạn từng trải nghiệm Laravel với React chưa? Bạn nghĩ gì? Hãy chia sẻ qua phần bình luận.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.