Ứng dụng ToDo với ReactJS và FeathersJS

Tram Ho

Bài viết này chia sẻ cách mình tạo một ứng dụng ToDo đơn giản với FeathersJS ở phía server và ReactJs ở Client. Mình sẽ đi vào một số phần chính là cách cài đặt, và sử dụng FeathersJS client với ReactJS như thế nào mà thôi, nên bài viết sẽ bỏ qua khá nhiều phần như xác thực dữ liệu, hiệu ứng, …

Cài đặt

Tạo thư mục cho dư án:

Tạo service Tasks:

Sửa file src/models/tasks.model.js:

github

Vậy là xong server rồi đấy 😃

Tiếp theo với Client, trong todo folder:

cài đặt Feathers:

github

Xong phần cài đặt để có thể sử dụng Feathers trên client, giờ mình có thể bắt tay vào code React rồi ✌️

Giao diện mẫu

Viết Code

Cài đặt thêm một số thư viện:

  • react-router-dom
  • material-ui
  • moment

Đăng nhập và đăng ký

Đăng ký:

github

Đoạn code bên dưới để xử lý phần đăng nhập:

github

Đăng nhập khi đã có accessToken trong localStorage:

github

Tổng hợp lại thành cái sơ đồ cho mọi người xem:

Tasks

Lấy toàn bộ task:

Đoạn code [task, user._id] này nghĩa là khi task thay đổi thì mình sẽ load lại toàn bộ danh sách task, mình sử dụng cách này để lấy lại danh sách task khi thêm, và sửa trạng thái task.

Thêm task mới:

Thay đổi trạng thái:

github

Kết quả

Repo github: https://github.com/hungkieu/Feathers-React-Todo-App

Mình tóm tắt bài viết với các ý chính như sau:

  1. Sử dụng Feathers Client với ReactJS.
  2. Xác thực người dùng.
  3. Thêm, sửa, xóa.

Cảm ơn vì đã đọc bài viết của mình 🙇

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo