Jsx Là Gì

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ạ.

Bạn đang xem: Jsx là gì

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ụ:

Đ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.

Xem thêm: Hạo Nam Và Heo Rừng Song Ca Điếu Thuốc Tàn Trong Đêm Sinh Nhật Hạo Nam

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 =
Welcome to JSX
;Đ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 =

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

React.createElement( "img", {src: "https://realchampionshipwrestling.com/jsx-la-gi/imager_2_7899_700.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 có thể viết theo format như sau:

class Welcome extends React.Component { render() { return Hello JSX; }}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 Hello JSX; }});Thì chúng ta có thể khai báo một phần tử 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ư thực hiện các 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 MeSau 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.