Trong video màn hình ghép nối này, Sarah Drasner tham gia cùng tôi và hướng dẫn tôi một số kiến thức đầu tiên về React. Chúng tôi giải quyết một số chức năng kiểu “thế giới thực”: biểu mẫu nhận xét.
Điều này hóa ra là một giao diện người dùng khá hữu ích để làm việc, vì nó đòi hỏi nhiều thứ khá cơ bản đối với React (hoặc ít nhất, đối với tôi, nó có vẻ như vậy). Ví dụ: một “Ứng dụng” chính xử lý state
(điều “trạng thái” lớn của chúng tôi là chính các nhận xét) và các thành phần xử lý việc hiển thị chế độ xem (ví dụ: biểu mẫu nhận xét là một thành phần và mỗi nhận xét là một thành phần).
Sau đó, chúng tôi tìm hiểu rất nhiều thứ nhỏ hơn về React, nhưng cũng có những thứ rất lớn cần hiểu trong React-land, như:
props
- một cách để truyền dữ liệu giữa các thành phần. Chúng trông giống như các thuộc tính HTML khi bạn gửi chúng và đến dưới dạng một đối tượng ở dạng this.props.refs
- cách bạn lấy dữ liệu ra khỏi phần tử biểu mẫu mà chúng tôi đã tạo.keys
- một cách để xác định duy nhất một thành phần khi nó được lặp lại. Chúng tôi đang lặp lại các nhận xét ở đây (có thể có nhiều nhận xét), vì vậy nếu chúng tôi có chức năng có thể thay đổi bất kỳ nhận xét nào trong số đó, thì việc có một chìa khóa chính là điều làm cho React hiệu quả (nó chỉ có thể thay thế nhận xét duy nhất đó thay vì tất cả chúng) .
Thêm một tấn nữa!
Đây là bản demo chúng tôi đã làm việc:
Xem Cây bút Bắt đầu một Biểu mẫu Nhận xét được hỗ trợ bởi React của Chris Coyier (@chriscoyier) trên CodePen.
Làm thế nào để bạn nâng cao trình độ học React của mình ngoài điều này? Bắt đầu ở đây.