Tìm hiểu về JSX

1. Mở đầu

ReactJS là một thư viện JavaScript được Facebook phát triển để xây dựng giao diện người dùng.

Mặc dù mới chỉ xuất hiện nhưng ReactJS đã nhanh chóng thu hút được sự quan tâm đặc biệt và gây được tiếng vang lớn trong cộng đồng phát triển web.

Nhắc đến ReactJS, sẽ thật thiếu sót khi không nhắc đến JSX.

Vậy JSX là gì, JSX được sử dụng trong những trường hợp nào và tại sao chúng ta lại nên sử dụng JSX với ReactJS.

Chúng ta hãy cùng tìm hiểu nhé.

2. JSX là gì?

Cái tên nói lên tất cả:

JSX = JS + XML

Hiểu một cách đơn giản, JSX chính là cú pháp để thay thế Javascript, cách viết gần giống XML.

Ta có một ví dụ về việc sử dụng JSX để biểu thị UI components như sau:

var dropdown =
  <Dropdown>
    A dropdown list
    <Menu>
      <MenuItem>Do Something</MenuItem>
      <MenuItem>Do Something Fun!</MenuItem>
      <MenuItem>Do Something Else</MenuItem>
    </Menu>
  </Dropdown>;

render(dropdown);

3. Cú pháp JSX

Cú pháp của JSX cũng tương tự như XML.

Ta có thẻ mở tag:

<JSXElementName JSXAttributesopt>

Đóng tag:

</JSXElementName>

Ở đây lưu ý tên của thẻ mở tag và đống tag phải giống nhau.

Ngoài ra JSX cũng có SelfClosingElement:

<JSXElementName JSXAttributesopt/>

4. Tại sao nên sử dụng JSX với ReactJS

Việc sử dụng JSX trong ReactJS là không bắt buộc. Bạn có thể sử dụng chỉ JS thuần thôi. Nhưng có rất nhiều lý do cho việc nên sử dụng JSX trong ReactJS đấy.

• Thứ nhất, JSX với cú pháp gần giống XML, cấu trúc cây khi biểu thị các attributes, điều đó giúp ta dễ dàng định nghĩa, quản lý được các component phức tạp, thay vì việc phải định nghĩa và gọi ra nhiều hàm hoặc object trong javascript. Khi nhìn vào cấu trúc đó cũng dễ dàng đọc hiểu được ý nghĩa của các component. Code JSX ngắn hơn, dễ hiểu hơn code JS.

• Thứ 2, JSX không làm thay đổi ngữ nghĩa của Javascript

• Thứ 3, với cách viết gần với các thẻ HTML, nó giúp những developers thông thường (ví dụ như các designer) có thể hiểu được một cách dễ dàng, từ đó có thể viết hoặc sửa code mà không gặp nhiều khó khăn.
  
  Ví dụ thay vì viết: React.DOM.div(null, 'hello') ta có thể viết <div>hello</div>, dễ nhìn hơn rất nhiều phải không.

Hoặc ta có thể thấy rõ hơn trong ví dụ dưới đây về việc sử dụng JSX với ReactJS.

Với đoạn code JSX như sau:

<div className="red">Children Text</div>;
<MyCounter count={3 + 5} />;

var gameScores = {
  player1: 2,
  player2: 5
};
<DashboardUnit data-index="2">
  <h1>Scores</h1>
  <Scoreboard className="results" scores={gameScores} />
</DashboardUnit>;

Code Javascipt tương đương sẽ là:

React.createElement("div", {className: "red"}, "Children Text");
React.createElement(MyCounter, {count: 3 + 5});

React.createElement(DashboardUnit, {"data-index": "2"},
  React.createElement("h1", null, "Scores"),
  React.createElement(Scoreboard, {className: "results", scores: gameScores})
);

Rõ ràng là code JSX nhìn sáng sủa hơn nhiều phải không (dance)

5. Một số chú ý

JSX không phải là HTML do đó bạn nên cẩn thận kẻo nhầm với cú pháp của HTML nhé.

Ví dụ trong một div element, ta định nghĩa một Class container thì ta không viết là:

<div class="container">...</div> mà phải viết là <div className="container">...</div>
(vì class là keyword của Javascript).
Hoặc for trong label element thì phải viết thành htmlfor, ....

Ngoài ra HTML tag không cần đóng cũng được nhưng JSX cần thiết phải đóng tag nhé.

<JSXElementName JSXAttributesopt>

# something here

</JSXElementName>

###6. Kết luận
Trên đây, mình đã điểm qua một chút về khái niệm JSX và lý do tại sao ta nên sử dụng JSX trong ReactJS.

Hy vọng các bạn sẽ tìm thấy được nhiều điều hay ho hơn nữa trong thế giới ReactJS đầy thú vị.