Jsx là gì

trong số những vướng mắc cơ mà nhiều bạn mới tìm hiểu về React chính là về JSX. Tron nội dung bài viết này bọn họ đang khám phá về JSX và có tác dụng quen với cú pháp của template engine này trải qua các ví dụ minch 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 trong những một số loại cú pháp không ngừng mở rộng dành cho ngôn ngữ JavaScript viết theo phong cách XML. JSX cung ứng cú pháp ngọt (syntactic sugar) để cầm đến câu lệnh React.createElement() trong React.

Mã lệnh viết bằng JSX sẽ được gửi sang trọng JavaScript để trình để ý hoàn toàn có thể hiểu được (họ đang tìm hiểu về quá trình này ở trong phần cuối bài xích viết).

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

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

Đoạn code bên trên tất cả ý nghĩa ra làm sao sẽ tiến hành chúng ta mày mò vào phần sau đâ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ư đã nhắc tại đoạn JSX Là Gì thì JSX cung cấp cú pháp dễ ợt nỗ lực mang đến React.createElement(). Trong ReactJS thì JSX thường xuyên được dùng để làm knhị báo bộ phận hoặc trong những lúc render một component.

Dùng JSX Trong React Element

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

const element =
Welcome khổng lồ 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ương tự:

const element =

;Đoạn mã bên trên đã tương tự 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 trường hợp thực hiện ES6, đoạn code ở bên trên hoàn toà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 hoàn toàn có thể khai báo thực hiện một component được tư tưởng sẵn.

Ví dụ sau thời điểm có mang một component Welcome nlỗi sau:

var Welcome = React.createClass( render: function () return Hello JSX; );Thì bạn 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 rất có thể nhúng JavaScript expression bên phía trong JSX sử dụng ben vào cặp vết ngoặc :

const user = firstName: "John", lastName: "Doe";const element = ( Hello, user.firstName! );Cũng như thực hiện các toán thù tử bao gồm trong JavaScript:

const element = ( Hello, user.firstName + " " + user.lastName! );

JSX với Trình Duyệt

Trên thực tế các trình lưu ý tức thì cả các trình ưng chuẩn mới nhất cũng không hỗ trợ cú pháp của JSX. Do đó source code viết thực hiện JSX rất cần phải soạn về JavaScript áp dụng một thỏng viện mang tên là Babel.

lấy ví dụ như đoạn code sau:

Clichồng MeSau Lúc được biên dịch quý phái JavaScript vẫn tương tự với:

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