Làm Quen Với JSX (React)

Một trong những vướng mắc mà nhiều bạn mới tìm hiểu về React đó là về JSX. Tron bài viết này chúng ta sẽ tìm hiểu về JSX và làm quen với cú pháp của template engine này thông qua các ví dụ minh hoạ.

JSX Là Gì

JSX (viết tắt của cụm từ JavaScript XML) là một loại cú pháp mở rộng dành cho ngôn ngữ JavaScript viết theo kiểu XML. JSX cung cấp cú pháp ngọt (syntactic sugar) để thay cho câu lệnh React.createElement() trong React.

Mã lệnh viết bằng JSX sẽ được chuyển sang JavaScript để trình duyệt có thể hiểu được (chúng ta sẽ tìm hiểu về quy trình này ở phần cuối bài viết).

Do React được dùng để trình bày hiển thị nên nó còn được coi như là một template engine.

Cú pháp của JSX giống với XML ví dụ:

<User id=2>
  <Avatar src="http://example.net/photo.jpg" />
  <Info />
</User

Đoạn code trên có ý nghĩa như thế nào sẽ được chúng ta tìm hiểu trong phần dưới đây.

Cú Pháp JSX

Như đã đề cập ở trong phần JSX Là Gì thì JSX cung cấp cú pháp thuận tiện thay cho React.createElement(). Trong ReactJS thì JSX thường được dùng để khai báo phần tử hoặc trong khi render một component.

Dùng JSX Trong React Element

Hãy xem một ví dụ khai báo một phần tử sau đây:

const element = <div class="example">Welcome to JSX</div>;

Đoạn mã trên sẽ tương đương với:

React.createElement(
  "div",
  {className: "example"},
  "Welcome to JSX"
};

Hoặc một ví dụ tương tự:

const element = <img src="http://example.net/photo.jpg" />;

Đoạn mã trên sẽ tương đương với:

React.createElement(
  "img",
  {src: "http://example.net/photo.jpg"}
};

Dùng JSX Trong React Component

Chúng ta cũng có thể sử dụng JSX trong component:

var Welcome = React.createClass({
  render: function () {
    return <h1>Hello JSX</h1>;
  }
});

Hoặc nếu sử dụng ES6, đoạn code ở trên có thể viết theo format như sau:

class Welcome extends React.Component {
  render() {
    return <h1>Hello JSX</h1>;
  }
}

Lưu ý: Một element cũng có thể khai báo sử dụng một component được định nghĩa sẵn.

Ví dụ sau khi định nghĩa một component Welcome như sau:

var Welcome = React.createClass({
  render: function () {
    return <h1>Hello JSX</h1>;
  }
});

Thì chúng ta có thể khai báo một phần tử dựa trên component này:

const element = <Welcome />;

JSX Expression

Chúng ta có thể nhúng JavaScript expression bên trong JSX sử dụng ben trong cặp dấu ngoặc {}:

const user = {
  firstName: 'John',
  lastName: 'Doe'
};

const element = (
  <h1>
    Hello, {user.firstName}!
  </h1>
);

Cũng như thực hiện các toán tử có trong JavaScript:

const element = (
  <h1>
    Hello, {user.firstName + ' ' + user.lastName}!
  </h1>
);

JSX và Trình Duyệt

Trên thực tế các trình duyệt ngay cả các trình duyệt mới nhất cũng không hỗ trợ cú pháp của JSX. Do đó source code viết sử dụng JSX cần được biên soạn về JavaScript sử dụng một thư viện có tên là Babel.

Ví dụ đoạn code sau:

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

Sau khi được biên dịch sang JavaScript sẽ tương đương với:

React.createElement(
  MyButton,
  {color: 'blue', shadowSize: 2},
  'Click Me'
)

Trong cách biên dịch trên chúng ta có thể thấy Babel biên dịch mã JSX về JavaScript phiên bản ES5 thay vì ES6.