Hướng dẫn pagination bootstrap react - phân trang bootstrap phản ứng
Bản thân tôi là một lập trình viên PHP. Trong lúc rảnh rỗi, tôi có nghiên cứu thêm về ReactJS. Nếu chỉ đọc tài liệu của ReactJS rồi viết lại thì tôi nghĩ đến 90% là tới tuần sau tôi sẽ lại quên hết sạch những gì mà hôm nay tôi đã đọc. Với tư duy của một lập trình viên đã có gần 4 năm làm việc với PHP, tôi tự nhủ, bây giờ mình thử áp dụng những bài toán mình hay gặp phải trong khi mình code với PHP, ốp sang làm bằng ReacJS xem sao. Rồi tớ nhớ tới bài toán phân trang dữ liệu, tức là, khi lập trình bạn luôn gặp phải tường hợp là khi bạn lấy dữ liệu từ một database, hay lấy dữ liệu từ API đổ về, thường là những dữ liệu đó sẽ có rất nhiều, số lượng lớn. Và đương nhiên, để hiển thị một lượng lớn dữ liệu như vậy, việc đầu tiên chúng ta nghĩ tới là sử phân trang (pagination) cho bộ dữ liệu chung ta thu được. Trong PHP, đặc biệt là với các framework như Laravel, Symfony, .. đều hỗ trợ sẵn cho chúng ta việc phân trang dữ liệu. Nhưng trong nhiều bài toán, hay với tùy yêu cầu của khách hàng, chúng ta không thể sử dụng phận trang mặc định của framework được. Lúc đó chúng ta cần phải custom lại pagination mặc định. Theo như kinh nghiệm làm việc của tôi, thì có tới 96.69% là chúng ta phải custom lại việc phân trang dữ liệu. Nếu bài toán nào mà cũng ăn sẵn được phân trang của framework thì công việc lập trình của chúng ta trở nên dễ dàng như ăn cháo. ^^. Đã có đủ lý do và chọn ra được đề bài cho mình, đến đây chúng ta sẽ đi vào thực hành chi tiết. Sau một hồi lang thang trên mạng tìm data. Vô tình bắt gặp một bài viết mà tôi vô cùng tâm đắc Custom paginate. Sau vài ngày đào sâu tìm hiểu. Nay tôi viết lại theo ý hiểu của mình trong bài viết này. Bạn có thể hình dung công việc của chúng ta cần làm như sau: Server Required Đầu tiên, chúng ta cần chuẩn bị những thứ sau để có thể code được ReactJs
Create Project Đầu tiền, hay sử dụng create-react-app để tạo mới một projects bằng câu lệnh sau:create-react-app để tạo mới một projects bằng câu lệnh sau:
Nếu bạn đang có npm >= 5.2 thì tạo mới project bằng câu lệnh:
Cài đặt Dependencies Tiếp theo, chúng ta sẽ cài đặt thêm một vài package cần thiết cho việc create app. Chạy câu lệnh sau:
Ở đây chúng ta cài node-sass-chokidar như một development dependency để cho phép chúng ta làm việc với SASS. Tiếp đến, hãy mở file package.json và sửa session scripts theo như sau:node-sass-chokidar như một development dependency để cho phép chúng ta làm việc với SASS. Tiếp đến, hãy mở file package.json và sửa session scripts theo như sau:
Ở bước trên, chúng ta đã cài đặt bootstrap vào project của mình rồi, để sử dụng được bootstrap, mở file src/index.js và thêm dòng sau vào đầu file
Tiếp theo, để hiện thị được cờ của các quốc gia như hình trên phần đầu bài mình đã đề cập tới, chúng ta cần phải dùng tới react-flags, module này đã được tự động tích hợp khi bạn tạo một project mới. Chúng ta chỉ cần gọi nó ra và dùng thôi:react-flags, module này đã được tự động tích hợp khi bạn tạo một project mới. Chúng ta chỉ cần gọi nó ra và dùng thôi:
Nếu bạn là người đang sử dụng máy win, thì câu lệnh sẽ là:
Tiếp theo, hãy tạo một thư mục components trong src của bạn, vì chúng ta là những lập trình viên chuyên nghiệp, do đó những file chúng ta viết thêm sẽ được viết tất cả vào thư mục này. Trong thư mục này chúng ta sẽ viếtcomponents trong src của bạn, vì chúng ta là những lập trình viên chuyên nghiệp, do đó những file chúng ta viết thêm sẽ được viết tất cả vào thư mục này. Trong thư mục này chúng ta sẽ viết
Đến đây thử test xem môi trường mà bạn vừa cài đặt có gặp bất kỳ lỗi nào hay không:
Nếu không có bất kỳ lỗi gì thì hãy truy cập vào http://localhost:3000/, kết quả thu được như sau: Như phân tích ở trên, công việc chính của chúng ta là thao tác với 2 compents. Sau đây, tôi sẽ nói về chi tiết từng component CountryCard Component Bước trước các bạn đã tạo thư mục src/components đúng không nào? tiếp theo hãy tạo file CountryCard.js và thêm vào đoạn code sau:CountryCard.js và thêm vào đoạn code sau:
CountryCard component required country lưu giữ thông tin của một nước mà chúng ta sẽ render. Các bạn có thể thấy cấu trúc bên trong thuộc tính propTypes của CountryCard bao gồm: component required country lưu giữ thông tin của một nước mà chúng ta sẽ render. Các bạn có thể thấy cấu trúc bên trong thuộc tính propTypes của CountryCard bao gồm:
Ví dụ về một objects của country như sau:
Lưu ý là ở đây chúng ta render country flags dựa vào react-flag Pagination Component Tiếp theo, hãy tạo file Pagination.js cùng thư mục với file CountryCard.js ở bên trên, và thêm đoạn code sau:Pagination.js cùng thư mục với file CountryCard.js ở bên trên, và thêm đoạn code sau: 0Component Pagination.js, có 4 đặc tính trong propTypes.
Ngoài ra chúng ta còn định nghĩa hai giá trị là LEFT_PAGE và RIGHT_PAGE, hai giá trị này giúp chúng ta xác định được khi nào current page đang ở trang đầu tiên và khi nào thì nó đang là trang cuối cùng.LEFT_PAGE và RIGHT_PAGE, hai giá trị này giúp chúng ta xác định được khi nào current page đang ở trang đầu tiên và khi nào thì nó đang là trang cuối cùng. The App Component Tiếp theo, hãy sửa lại filr App.js với dòng code:App.js với dòng code: 1 Thêm css cho giao diện bằng việc sửa file App.css với nội dung 2Đến đây, công việc của chúng ta đã hoàn tất. Các bạn có thể theo dõi code trên React-pagination. Chúc các bạn thành công. ^^ |