Trong việc phát triển ứng dụng hiện đại thì tần suất làm việc với RestAPI rất thường xuyên. Hôm nay, mình xin chia sẻ với các bạn cách tạo 1 ứng dụng Reactjs demo làm việc với dữ liệu được lấy từ API.

 

Tạo 1 dự án Reactjs

Việc đầu tiên chúng ta tạo 1 dự án mới. Bạn nào đang thao tác với các dự án cũ thì có thể bỏ qua bước này.
Mình dùng lệnh tạo dự án npx create-react-app react-getapi. Bạn nào thấy lạ thì có thể xem qua bài viết giới thiệu về `npm` của mình tại đây để hiểu thêm nhé.

Di chuyển vào thư mục dự án vừa tạo cd react-getapi

 

Cài đặt thư viện Bootstrap

Mình sẽ cài đặt gói thư viện này để trình bày giao diện cho đẹp và nhanh hơn.
Bạn chạy lệnh sau yarn add bootstrap

 

Tới bước Code nào

Chúng ta chỉ code nhỏ gọn trong file `src/App.js` luôn nhé. Vì ứng dụng có 1 chức năng đơn giản nên mình không chia ra nhiều cho phức tạp.

Đầu tiên ta import các thư viện cần dùng

import React, { Component } from 'react';

import 'bootstrap/dist/css/bootstrap.min.css';

Tạo một `class App` cho code được đẹp hơn 😀

class App extends Component {
    
}

export default App;

Khai báo 1 biến stage users cho App

constructor() {
    super();

    this.state = {
        users: []
    }
}

Tiếp đến là phần chính của bài hôm nay, chúng ta sẽ thực hiện việc get dữ liệu từ API ở function `componentDidMount`. Ở đây mình muốn sau khi App được load thì sẽ lấy dữ liệu để hiển thị ra danh sách.

Code như sau:

async componentDidMount() {
    await fetch('http://jsonplaceholder.typicode.com/users')
        .then(res => res.json())
        .then((data) => {
            this.setState({ users: data })
        })
        .catch(console.log)
}

`async` là gì? Vì chức năng sẽ được gọi đến server nên sẽ tốn 1 khoảng thời gian nhất định, chúng ta nên thực hiện chức năng này bất đồng độ để không ảnh hưởng đến toàn App. Đi đôi với `async` thì cần dùng `await` cho hàm `fetch`. Sau khi get dữ liệu thành công chúng ta sẽ set lại cho biến stage users.

Còn lại, phần dưới chỉ là hiển thị dữ liệu ra màn hình thôi nên mình nghĩ không cần giải thích gì hen. Nói nhiều quá lại loạn cả lên.hehe

Đây là toàn bộ nội dung file `src/App.js`

 

Test ứng dụng

Bây giờ chúng ta cùng chạy ứng dụng lên xem kết quả thế nào nhé.
Run yarn start

Kết quả của mình đây. Đừng quên chia sẻ kết quả của bạn và hỏi đáp mọi thắc mắc cho mình ở phần bình luận nhé.

 

Tóm lại

Trong bài chia sẻ này, mình đã hướng dẫn các bạn cách tạo 1 ứng dụng web bằng Reactjs với các chức năng lấy dữ liệu từ Rest API thông qua hàm `componentDidMount()`, cách đặt biến stage, parse data, hiển thị view.
Hi vọng sẽ giúp ích các bạn trên con đường chinh phục Framework này dễ dàng hơn.