Lab. React và JSX

Mục đích

Phát triển mặt trước sử dụng thư viện React và ngôn ngữ JSX của Facebook.

Yêu cầu

Phát triển trang web có giao diện như sau:
Xem bài mẫu sử dụng React
Xem bài mẫu sử dụng React và JSX

Trang hiển thị danh sách các sản phẩm, mỗi sản phẩm có tên và mô tả, đồng thời có nút bấm cho phép người dùng chọn đánh dấu sản phẩm. Nếu sản phẩm được đánh dấu, vùng hiển thị sản phẩm sẽ được đổi nền thành màu vàng, nút bấm có nhãn "Remove bookmark". Nếu người dùng bỏ đánh dấu sản phẩm, vùng hiển thị sản phẩm sẽ được đổi nền thành màu trắng, nút bấm có nhãn "Set bookmark".

Phía trên danh sách sản phẩm có ô nhập văn bản. Khi người dùng nhập văn bản vào ô nhập này, trang web chỉ hiển thị các sản phẩm mà tên hay mô tả chứa văn bản cần tìm.

Hướng dẫn

1. Tạo thành phần Product hiển thị sản phẩm với tên và mô tả (xem ví dụ).
2. Thêm nút bấm, xử lý sự kiện cho thành phần, thay đổi thuộc tính state của thành phần để giao diện được cập nhật theo (xem ví dụ).
3. Sử dụng buộc dữ liệu một-chiều trên-xuống để khởi tạo trạng thái đánh dấu sản phẩm (xem ví dụ).
4. Bổ sung thành phần ProductList để tạo danh sách các sản phẩm (xem ví dụ).
5. Bổ sung thành phần SearchBar để tạo ô nhập văn bản tìm kiểm. Đồng thời bổ sung thành phần SearchableProductList để bao gói cả SearchBar và ProductList (xem ví dụ).
6. Sử dụng hàm gọi lại để chuyển xâu cần tìm từ SearchBar ngược lên SearchableProductList (xem ví dụ).
7. Sử dụng buộc dữ liệu một-chiều trên-xuống để chuyển xâu cần tìm từ SearchableProductList xuống ProductList (xem ví dụ).
8. Cập nhật ProductList để thực hiện tìm kiếm. Kết quả tìm kiếm sẽ quyết định thuộc tính display của Product (xem ví dụ).
9. Cập nhật Product để hiển thị hay không tùy vào giá trị thuộc tính display (xem ví dụ).
10. Sử dụng JSX (xem ví dụ).