Tài liệu lập trình front end reactjs lab 3

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ịị

LẬ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

LẬ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

LẬP TRÌNH FRONT-END FRAMEWORK 2 TRANG 3

Bài 2: Life cycle

SeasonDisplay.js Index.js

LẬ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

LẬP TRÌNH FRONT-END FRAMEWORK 2 TRANG 5

Bài 5: Trích xuất options thành config

LẬ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”

LẬ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