React JSX

JSX là cái gì?

JSX là viết tắt của JavaScript XML.

JSX cho phép chúng ta viết HTML trong React.

JSX giúp việc viết và thêm HTML trong React dễ dàng hơn.

Viết code JSX

JSX cho phép chúng ta viết các phần tử HTML trong JavaScript và đặt chúng trong DOM mà không cần bất cứ phương thức createElement() hoặc appendChild() nào.

JSX chuyển đổi các thẻ HTML thành các phần tử react.

Lưu ý: Chúng ta không bắt buộc phải sử dụng JSX, nhưng JSX giúp chúng ta dễ viết các ứng dụng React hơn.

Sau đây là hai ví dụ. Ví dụ thứ nhất sử dụng JSX và ví dụ thứ hai thì không:

Ví dụ 1: Sử dụng JSX

Ví dụ 2: Không sử dụng JSX:

Như chúng ta có thể thấy trong ví dụ đầu tiên, JSX cho phép chúng ta viết HTML trực tiếp ở trong JavaScript code.

JSX là một extension của ngôn ngữ JavaScript dựa trên ES6, và được dịch thành JavaScript thông thường trong thời gian chạy chương trình.

Các biểu thức trong JSX

Với JSX chúng ta có thể viết các biểu thức ở bên trong cặp dấu ngoặc nhọn { }.

Biểu thức có thể là một biến, hoặc một thuộc tính, hoặc bất kỳ biểu thức JavaScript hợp lệ nào khác. JSX sẽ thực thi biểu thức và trả về kết quả:

Ví dụ sau sẽ thực thi biểu thức 5 + 5:

Chèn một khối HTML lớn

Để viết HTML trên nhiều dòng, chúng ta đặt HTML ở bên trong dấu ngoặc tròn:

Ví dụ sau sẽ tạo ra một danh sách với ba mục:

Một phần tử cấp cao nhất

HTML code phải được bọc trong một phần tử cấp cao nhất.

Vì vậy nếu như chúng ta muốn viết hai đoạn văn bản, thì chúng ta phải đặt chúng ở bên trong một phần tử cha, như phần tử div.

Ví dụ sau sẽ bọc hai đoạn văn bản ở bên trong một phần tử DIV:

Lưu ý: JSX sẽ ném ra một lỗi nếu như HTML không chính xác, hoặc nếu như HTML thiếu phần tử cha.

Ngoài ra, chúng ta có thể sử dụng một "fragment" để bọc nhiều dòng. Điều này sẽ ngăn chặn việc thêm các node bổ sung không cần thiết vào DOM.

Một fragment giống như một cặp thẻ HTML không có gì bên trong: <></>.

Ví dụ sau sẽ bọc hai đoạn văn bản ở bên trong một fragment:

Các phần tử phải được đóng lại

JSX tuân theo các quy tắc của XML, vì thế các phần tử HTML phải được đóng lại đúng cách.

Ví dụ sau sẽ đóng các phần tử rỗng bằng />

Lưu ý: JSX sẽ ném ra một lỗi nếu như phần tử HTML không được đóng đúng cách.

Thuộc tính class = className

Thuộc tính class là một thuộc tính được sử dụng nhiều trong HTML, nhưng do JSX được render bằng JavaScript, và từ khóa class là một từ dành riêng trong JavaScript, nên chúng ta không được phép sử dụng nó trong JSX.

Chúng ta hãy sử dụng thuộc tính className để thay thế.

JSX đã giải quyết điều này bằng cách sử dụng thuộc tính className để thay thế. Khi JSX được render, nó sẽ dịch thuộc tính className thành thuộc tính class.

Ví dụ sau sẽ sử dụng thuộc tính className thay thế cho thuộc tính class trong JSX:

Điều kiện - câu lệnh if

React có hỗ trợ câu lệnh if, nhưng không phải là ở bên trong JSX.

Để có thể sử dụng các câu lệnh có điều kiện trong JSX, chúng ta sẽ đặt câu lệnh if ở bên ngoài JSX, hoặc chúng ta có thể sử dụng một ternary expression để thay thế:

Ví dụ sau sẽ in ra "Hello" nếu như x nhỏ hơn 10, nếu không thì in ra "Goodbye":

Tùy chọn 1: Viết các câu lệnh if ở bên ngoài JSX code:

Tùy chọn 2: sử dụng ternary expression để thay thế:

Lưu ý rằng để nhúng một biểu thức JavaScript ở bên trong JSX, thì JavaScript code phải được bọc bằng dấu ngoặc nhọn, {}.