MỤC TIÊU:Kết thúc bài thực hành này bạn có khả năng✓ State.✓ Lifecycle.NỘI DUNGTạo project có tên là seasons với cấu trúc và yêu cầu như sauNội dung hiển thMỤC TIÊU:Kết thúc bài thực hành này bạn có khả năng✓ State.✓ Lifecycle.NỘI DUNGTạo project có tên là seasons với cấu trúc và yêu cầu như sauNội dung hiển thịị
Trang 1LẬP TRÌNH FRONT-END FRAMEWORK 2 TRANG 1
MỤC TIÊU:
Kết thúc bài thực hành này bạn có khả năng
✓ State
✓ Lifecycle
NỘI DUNG
Tạo project có tên là seasons với cấu trúc và yêu cầu như sau
Nội dung hiển thị
Yêu cầu
Nam bán cầu – mùa
hè
Bắc bán cầu – mùa đông
Trang 2LẬP TRÌNH FRONT-END FRAMEWORK 2 TRANG 2
Cấu trúc project
Bài 1: Lấy vị trí location dùng state
SeasonDisplay.js Index.js
Trang 3LẬP TRÌNH FRONT-END FRAMEWORK 2 TRANG 3
Bài 2: Life cycle
SeasonDisplay.js Index.js
Trang 4LẬP TRÌNH FRONT-END FRAMEWORK 2 TRANG 4
Bài 3: Chuyển state như props
SeasonDisplay.js Index.js
Bài 4: Xác định tháng (month) hiện hành
- Cách xác định thời tiết dựa vào tháng
- Bắc bán cầu
- Nam bán cầu
Trang 5LẬP TRÌNH FRONT-END FRAMEWORK 2 TRANG 5
Bài 5: Trích xuất options thành config
Trang 6LẬP TRÌNH FRONT-END FRAMEWORK 2 TRANG 6
Bài 6: Style
Bài 5: Tạo spinner
- Tạo spinner như mẫu
Gợi ý:
o Tạo spinner.js
o Thay điều kiện loading bằng spinner
o Dùng default props với mess là “Please accept location request”
Trang 7LẬP TRÌNH FRONT-END FRAMEWORK 2 TRANG 7
- Khắc phục render: tránh sử dụng điều kiện khi render
Gợi ý:
o Tạo function RenderContent()
o Khi render gọi RenderContent()
*** Yêu cầu nộp bài:
SV nén file (hoặc share thư mục google drive) bao gồm các yêu cầu đã thực hiện
trên, nộp LMS đúng thời gian quy định của giảng viên KHÔNG NỘP BÀI COI NHƯ KHÔNG CÓ ĐIỂM
- Hết -
Tránh dùng điều kiện khi render