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.
Bạn đang đọc: Làm Quen Với JSX (React)
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 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 .
Source: kubet
Category: Tải Phầm Mềm
Leave a Reply