Tạo ứng dụng Reactjs lấy dữ liệu từ Rest API

Bài viết được sự cho phép của tác giả Mai Đông Giang

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`

import React, { Component } from 'react';

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

class App extends Component {

  constructor() {
      super();

      this.state = {
          users: []
      }
  }

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

  renderUsers = () => {
      let users = this.state.users.map((data, index) =>
          <tr key={data.id}>
            <td>{data.id}</td>
            <td>{data.name}</td>
            <td>{data.email}</td>
            <td>{data.website}</td>
          </tr>
      );

      return users;
  }

  render() {
    return (
      <div className="App">
        <div className="container">
          <h1 className="text-center">Users List</h1>

          <table className="table">
            <thead>
              <tr>
                <th>#</th>
                <th>Name</th>
                <th>Email</th>
                <th>Website</th>
              </tr>
            </thead>
            <tbody>
              {this.renderUsers()}
            </tbody>
          </table>

        </div>
      </div>
    );
  }
}

export default App;