Đoạn code trên có ý nghĩa như thế nào sẽ được tất cả chúng ta tìm hiểu và khám phá 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 thành phần sau đây :

const element = 
Welcome to JSX
;

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

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

Hoặc một ví dụ tựa như :

const element = ;

Đoạn mã trên sẽ tương tự 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 
Hello JSX
;
  }
});

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

class Welcome extends React.Component {
  render() {
    return 
Hello JSX
;
  }
}

Lưu ý : Một element cũng hoàn toàn 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 
Hello JSX
;
  }
});

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

const element = ;

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 = (
  

    Hello, {user.firstName}!
  
);

Cũng như triển khai những toán tử có trong JavaScript :

const element = (
  

    Hello, {user.firstName + ' ' + user.lastName}!
  
);

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 :

  Click Me

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

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

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