Tổng quan về JSX

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. Nhắc đến ReactJS, sẽ thật thiếu sót khi không nhắc đến JSX. Khi tìm hiểu về jsx mình thấy một số người vẫn hơi mơ hồ về kiến thức jsx hoặc bỏ qua nó một cách đơn giản

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 xét khai báo biến như sau :

const element = <h1>Hello, world!</h1>;

Cú pháp thẻ này không phải là một chuỗi hay là HTML. Nó được gọi là JSX, và nó là một cú pháp mở rộng cho JavaScript. Facebook sử dụng JSX để biểu thị UI components

JSX = Javascript + XML. Nó transform cú pháp dạng gần như XML về thành Javascript. Giúp người lập trình có thể code ReactJS bằng cú pháp của XML thay vì sử dụng Javascript. Các XML elements, attributes và children được chuyển đổi thành các đối số truyền vào React.createElement.

vậy javascript thì hầu như ai cũng biết rồi vậy cùng nhắc lại xml và cú pháp của xml nhé

XML là viết tắt của từ eXtensible Markup Language, hay còn gọi là ngôn ngữ đánh dấu mở rộng do W3C đề nghị với mục đích tạo ra các ngôn ngữ đánh dấu khác. Đây là một tập hợp con đơn giản có thể mô tả nhiều loại dữ liệu khác nhau nên rất hữu ích trong việc chia sẻ dữ liệu giữa các hệ thống. Điển hình nhất là ngôn ngữ đánh dấu siêu văn bản HTML sử dụng cú pháp của XML để tạo nên và nó có các bộ phần tử và thuộc tính không mềm dẻo nên chỉ có tác dụng trong việc trình bày dữ liệu trên trình duyệt Browser.

Cú pháp của tài liệu XML XML được xây dựng dựa vào cấu trúc NODE lồng nhau, mỗi node sẽ có một thẻ mở và một thẻ đóng như sau:

<nodename>nội dung</nodename>

Trong đó:

• <nodename> là thẻ mở, tên của thẻ này do bạn tự định nghĩa.
• </nodename> là thẻ đóng, tên của thẻ này phải trùng với tên của thẻ mở.
• content là nội dung của thẻ này

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. ví dụ :

   <MyButton color="blue" shadowSize={2}>
      Click Me
    </MyButton>

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

<JSXElementName JSXAttributes/>

ví dụ:

<div className="sidebar" />

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>

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í du 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})
);

Vậy bạn hiểu nên dùng jsx vì sao rồi chứ