React JSX

JSX là 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ết và thêm HTML trong React dễ dàng hơn.

Mã hóa JSX

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

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

Đây là hai ví dụ. Cái đầu tiên sử dụng JSX và cái thứ hai thì không:

const myelement = <h1>I Love JSX!</h1>;

ReactDOM.render(myelement, document.getElementById('root'));

const myelement = React.createElement('h1', {}, 'I do not use JSX!');

ReactDOM.render(myelement, document.getElementById('root'));

Như bạn 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 mã JavaScript.

JSX là một phần mở rộng của ngôn ngữ JavaScript dựa trên ES6 và được dịch sang JavaScript thông thường trong thời gian chạy.

Biểu thức trong JSX

Với JSX, bạn có thể viết các biểu thức bên trong dấu ngoặc nhọn { }.

Biểu thức có thể là một biến hoặc thuộc tính React 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ả:

const myelement = <h1>React is {5 + 5} times better with JSX</h1>;

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

Để viết HTML trên nhiều dòng, hãy đặt HTML bên trong dấu ngoặc đơn:

const myelement = (
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Cherries</li>
  </ul>
);

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

Mã HTML phải được bao bọc trong MỘT phần tử cấp cao nhất.

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

const myelement = (
  <div>
    <p>I am a paragraph.</p>
    <p>I am a paragraph too.</p>
  </div>
);

Ngoài ra, bạn có thể sử dụng một "phân mảnh" để quấn nhiều dòng. Điều này sẽ ngăn việc thêm các nút bổ sung vào DOM một cách không cần thiết.

<></>Một phân đoạn trông giống như một thẻ HTML trống:.

const myelement = (
  <>
    <p>I am a paragraph.</p>
    <p>I am a paragraph too.</p>
  </>
);

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

JSX tuân theo các quy tắc XML và do đó các phần tử HTML phải được đóng đúng cách.

const myelement = <input type="text" />;

Thuộc tính class = className

Thuộc classtính là một thuộc tính được sử dụng nhiều trong HTML, nhưng vì JSX được hiển thị dưới dạng JavaScript và classtừ khóa là một từ dành riêng trong JavaScript, bạn không được phép sử dụng nó trong JSX.

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

const myelement = <h1 className="myclass">Hello World</h1>;

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

React hỗ trợ các ifcâu lệnh, nhưng không hỗ trợ bên trong JSX.

Để có thể sử dụng các câu lệnh có điều kiện trong JSX, bạn nên đặt các if câu lệnh bên ngoài JSX hoặc bạn có thể sử dụng một biểu thức bậc ba để thay thế:

Lựa chọn 1:

Viết ifcác câu lệnh bên ngoài mã JSX:

const x = 5;
let text = "Goodbye";
if (x < 10) {
  text = "Hello";
}

const myelement = <h1>{text}</h1>;

Lựa chọn 2:

Sử dụng các biểu thức bậc ba để thay thế:

const x = 5;

const myelement = <h1>{(x) < 10 ? "Hello" : "Goodbye"}</h1>;

const paragraph = React.createElement(, {}, 'This is a paragraph without using JSX!');

ReactDOM.render(paragraph, document.getElementById('root'));