ReactJS - JSX là gì? và JSX hoạt động như thế nào?

Như chúng ta đã học trước đó, React JSX là một phần mở rộng của JavaScript. Nó cho phép các nhà phát triển tạo ra virtual DOM bằng cú pháp XML. Nó được biên dịch thành mã JavaScript thuần (các cuộc gọi hàm React.createElement). Vì nó được biên dịch thành JavaScript, nó có thể được sử dụng bên trong bất kỳ mã JavaScript hợp lệ nào. Ví dụ, mã dưới đây là hoàn toàn hợp lệ.

Gán cho một biến.

var greeting = <h1>Hello React!</h1>

Gán cho một biến dựa trên một điều kiện.

var canGreet = true; 
if(canGreet) { 
   greeting = <h1>Hello React!</h1> 
}

Có thể sử dụng như giá trị trả về của một hàm.

function Greeting() { 
   return <h1>Hello React!</h1>    
} 
greeting = Greeting()

Có thể sử dụng như đối số của một hàm.

function Greet(message) { 
   ReactDOM.render(message, document.getElementById('react-app')) 
} 
Greet(<h1>Hello React!</h1>)

Tóm lại, với cú pháp JSX, ta có thể viết mã nguồn React dễ đọc hơn và dễ hiểu hơn.

1. Biểu thức (Expressions):

<script type="text/babel">
   var cTime = new Date().toTimeString();
   ReactDOM.render(
      <div><p>The current time is {cTime}</p></div>, 
      document.getElementById('react-app') );
</script>

Ở đây, biến cTime được sử dụng trong JSX bằng biểu thức. Kết quả của đoạn mã trên là như sau:

The Current time is 21:19:56 GMT+0530(India Standard Time)

Một trong những lợi ích của việc sử dụng biểu thức trong JSX là nó ngăn chặn các cuộc tấn công Injection bằng cách chuyển đổi bấtkỳ chuỗi nào thành chuỗi an toàn cho HTML.

2. Hàm (Functions):

Với JSX, ta có thể sử dụng các hàm JavaScript do người dùng định nghĩa. Việc sử dụng hàm tương tự như biểu thức. Hãy tạo một hàm đơn giản và sử dụng nó trong JSX.

Ví dụ

<script type="text/babel">
   function getCurrentTime() {
      return new Date().toTimeString();
   }
   
   var cTime = getCurrentTime();
   
   ReactDOM.render(
      <div><p>The current time is {cTime}</p></div>, 
      document.getElementById('react-app') 
   );
</script>

Ở đây, hàm getCurrentTime() được sử dụng để lấy thời gian hiện tại và kết quả được hiển thị như sau:

The Current time is 21:19:56 GMT+0530(India Standard Time)

Ta có thể thấy rằng việc sử dụng hàm trong JSX là rất linh hoạt và cho phép chúng ta tạo ra các ứng dụng phong phú và đa dạng.

3. Thuộc tính (Attributes):

Với JSX, ta có thể sử dụng các thuộc tính giống như HTML. Tất cả các thẻ HTML và thuộc tính của nó đều được hỗ trợ. Thuộc tính phải được chỉ định bằng cách sử dụng quy ước camelCase (và nó tuân thủ API DOM của JavaScript) thay vì tên thuộc tính HTML bình thường. Ví dụ, thuộc tính class trong HTML phải được định nghĩa là className. Dưới đây là một số ví dụ khác:

• htmlFor thay vì for
• tabIndex thay vì tabindex
• onClick thay vì onclick

Ví dụ

<style>
   .red { color: red }
</style>
<script type="text/babel">
   function getCurrentTime() {
      return new Date().toTimeString();
   }
   ReactDOM.render(
      <div>
         <p>The current time is <span className="red">{getCurrentTime()}</span></p>
      </div>,
      document.getElementById('react-app') 
   );
</script>

Kết quả của đoạn mã trên là như sau −

The Current time is 22:36:55 GMT+0530(India Standard Time)

Ta có thể thấy rằng việc sử dụng các thuộc tính giống như HTML trong JSX rất tiện lợi và cho phép chúng ta tùy chỉnh và kiểm soát các thành phần của ứng dụng của mình.

4. Biểu thức trong thuộc tính:

JSX hỗ trợ việc chỉ định biểu thức bên trong các thuộc tính. Trong thuộc tính, không nên sử dụng dấu ngoặc kép cùng với biểu thức. Có thể sử dụng biểu thức hoặc chuỗi sử dụng dấu ngoặc kép. Ví dụ trên có thể được thay đổi để sử dụng biểu thức trong các thuộc tính.

Ví dụ

<style>
   .red { color: red }
</style>

<script type="text/babel">
   function getCurrentTime() {
      return new Date().toTimeString();
   }
   var class_name = "red";
   ReactDOM.render(
      <div>
         <p>The current time is <span className={class_name}>{getCurrentTime()}</span></p>
      </div>, 
      document.getElementById('react-app') 
   );
</script>

Ở đây, biến class_name được sử dụng để định nghĩa tên lớp và được sử dụng trong thuộc tính className của thẻ span. Kết quả của đoạn mãtrên vẫn giống như trước đó:

The Current time is 22:36:55 GMT+0530(India Standard Time)

Ta có thể thấy rằng việc sử dụng biểu thức trong các thuộc tính cho phép chúng ta tùy chỉnh động các thành phần của ứng dụng của mình.