React Developer Tools
- Eden Duong
- Vincent Nguyen (Unlicensed)
Chúng ta sẽ cùng tìm hiểu về 1 công cụ kiểm tra(inspect) React rất hiệu quả. Đây là một chrome extension được cung cấp bởi Facebook, các bạn cài đặt ở đây.
Nếu như bạn đã từng code web html trên chrome bạn sẽ thấy chrome có 1 tính năng debug khá hay đó là inspect, giúp ta kiểm tra các element trong trang web.
Thì giờ đây chúng ta cũng có thể làm được như thế với React Extension này, sau khi cài vào chrome các bạn mở 1 bài react lên, bên góc phải trên sẽ xuất hiện icon React, sau đó ta vào phần inspect của chrome như bình thường, lúc này ở bên phải cùng sẽ xuất hiện thêm 1 tab tên Components ta click vào để xem các thành phần React cấu thành nên trang web này.
Nếu như chỉ xem ở phần Elements chúng ta sẽ chỉ thấy các thành phần HTML đã được render do đó sẽ khá khó khăn để kiểm tra, còn với tab Components chúng ta có thể xem được component nào được render ra, là cha hay con của component nào cùng với state, props event... Các bạn cài đặt rồi nghiên cứu thêm nha. Chúc các bạn học tốt.