React: Thử làm ứng dụng đổi tỷ giá “đam mê”? Tại sao không

Tram Ho

Ngày “Thần tài” nói chuyện “đam mê” 🤣 Nhưng mà mình không có “đam mê” thì mình nghịch ngợm tìm tòi “đam mê” vậy =))

Link app:
https://doitygia-react-app.herokuapp.com/

1. Init project

Đâu tiên, chúng ta sẽ khởi tạo một react-app nhé. Càng ngày thì chủ đề các bài viết của mình càng loãng rồi (buồn ghê) =))

Đừng quên add thêm thư viện node-sass để chạy file sass nha.

2. Crawl dữ liệu

Chúng ta sẽ crawl dữ liệu từ api: https://tygia.com/json.php?ran=0&gold=0&bank=VIETCOM&date=now
và lưu vào file rates.json.

Cấu trúc dữ liệu sẽ như vậy:

3. Viết hàm đổi $$$ =)) nào

Hàm đổi tỷ giá “đam mê” tryConvert(money, code, encode = true), sẽ đổi tiền vnd sang một ngoại tệ khác hoặc ngược lại.
Hàm nhận vào 3 tham số:

  • money: số tiền
  • code: currencyCode, là mã ngoại tệ
  • encode: Nếu encode = true, hàm đổi ngoại tệ ra vnd, ngược lại, hàm sẽ đổi vnd ra ngoại tệ. Mặc định là true

4. Xây dựng component CurrencyInput

Giờ thì mình sẽ xây dựng một component để nhập tiền ahihi

5. Xây dựng một component chung

Cuối cùng là tạo một component import tất cả nào. Ở đây mình sẽ tạo view gồm một select-box, để người dùng lựa chọn ngoại tệ muốn quy đổi và 2 CurrencyInput để nhập và quy đổi tiền ngoại tệ sang vnd và ngược lại.

Thành quả đơn giản vậy thôi. Bạn cũng có thể truy cập app ở đây nhé!

Chúc các bạn thành công và hẹn gặp lại bạn ở các bài viết tiếp theo!

Source code và tài liệu tham khảo:

Source

React Doc

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo