Xem xét đoạn khai báo biến dưới đây:

Cú pháp của đoạn này không phải là một chuỗi kí tự và cũng không phải là một thẻ HTML. Đây được gọi là JSX, một cú pháp mở rộng cho JavaScript. Chúng tôi khuyến khích sử dụng JSX cùng với React để miêu tả giao diện người dùng (UI). JSX có thể trông giống ngôn ngữ template, nhưng nó kết hợp tất cả các tính năng của JavaScript.

JSX tạo ra các phần tử React. Chúng ta sẽ tìm hiểu cách chúng được hiển thị trên DOM trong phần tiếp theo. Dưới đây là những kiến thức cơ bản về JSX mà bạn cần để bắt đầu.

Tại sao lại sử dụng JSX?

React khuyến khích chúng ta kết hợp logic render một cách tự nhiên với các logic khác liên quan đến giao diện người dùng: xử lý sự kiện, thay đổi trạng thái theo thời gian và chuẩn bị dữ liệu để hiển thị.

Thay vì tách biệt các công nghệ giả tạo bằng cách định nghĩa giao diện và logic trong các tệp riêng biệt, React tách biệt chúng trong các đơn vị rời rạc gọi là “components”. Chúng ta sẽ thảo luận về components trong một phần khác, và nếu bạn vẫn chưa thấy thoải mái với việc đưa định nghĩa giao diện vào trong JavaScript, buổi nói chuyện này có thể thuyết phục bạn.

React không yêu cầu bắt buộc sử dụng JSX, nhưng hầu hết mọi người đều thấy nó hữu ích khi làm việc với giao diện người dùng trong mã JavaScript. JSX cũng cho phép React hiển thị các thông báo lỗi và cảnh báo hữu ích hơn.

Vậy bắt đầu ngay thôi!

Nhúng biểu thức trong JSX

Trong ví dụ dưới đây, chúng ta khai báo một biến có tên là “name” và sử dụng nó bên trong JSX bằng cách đặt nó trong cặp dấu ngoặc nhọn:

Bạn có thể nhúng bất kỳ biểu thức JavaScript hợp lệ nào vào trong JSX bằng cách đặt chúng trong cặp dấu ngoặc nhọn. Ví dụ: 2 + 2, user.firstName hoặc formatName(user) đều là các biểu thức hợp lệ trong JavaScript.

Trong ví dụ dưới đây, chúng ta nhúng kết quả của một hàm JavaScript, formatName(user), vào trong phần tử

.

Chúng ta có thể tách JSX vào các tệp riêng biệt để dễ đọc. Điều này không bắt buộc, nhưng khi làm như vậy, chúng tôi khuyến khích bạn đặt trong cặp dấu ngoặc nhọn để tránh rơi vào tình huống mà JavaScript Engine tự động thêm dấu chấm phẩy.

JSX cũng là một biểu thức

Sau khi được biên dịch, biểu thức JSX trở thành các cuộc gọi hàm thông thường của JavaScript và trở thành các đối tượng JavaScript khi được gọi.

Điều này có nghĩa là bạn có thể sử dụng JSX trong câu lệnh if hoặc vòng lặp for, gán nó cho biến, sử dụng như tham số của hàm và trả về JSX từ hàm.

Xác định thuộc tính của thẻ với JSX

Bạn có thể sử dụng dấu nháy để khai báo một chuỗi như một thuộc tính của thẻ:

Bạn có thể sử dụng dấu ngoặc nhọn để nhúng một biểu thức JavaScript vào trong thuộc tính:

Đừng đặt cả dấu nháy và dấu ngoặc nhọn khi nhúng biểu thức JavaScript vào trong một thuộc tính. Bạn có thể sử dụng dấu nháy (cho giá trị chuỗi) hoặc dấu ngoặc nhọn (cho biểu thức), nhưng không được sử dụng cả hai cho cùng một thuộc tính.

CẢNH BÁO:

Vì JSX gần với JavaScript hơn là HTML, React DOM sử dụng quy tắc đặt tên camelCase cho thuộc tính thay vì sử dụng tên thuộc tính gốc của HTML.

Ví dụ: “class” trở thành “className” trong JSX và “tabindex” trở thành “tabIndex”.

Sử dụng thẻ con trong JSX

Nếu thẻ không có nội dung, bạn có thể đóng nó ngay lập tức bằng “/>”, tương tự như XML:

Thẻ JSX có thể chứa các thẻ con:

JSX chống tấn công kiểu Injection

Việc nhúng dữ liệu người dùng vào trong JSX là an toàn:

Mặc định, React DOM loại bỏ các ký tự đặc biệt trong bất kỳ giá trị nào được nhúng vào JSX trước khi hiển thị. Điều này đảm bảo không có giá trị độc hại nào được truyền vào ứng dụng. Tất cả đều được chuyển thành chuỗi trước khi hiển thị. Điều này giúp ngăn chặn các cuộc tấn công XSS (cross-site scripting).

JSX là đối tượng

Babel biên dịch JSX thành các cuộc gọi hàm React.createElement().

Hai ví dụ dưới đây tương tự nhau:

React.createElement() thực hiện một số kiểm tra để giúp bạn viết mã mà không có lỗi, nhưng cơ bản nó tạo ra một đối tượng như sau:

Các đối tượng này được gọi là “phần tử React”. Bạn có thể coi chúng như mô tả của những gì bạn muốn hiển thị trên màn hình. React đọc các đối tượng này và sử dụng chúng để xây dựng DOM và cập nhật nó.

Chúng ta sẽ tìm hiểu cách các phần tử React được hiển thị trên DOM trong phần tiếp theo.

Gợi ý:

Chúng tôi khuyến khích bạn sử dụng Babel để biên dịch mã của bạn để dễ đọc. Babel sẽ làm tô sáng cả mã ES6 và JSX.