Declarative
React giúp tạo các UI tương tác một cách dễ dàng. Thiết kế các khung nhìn đơn giản cho từng trạng thái trong ứng dụng của bạn, và React sẽ cập nhật và render đúng các thành phần phù hợp khi dữ liệu của bạn thay đổi.
Việc khai báo các khung nhìn tường minh sẽ khiến cho mã của bạn dễ sử dụng hơn và dễ dàng gỡ lỗi hơn.
Component-Based
Xây dựng các component và quản lý các trạng thái của riêng chúng, sau đó kết hợp chúng để tạo các UI phức tạp.
Vì component logic được viết bằng JavaScript thay vì các template, bạn có thể dễ dàng truyền dữ liệu đa dạng qua ứng dụng của mình và tránh thao tác với DOM.
Learn Once, Write Anywhere
Chúng tôi không đưa ra các giả định về phần kĩ năng công nghệ của bạn, vì vậy bạn có thể phát triển các tính năng mới trong React mà không cần viết lại mã hiện có.
React cũng có thể render trên máy chủ bằng Node và xây dựng ứng dụng di động bằng cách sử dụng React Native.
Ví dụ Component
Các React component thực hiện một phương thức render () lấy dữ liệu đầu vào và trả về những gì sẽ hiển thị. Ví dụ này sử dụng cú pháp giống như XML có tên là JSX. Dữ liệu đầu vào được truyền vào component có thể được truy cập bằng render () qua this.props.
JSX là tùy chọn và không bắt buộc khi sử dụng React. Hãy thử Babel REPL để xem mã JavaScript ban đầu được tạo bởi bước biên dịch JSX.
Đang tải code mẫu...
A Stateful Component
Ngoài việc lấy dữ liệu đầu vào (được truy cập qua this.props), một component có thể duy trì dữ liệu trạng thái bên trong (được truy cập quathis.state). Khi dữ liệu trạng thái của một component thay đổi, giao diện sẽ được cập nhật bằng cách tự gọi lại render ().
Đang tải code mẫu...
Một ứng dụng
Chúng ta có thể sử dụng kết hợp props vàstate cho một ứng dụng Todo nhỏ. Ví dụ này sử dụng state để theo dõi danh sách các mục hiện tại cũng như văn bản mà người dùng đã nhập. Mặc dù các trình xử lý sự kiện được hiển thị cùng dòng, chúng sẽ được thu thập và triển khai bằng cách sử dụng các sự kiện.
Đang tải code mẫu...
Component sử dụng các plugin bên ngoài
React cho phép bạn giao tiếp với các thư viện và frameworks. Ví dụ này sử dụng remarkable, một thư viện Markdown bên ngoài, để chuyển đổi giá trị của <textarea> trong thời gian thực.