FER202 - Phát triển web Front-End với React

FER202 - Phát triển web Front-End với React (Front-End web development with React) là môn học 3 tín chỉ của Đại học FPT, học sau WED201c, gồm 60 buổi trên lớp; 40 buổi mang nội dung mới, 20 buổi còn lại là giới thiệu và đánh giá assignment, buổi Lab 2, các buổi review Lab và hai progress test. Môn không dùng sách giáo trình: hai học liệu chính là bộ tài liệu Bootstrap 5.3 trên getbootstrap.com và mục Learn của react.dev, học liệu phụ là trang hướng dẫn khởi tạo dự án React của react.dev; công cụ gồm Visual Studio Code, Git với GitHub hoặc Bitbucket, Node.js và các công cụ AI Gemini, Grok, ChatGPT. Syllabus đánh số mục từ 1.1 đến 15.3 và gắn chín mã chuẩn đầu ra CLO1 đến CLO9. Theo thứ tự dạy: buổi 2-3 là toàn cảnh phát triển web full-stack, giới thiệu React 19, cài Git với các lệnh init, add, commit, kho mã trực tuyến trên GitHub, cài Node.js và npm; buổi 4-9 là cú pháp ES6 như arrow function và destructuring, sinh đoạn mã ES6 bằng công cụ AI, rồi JSX gồm render thẻ HTML, tự tạo phần tử JSX, biểu thức JavaScript trong JSX, fragment, kèm Lab 1 Install React + JSX Basics; buổi 12-18 là cấu hình dự án Bootstrap và React-Bootstrap, hệ lưới, navbar và nav, icon và font, nút bấm, biểu mẫu, bảng, các thành phần JavaScript tabs, pills, collapse, accordion, đối chiếu Bootstrap với React-Bootstrap, Lab 2; buổi 21-24 là component, props, state ban đầu và gộp state, event handler, synthetic event, event pooling, handler inline, Lab 3 Class vs Functional Components; buổi 27-29 là stateless component, container component, provider và consumer của context, render props, chuyển class component sang Hooks; buổi 30-33 là useState, useEffect cho khởi tạo và dọn dẹp, context Hooks, useReducer, Lab 4 Hooks & Events; buổi 37-41 là React Router với khai báo route, route parameter, tham số tuỳ chọn, liên kết, query parameter, rồi code splitting bằng React.lazy và Suspense, giả lập độ trễ, lazy page và route; buổi 42 và 45-48 là json-server làm nguồn dữ liệu và máy chủ tệp tĩnh, window.fetch, promise, async/await, Axios, kèm Lab 5 Routes & Lazy Loading ở buổi 42 và Lab 6 Fetching Data ở buổi 48; buổi 51-55 là Flux và Redux, cài đặt và cấu hình store, Redux Toolkit, combineReducers, middleware Redux Thunk và logger middleware. Mã CLO9 gắn với buổi 5, buổi 53 cùng các buổi assignment và review Lab; sáu bài Lab lần lượt là React setup và JSX, giao diện Bootstrap, component và event, Hooks, route và lazy loading, lấy dữ liệu.