Tạo bởi Trần Văn Điêp|
ReactJS

[Share Code] Quản lý sinh viên - Lập trình ReactJS

Trong thời đại công nghệ 4.0, ReactJS đang là một trong những thư viện JavaScript mạnh mẽ và phổ biến nhất dùng để xây dựng giao diện người dùng (UI). Với khả năng tái sử dụng component, tốc độ xử lý nhanh, và cộng đồng phát triển lớn, ReactJS đã trở thành lựa chọn hàng đầu cho các lập trình viên front-end trên toàn thế giới.

Một trong những bài tập cơ bản nhưng vô cùng hữu ích để luyện tập ReactJS là xây dựng ứng dụng quản lý sinh viên. Bài tập này không chỉ giúp bạn hiểu rõ cách hoạt động của các hook như useState, useEffect, mà còn giúp bạn nắm vững cách truyền dữ liệu giữa các component, xử lý sự kiện, và render danh sách dữ liệu động.

Trong bài viết này, chúng ta sẽ cùng nhau tìm hiểu chi tiết cách tạo một ứng dụng quản lý sinh viên trong ReactJS, từ khâu khởi tạo dự án, tổ chức file, đến việc hiển thị, thêm, xóa và cập nhật danh sách sinh viên. Bên cạnh đó, bài viết sẽ cung cấp các ví dụ thực tế, lời khuyên hữu ích giúp bạn hiểu sâu hơn về cách quản lý state trong ReactJS – nền tảng quan trọng trong mọi ứng dụng web hiện đại.

Cấu trúc dự án ReactJS quản lý sinh viên

Khi bắt đầu với ReactJS, việc tổ chức cấu trúc dự án hợp lý là điều vô cùng quan trọng. Nó giúp mã nguồn dễ đọc, dễ bảo trì, và dễ mở rộng trong tương lai.

Dự án Quản lý sinh viên được khởi tạo bằng lệnh:

npx create-react-app student-management

Sau khi cài đặt hoàn tất, bạn sẽ có cấu trúc thư mục cơ bản như sau:

student-management/
│
├── src/
│   ├── App.js
│   ├── App.css
│   ├── index.js
│   ├── index.css
│   ├── reportWebVitals.js
│   ├── logo.svg
│   └── setupTests.js
│
├── public/
├── package.json
└── node_modules/

Mỗi tệp trong dự án có vai trò cụ thể:

  • App.js: Chứa component chính của ứng dụng, nơi quản lý danh sách sinh viên.

  • App.css: Định dạng giao diện và bố cục.

  • index.js: Là điểm khởi đầu, render component App vào DOM.

  • reportWebVitals.js: Dùng để đo hiệu suất ứng dụng.

  • setupTests.js: Cấu hình cho việc test.

Khởi tạo giao diện quản lý sinh viên

Để bắt đầu, chúng ta sử dụng Bootstrap giúp tạo giao diện nhanh và chuyên nghiệp hơn.
Cài đặt Bootstrap trong ReactJS bằng lệnh sau:

npm install bootstrap

Sau đó import vào index.js:

import "bootstrap/dist/css/bootstrap.css";
import "bootstrap/dist/js/bootstrap.bundle.js";

Tiếp theo, trong App.js, ta sẽ xây dựng phần khung giao diện:

<div className="container">
  <div className="card">
    <div className="card-heading bg-info text-white p-3">
      Student Management
    </div>
    <div className="card-body">
      <table className="table table-bordered">
        <thead>
          <tr>
            <th>No</th>
            <th>Full Name</th>
            <th>Age</th>
            <th>Address</th>
            <th>Email</th>
            <th style={{ width: "160px" }}>Action</th>
          </tr>
        </thead>
        <tbody>{/* danh sách sinh viên sẽ được render ở đây */}</tbody>
      </table>
    </div>
  </div>
</div>

Giao diện này sử dụng các class của Bootstrap để hiển thị bảng dữ liệu sinh viên gọn gàng và dễ nhìn.

Sử dụng useState trong ReactJS để quản lý danh sách sinh viên

Hook useState là một trong những công cụ mạnh mẽ nhất trong ReactJS. Nó cho phép chúng ta tạo và quản lý các biến trạng thái (state) trong functional component.

Trong ví dụ này, ta tạo một state studentList để lưu danh sách sinh viên:

const [studentList, setStudentList] = useState([]);

Khi ứng dụng khởi chạy, chúng ta sẽ khởi tạo dữ liệu mẫu cho danh sách sinh viên bằng useEffect:

useEffect(() => {
  let stdList = [];
  for (let i = 0; i < 10; i++) {
    stdList.push({
      fullname: "TRAN VAN " + i,
      age: 20 + i,
      address: "Ha Noi",
      email: "tranvan" + i + "@gmail.com"
    });
  }
  setStudentList([...stdList]);
}, []);

Ở đây, useEffect() sẽ chỉ chạy một lần khi component được mount, tương tự như hàm componentDidMount() trong class component.

Hiển thị danh sách sinh viên ra giao diện

Sau khi có danh sách sinh viên trong state, ta có thể hiển thị chúng trong bảng bằng cách dùng hàm map():

<tbody>
  {studentList.map((std, index) => (
    <tr key={index}>
      <td>{index + 1}</td>
      <td>{std.fullname}</td>
      <td>{std.age}</td>
      <td>{std.address}</td>
      <td>{std.email}</td>
      <td>
        <button className="btn btn-warning">Edit</button>
        <button
          className="btn btn-danger ms-2"
          onClick={() => removeStudent(index)}
        >
          Remove
        </button>
      </td>
    </tr>
  ))}
</tbody>

Phương thức map() cho phép ta lặp qua từng phần tử trong mảng studentList và render ra từng hàng (<tr>) trong bảng.

Xóa sinh viên khỏi danh sách

Để xóa sinh viên, ta viết một hàm removeStudent(index) như sau:

function removeStudent(index) {
  studentList.splice(index, 1);
  setStudentList([...studentList]);
}

Ở đây:

  • splice() giúp loại bỏ phần tử tại vị trí index.

  • Sau đó, setStudentList([...studentList]) được gọi để cập nhật lại state, giúp giao diện render lại danh sách mới.

💡 Lưu ý quan trọng:
Không nên cập nhật trực tiếp state mà không tạo bản sao (copy). Việc dùng cú pháp [...studentList] giúp React nhận ra có sự thay đổi và render lại UI.

Tối ưu useEffect và kiểm tra sự thay đổi

ReactJS cho phép ta sử dụng nhiều useEffect trong cùng một component. Ví dụ, ta có thể tạo thêm một hiệu ứng để log khi studentList thay đổi:

useEffect(() => {
  console.log('Danh sách sinh viên đã thay đổi:', studentList);
}, [studentList]);

Điều này rất hữu ích khi debug hoặc khi muốn thực hiện hành động phụ (side effect) mỗi khi dữ liệu thay đổi, chẳng hạn như lưu dữ liệu vào localStorage.

Cải thiện trải nghiệm người dùng với Bootstrap

Để ứng dụng trông chuyên nghiệp hơn, bạn có thể thêm các class của Bootstrap như:

  • bg-info: Tạo tiêu đề màu xanh nhạt.

  • btn-warning: Nút sửa màu vàng.

  • btn-danger: Nút xóa màu đỏ.

  • ms-2: Thêm khoảng cách bên trái giữa các nút.

Giao diện tổng thể trở nên trực quan, dễ thao tác, giúp người dùng dễ dàng quản lý danh sách sinh viên.

Thêm chức năng chỉnh sửa sinh viên

Bước tiếp theo, bạn có thể mở rộng ứng dụng bằng cách thêm form chỉnh sửa khi nhấn nút “Edit”.

Cách tiếp cận:

  1. Tạo thêm một state editingIndex để xác định sinh viên nào đang được chỉnh sửa.

  2. Hiển thị form nhập liệu (input) để thay đổi thông tin.

  3. Khi nhấn “Save”, cập nhật lại dữ liệu trong studentList.

Ví dụ ý tưởng:

const [editingIndex, setEditingIndex] = useState(null);

function editStudent(index) {
  setEditingIndex(index);
}

Sau đó hiển thị conditionally:

{editingIndex === index ? (
  <input
    value={std.fullname}
    onChange={(e) => updateName(index, e.target.value)}
  />
) : (
  std.fullname
)}

Một số lỗi thường gặp khi lập trình ReactJS

  1. Không dùng key khi render danh sách:
    → Dẫn đến lỗi cảnh báo trong console.
    ✅ Cách khắc phục: thêm thuộc tính key={index} vào phần tử <tr>.

  2. Cập nhật state trực tiếp:
    → React không nhận ra sự thay đổi, UI không cập nhật.
    ✅ Cách khắc phục: Luôn dùng setState([...state]) hoặc tạo bản sao.

  3. Không dùng dependency đúng trong useEffect:
    → Gây render lặp vô hạn hoặc bỏ sót cập nhật.
    ✅ Cách khắc phục: Luôn xác định chính xác mảng phụ thuộc trong useEffect.

Lời khuyên khi học ReactJS qua dự án quản lý sinh viên

  • Hiểu rõ cách React hoạt động: React chỉ render lại component khi state hoặc props thay đổi.

  • Bắt đầu từ ví dụ đơn giản: Xây dựng từng phần nhỏ, test thường xuyên.

  • Tận dụng console.log: Đây là công cụ tuyệt vời để theo dõi logic chương trình.

  • Thử thêm tính năng: Sau khi hoàn thành cơ bản, bạn có thể thêm chức năng thêm mới, sửa, tìm kiếm sinh viên.

Học ReactJS hiệu quả không chỉ là hiểu cú pháp, mà còn là rèn luyện tư duy component – chia nhỏ giao diện và quản lý dữ liệu hợp lý.

Kết luận

Qua bài hướng dẫn trên, bạn đã hiểu rõ cách xây dựng một ứng dụng quản lý sinh viên bằng ReactJS từ A đến Z. Từ việc khởi tạo dự án, sử dụng useState và useEffect, hiển thị danh sách sinh viên, đến việc thao tác xóa dữ liệu và mở rộng thêm tính năng chỉnh sửa.

Dự án này không chỉ giúp bạn hiểu sâu hơn về state management trong ReactJS, mà còn rèn luyện khả năng tư duy tổ chức code và logic xử lý trong ứng dụng web thực tế.

👉 Lời khuyên: Hãy tự thử mở rộng bài tập này – thêm form nhập sinh viên mới, thêm bộ lọc tìm kiếm, hoặc kết nối với API thật để dữ liệu sinh động hơn.

Với nền tảng vững chắc từ bài tập quản lý sinh viên này, bạn đã sẵn sàng tiến xa hơn trong con đường trở thành lập trình viên ReactJS chuyên nghiệp. 🚀

Phản hồi từ học viên

5

Tổng 0 đánh giá

Đăng nhập để làm bài kiểm tra

Chưa có kết quả nào trước đó