trong những vướng mắc nhưng mà nhiều bạn new tò mò về React sẽ là về JSX. Tron nội dung bài viết này họ vẫn tìm hiểu về JSX cùng làm quen với cú pháp của template engine này trải qua các ví dụ minc hoạ.

Bạn đang xem: Reactjs

JSX Là Gì

JSX (viết tắt của các từ bỏ JavaScript XML) là một trong nhiều loại cú pháp không ngừng mở rộng dành riêng cho ngôn từ JavaScript viết theo phong cách XML. JSX cung ứng cú pháp ngọt (syntactic sugar) để thay đến câu lệnh React.createElement() trong React.

Mã lệnh viết bằng JSX sẽ tiến hành chuyển thanh lịch JavaScript nhằm trình ưng chuẩn hoàn toàn có thể hiểu được (bọn họ sẽ tò mò về các bước này tại vị trí cuối bài bác viết).

*

Do React được dùng làm trình bày hiển thị cho nên nó còn được nhìn nhận nlỗi là 1 trong template engine.

Cú pháp của JSX như là với XML ví dụ:

Đoạn code trên bao gồm ý nghĩa như thế nào sẽ tiến hành họ mày mò trong phần dưới đây.

Xem thêm: Đuôi Txt Là File Đuôi Txt Là Gì, File Txt Là Gì

Cú Pháp JSX

Như sẽ nói ở phần JSX Là Gì thì JSX cung ứng cú pháp dễ ợt nắm cho React.createElement(). Trong ReactJS thì JSX hay được dùng để knhị báo bộ phận hoặc trong lúc render một component.

Dùng JSX Trong React Element

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

const element =
Welcome khổng lồ JSX
;Đoạn mã bên trên vẫn tương tự với:

React.createElement( "div", className: "example", "Welcome to lớn JSX"};Hoặc một ví dụ tương tự:

const element =

*
;Đoạn mã bên trên vẫn tương tự với:

React.createElement( "img", src: "https://alokapidakaldim.com/jsx-la-gi/imager_2_2191_700.jpg"};

Dùng JSX Trong React Component

Chúng ta cũng rất có thể thực hiện JSX trong component:

var Welcome = React.createClass( render: function () return Hello JSX; );Hoặc nếu áp dụng ES6, đoạn code làm việc trên có thể viết theo format nhỏng sau:

class Welcome extends React.Component render() return Hello JSX; Lưu ý: Một element cũng có thể knhì báo sử dụng một component được định nghĩa sẵn.

lấy ví dụ sau khi có mang một component Welcome nhỏng sau:

var Welcome = React.createClass( render: function () return Hello JSX; );Thì chúng ta cũng có thể khai báo một trong những phần tử dựa trên component này:

const element = ;

JSX Expression

Chúng ta hoàn toàn có thể nhúng JavaScript expression phía bên trong JSX áp 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 các toán tử tấ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 chăm sóc ngay lập tức cả các trình lưu ý mới nhất cũng ko hỗ trợ cú pháp của JSX. Do đó source code viết áp dụng JSX cần phải soạn về JavaScript áp dụng một thư viện mang tên là Babel.

Xem thêm: Business Executive Là Gì Trong Tiếng Việt? Business Development Executive Là Gì

lấy một ví dụ đoạn code sau:

Click MeSau khi được biên dịch thanh lịch JavaScript đã tương tự với:

React.createElement( MyButton, color: "blue", shadowSize: 2, "Click Me")Trong giải pháp biên dịch bên trên bạn cũng có thể thấy Babel biên dịch mã JSX về JavaScript phiên bạn dạng ES5 gắng bởi ES6.

Bài viết liên quan

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *