JSX trong ReactJS

Giới thiệu

React là một thư viện Javascript được phát triển bởi Facebook phục vụ cho mục đích xây dựng giao diện người dùng (UI). React được giới thiệu lần đầu tiên vào tháng 3 năm 2013 và cho đến này phiên bản chính thức được công bố là bản v16.2.0. Ở thời điểm hiện tại, React đang là thư viện nổi tiếng nhất trong việc phát triển giao diện người dùng với 87.596 star trên Github và số lượng lượt tải trên npm tính là khoảng 1.853.205. Khi bạn bắt đầu việc tìm hiểu về React thì một trong những khái niệm đầu tiên được giới thiệu ở ngay trên document chính thức là JSX. Bài viết sau đây của mình sẽ giải thích cho bạn những điều cơ bản về khái niệm này.

Xây dựng giao diện

Đối với bất cứ thư viện nhắm tới việc xây dựng UI nào thì một trong những thành phần không thể thiếu đó là phần phục vụ cho mục đích định nghĩa những gì sẽ được hiển thị trên màn hình khi chạy ứng dụng. Đối với React thì JSX chính là phần này. Tuy nhiên trước khi bắt đầu tìm hiểu về JSX ta có thể hiểu về cách định nghĩa giao diện trong React mà khong dùng đến JSX. Xét ví dụ sau:

• Giả sử ta muốn hiển thị trên màn hình 1 thẻ html với nội dung nằm trong đó như sau:

<h1 class="title">Welcome to React</h1>

• Thì với việc sử dụng React (không dùng JSX) ta có thể định nghĩa cấu trúc và hiển thị thông qua component như sau:

class Greeting extends Component{
    render() {
      return React.createElement("h1", { className: "title" }, "Welcome to React");
    }
}

• Đoạn code trên sử dụng trực tiếp hàm createElement() với đầy đủ những gì ta cần thiết như thẻ <h1>, class="title" và dòng chữ Welcome to React. Đây chính là cách React dùng để định nghĩa những gì sẽ được hiển thị trên màn hình của chúng ta. Tuy nhiên trong trường hợp hiển thị thứ gì đó phức tạp hơn như sau:

<div class="wrapper">
    <h1 class="title">Welcome to React</h1>
    <p class="sub-title">Subtitle</p>
</div>

• Thì với việc sử dụng cú pháp trong React như ở trên ta thấy sẽ như sau:

class Greeting extends Component {
 render() {
   return React.createElement(
      "div", { className: "wrapper" },
      React.createElement("h1",  { className: "title" }, "Welcome to React"),
      React.createElement("p", { className: "sub-title" }, "Subtitle")
   );
 }
}

• Với đoạn code trên ta có thể thấy nó bắt đầu trở nên khác cồng kềnh, nhất là khi ta có nhiều hơn các thẻ lồng vào nhau. Để giải quyết vấn đề này, đội phát triển React đã phát triển ra JSX

JSX

1. Sử dụng JSX

Cùng xét đoạn code sau:

const greeting = <h1>Welcome to React</h1>;

• Đoạn code trên không phải là HTML vì nếu là HTML sẽ không thể gán vào một biến js
• Đoạn code trên cũng không phải là một string vì nó không có dấu ngoặc đơn (ngoặc kép) bao quanh

Đoạn code mà bạn đang nhìn thấy ở trên chính là JSX. JSX hay có thể hiểu là Javascript Extension là dạng cú pháp cú pháp mở rộng cho javascript để hỗ trợ việc định nghĩa cấu trúc giao diện. Bằng việc sử dụng JSX đoạn code trong ví dụ trên có thể được chuyển thành như sau:

class Greeting extends Component {
 render() {
   return (
       <div className="wrapper">
            <h1 className="title">Welcome to React</h1>
            <p className="sub-title">Subtitle</p>
       </div>
   );
 }
}

Giờ đây đoạn code đã trở nên gần giống với code HTML ban đầu tuy đồng thời bạn cũng có thể sử dụng code javascript ngay trong JSX bằng cách thêm đoạn code đó bên trong cặp ngoặc nhọn {}:

class Greeting extends Component {
 render() {
   const greeting = 'Welcome to React';
   return (
       <div className="wrapper">
            <h1 className="title">{greeting}</h1>
            <p className="sub-title">Subtitle</p>
       </div>
   );
 }
}

Như bạn thấy việc sử dụng JSX cho phép ta không những định nghĩa các thẻ giống như HTML mà còn cho phép ta truyền vào đó những đoạn code logic cần thiết để xử lý các sự kiện trên component của mình. Đồng thời cho phép ta gán nó vào một biến sau đó kết hợp với code javascript thông thường để thực hiện việc hiển thị giao diện:

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {user}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

Đoạn code JSX mà ta vừa ví dụ ở trên thực chất sau khi được complie thành đoạn code ban đầu mà React dùn để định nghĩa giao diện:

React.createElement(
    "div", { className: "wrapper" },
    React.createElement("h1",  { className: "title" }, "Welcome to React"),
    React.createElement("p", { className: "sub-title" }, "Subtitle")
);

2. Attribute trong JSX

Trong JXS ta cũng có thể định nghĩa các attribute giống như attribute của các thẻ HTML thông thường tuy nhiên một số attribute cũng như một số event sẽ khác đi:

// HTML
<h1 class="some-class" onclick="doSomething()">Hello</h1>

// JSX
<h1 className="some-class" onClick="doSomething">Hello</h1>

Bạn cần hiểu rằng mặc dù JSX nhìn có vẻ giống như các thẻ HTML nhưng nó không phải như vậy vì thế việc khai báo các attribute cũng như gán các event cần tuân thủ theo quy tắc về cú pháp của JSX. Attribute class trong HTML được thay thế bằng className vì từ khóa class bị trùng với việc khai báo class khi sử dụng ES6, tiếp đến onclick cũng được thay thế bằng onClick. Mặc dù có một số thay đổi nhỏ như vậy nhưng việc khai báo attribute vẫn có những điểm giống nhau ví dụ như khi bạn sử dụng attribute id thì bên JSX cũng sử dụng id giống như bên HTML. Để có thể đọc kĩ hơn về những gì được thay đổi bạn có thể xem ở đây. Thêm vào đó nếu bạn sử dụng {} để khai báo giá trị của attribute thì không được lồng nó vào ngoặc đơn hoặc ngoặc kép:

const imageUrl = 'link-to-resource.png'

// Lỗi vì sử dụng cả {} lẫn ""
const image = <img src="{imageUrl}"  />
// Đúng
const image = <img src={imageUrl} />

3. Bảo mật

Mặc định JSX đã escape toàn bộ dữ được nhúng vào JSX trước khi hiển thị nó ra màn hình từ đó nó đảm bảo việc không bị tấn công XSS vì thực chất các đoạn script cố tình được thêm vào sẽ được chuyển về dạng string trước khi được hiển thị.

Kết bài

Bài viết trên mong rằng đã giới thiệu sơ qua cho các bạn hiểu về JSX trong React là gì cũng như nó khác gì so với HTMl thông thường. Cám ơn các bạn đã đọc.