Fetching Data from API trong ReactJS

Trong bài tập này, mình sẽ tạo một ứng dụng React đơn giản nhằm hiển thị danh sách người dùng từ một API công cộng như JSONPlaceholder. Bằng cách này, mình có thể thực hành việc gửi yêu cầu API và hiển thị dữ liệu trên giao diện người dùng.

Sử dụng fetch để gửi yêu cầu API trong ReactJS

Trước khi bắt đầu, đảm bảo rằng bạn đã cài đặt Node.js và npm. Tiếp theo, mình sẽ tạo một dự án React mới và cài đặt Axios để gửi yêu cầu API.

npx create-react-app fetch-api-example
cd fetch-api-example
npm install axios

Sau khi đã chuẩn bị môi trường làm việc, mình sẽ tiếp tục viết mã.

Tạo Component UserList

Đầu tiên, mình sẽ tạo một component để hiển thị danh sách người dùng. Tạo một file mới có tên là UserList.js trong thư mục src/components.

// src/components/UserList.js
import React, { useState, useEffect } from 'react';
import axios from 'axios';

const UserList = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    const fetchUsers = async () => {
      try {
        const response = await axios.get('https://jsonplaceholder.typicode.com/users');
        setUsers(response.data);
      } catch (error) {
        console.error('Error fetching users:', error);
      }
    };

    fetchUsers();
  }, []);

  return (
    <div>
      <h1>User List</h1>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default UserList;

Tạo Component App và Render UserList

Mình sẽ tạo một component App chứa UserList component và render nó trong file App.js.

// src/App.js
import React from 'react';
import UserList from './components/UserList';

function App() {
  return (
    <div className="App">
      <UserList />
    </div>
  );
}

export default App;

Chạy ứng dụng

Bây giờ mình đã sẵn sàng để chạy ứng dụng và kiểm tra kết quả. Mở terminal và chạy lệnh sau:

npm start

z5204162205160 45a7e83925d65bb8aeebdeb433637720 jpg

Kết bài

Trong bài tập này, mình đã tạo một ứng dụng React đơn giản để hiển thị danh sách người dùng từ một API công cộng. Mình đã sử dụng Axios để gửi yêu cầu API và hiển thị dữ liệu trên giao diện người dùng. Điều này là một bước quan trọng để làm quen với việc làm việc với dữ liệu từ API trong ứng dụng React.

test php

Bài giải

-------------------- ######## --------------------

Câu hỏi thường gặp liên quan:

Cùng chuyên mục:

Bài tập ReactJS: Conditional Rendering trong ReactJS

Bài tập ReactJS: Lists và Keys trong ReactJS

Bài tập ReactJS: Forms và Controlled Components trong ReactJS

Bài tập ReactJS: Handling Events trong ReactJS

Bài tập ReactJS: State và Lifecycle trong ReactJS

Bài tập ReactJS: Components và Props trong ReactJS

Thiết kế và quản lý form đơn giản với thư viện Formik

React Microservices, xây dựng ứng dụng React mạnh mẽ

Xây dựng ứng dụng CRUD với Redux Toolkit cực dễ dàng

Áp dụng Testing vào React cho ứng dụng của bạn như thế nào?

Performance Optimization trong React Js, tăng hiệu suất cực ngon

React Hook là gì? Tại sao React Hook quan trọng trong dự án?

Hiểu Route React nâng cao trong 10 phút bằng ví dụ

Xây dựng Hook trong React JS (React Custom Hook)

React Hooks là một tính năng mới trong React 16.8. Cho phép sử dụng state…

Tạo ứng dụng ghi chú với ReactJS và Redux

Trong bài viết này mình sẽ hướng dẫn xây dựng một ứng dụng ghi chú…

Cách đẩy ứng dụng ReactJS lên Heroku và Deploy trên đó

Cho bạn nào chưa bíết thì Heroku mà môt nền tảng đám mây hỗ trợ…

Tích hợp Redux vào ReactJS

Trong bài viết này chúng ta sẽ cùng nhau đi tìm hiểu về cách tích…

Tạo máy tính đơn giản bằng ReactJS

Trong bài này ta sẽ xây dựng một ứng dụng máy tính đơn giản bằng…

Redux là gì? Tại sao lại ứng dụng trong ReactJS

Trong bài viết này chúng ta sẽ cùng nhau đi tìm hiểu về Redux trong…

useContext trong React Hook

Trong bài viết này chúng ta sẽ cùnuseContextg nhau đi tìm hiểu về useContext trong…