FER202
Hệ thống thực hành và bài tập môn Lập trình Web Front-End với React. Danh sách dự án độc lập được cấu hình tích hợp tự động triển khai.
Danh sách bài thực hành
Slot 1: React Setup & Environment
Làm quen môi trường phát triển Front-End React 19, cấu hình bundler Vite và kiểm tra render ban đầu.
- Khởi tạo dự án với Vite và React 19
- Kiểm thử Hot Module Replacement (HMR)
- Cấu hình môi trường phát triển ban đầu
Exercise 2: React Props & Data Flow
Thực hành truyền dữ liệu component qua Props, phân tách component con và xử lý hiển thị giao diện.
- Component hóa giao diện người dùng
- Truyền Props giữa Component cha và con
- Quản lý dữ liệu người dùng và render
Slot 3: Intro Components & Assets
Tìm hiểu cấu trúc dự án React Vite, import hình ảnh tĩnh và xây dựng component About.
- Cấu trúc dự án Vite + React
- Import tĩnh ảnh từ thư mục assets
- Component About hiển thị thông tin
Lab 1: ProductInfo Card
Khởi tạo và làm quen với thư viện React-Bootstrap thông qua component ProductInfo hiển thị thẻ sản phẩm cơ bản.
- Cài đặt và cấu hình Bootstrap CSS
- Xây dựng Card sản phẩm mẫu
- Truyền dữ liệu tĩnh và render component
Lab 1 Ex2: Pizza Store
Ứng dụng danh sách Pizza tương tác với bố cục lưới chia cột responsive bằng Container, Row, Col và component thẻ món ăn.
- Component ProductList responsive
- Tách nguồn dữ liệu pizzaData.js
- Hiển thị nhãn tag, giá tiền, ảnh Pizza
- Tích hợp React-Bootstrap Card
Lab 2: ES6 & React Bootstrap
Chuyên đề bài tập ES6 hiện đại kết hợp React-Bootstrap: Template literals, Destructuring, Nullish Coalescing, Lưới sản phẩm responsive map/key.
- Bài 1: WelcomeCard viền đổi màu theo tuổi
- Bài 2: StudentCard destructuring sâu
- Bài 3: ProductCard an toàn dữ liệu (?., ??)
- Bài 4: Lưới sản phẩm Responsive 4 cột