Jsx là gì Update 04/2024

ReactJS là một thư viện JavaScript được Facebook phát triển để xây dựng giao diện người dùng.Nhắc đến ReactJS, sẽ thật thiếu sót khi không nhắc đến JSX. Khi tìm hiểu về jsx mình thấy một số người vẫn hơi mơ hồ về kiến thức jsx hoặc bỏ qua nó một cách đơn giản

Vậy JSX là gì, JSX được sử dụng trong những trường hợp nào và tại sao chúng ta lại nên sử dụng JSX với ReactJS.

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

1. JSX là gì?

chúng ta xét khai báo biến như sau :

const element = Hello, world!;Cú pháp thẻ này không phải là một chuỗi hay là HTML.Nó được gọi là JSX, và nó là một cú pháp mở rộng cho JavaScript. Facebook sử dụng JSX để biểu thị UI components

JSX = Javascript + XML. Nó transform cú pháp dạng gần như XML về thành Javascript. Giúp người lập trình có thể code ReactJS bằng cú pháp của XML thay vì sử dụng Javascript. Các XML elements, attributes và children được chuyển đổi thành các đối số truyền vào React.createElement.

vậy javascript thì hầu như ai cũng biết rồi vậy cùng nhắc lại xml và cú pháp của xml nhé

XML là viết tắt của từ eXtensible Markup Language, hay còn gọi là ngôn ngữ đánh dấu mở rộng do W3C đề nghị với mục đích tạo ra các ngôn ngữ đánh dấu khác. Đây là một tập hợp con đơn giản có thể mô tả nhiều loại dữ liệu khác nhau nên rất hữu ích trong việc chia sẻ dữ liệu giữa các hệ thống. Điển hình nhất là ngôn ngữ đánh dấu siêu văn bản HTML sử dụng cú pháp của XML để tạo nên và nó có các bộ phần tử và thuộc tính không mềm dẻo nên chỉ có tác dụng trong việc trình bày dữ liệu trên trình duyệt Browser.

Cú pháp của tài liệu XMLXML được xây dựng dựa vào cấu trúc NODE lồng nhau, mỗi node sẽ có một thẻ mở và một thẻ đóng như sau:

nội dungTrong đó:

là thẻ mở, tên của thẻ này do bạn tự định nghĩa. là thẻ đóng, tên của thẻ này phải trùng với tên của thẻ mở.content là nội dung của thẻ này2. Cú pháp JSX

Cú pháp của JSX cũng tương tự như XML.

Ta có thẻ mở tag:

Đóng tag:

Ở đây lưu ý tên của thẻ mở tag và đống tag phải giống nhau.ví dụ :

Click Me Ngoài ra JSX cũng có SelfClosingElement:

ví dụ:

chú ý :JSX không phải là HTML do đó bạn nên cẩn thận kẻo nhầm với cú pháp của HTML nhé.

Ví dụ trong một div element, ta định nghĩa một Class container thì ta không viết là:

…

Xem thêm: Native Vlan Là Gì – Có Những Loại Vlan Nào

mà phải viết là
…
(vì class là keyword của Javascript).Hoặc for trong label element thì phải viết thành htmlfor, ….

Ngoài ra HTML tag không cần đóng cũng được nhưng JSX cần thiết phải đóng tag nhé.

# something here3. Tại sao lại nên dùng JSXViệc sử dụng JSX trong ReactJS là không bắt buộc. Bạn có thể sử dụng chỉ JS thuần thôi. Nhưng có rất nhiều lý do cho việc nên sử dụng JSX trong ReactJS đấy.

Thứ nhất, JSX với cú pháp gần giống XML, cấu trúc cây khi biểu thị các attributes, điều đó giúp ta dễ dàng định nghĩa, quản lý được các component phức tạp, thay vì việc phải định nghĩa và gọi ra nhiều hàm hoặc object trong javascript. Khi nhìn vào cấu trúc đó cũng dễ dàng đọc hiểu được ý nghĩa của các component. Code JSX ngắn hơn, dễ hiểu hơn code JS.Thứ 2, JSX không làm thay đổi ngữ nghĩa của JavascriptThứ 3, với cách viết gần với các thẻ HTML, nó giúp những developers thông thường (ví dụ như các designer) có thể hiểu được một cách dễ dàng, từ đó có thể viết hoặc sửa code mà không gặp nhiều khó khăn.Ví du với đoạn code JSX như sau:

Children Text
;;var gameScores = { player1: 2, player2: 5}; Scores ;Code Javascipt tương đương sẽ là:

React.createElement(“div”, {className: “red”}, “Children Text”);React.createElement(MyCounter, {count: 3 + 5});React.createElement(DashboardUnit, {“data-index”: “2”}, React.createElement(“h1”, null, “Scores”), React.createElement(Scoreboard, {className: “results”, scores: gameScores}));Vậy bạn hiểu nên dùng jsx vì sao rồi chứ

4. Nhúng Biểu thức trong JSX

Bạn có thể nhúng bất kỳ biểu thức JavaScript nào trong JSX bằng cách đóng nó trong dấu ngoặc nhọn. Ví dụ: 2 + 2, user.firstName, và formatName (user) là tất cả các biểu thức hợp lệ:

function formatName(user) { return user.firstName + ” ” + user.lastName;}const user = { firstName: “Harper”, lastName: “Perez”};const element = ( Hello, {formatName(user)}! );ReactDOM.render( element, document.getElementById(“root”));5. JSX cũng là biểu thứcSau khi biên dịch, biểu thức JSX trở thành các đối tượng JavaScript thông thường. Điều này có nghĩa là bạn có thể sử dụng JSX bên trong các câu lệnh if và cho các vòng lặp, gán nó cho các biến, chấp nhận nó như các đối số, và trả về nó từ các hàm:

function getGreeting(user) { if (user) { return Hello, {formatName(user)}!; } return Hello, Stranger.;}6.Thuộc tính chỉ định với JSXBạn có thể sử dụng dấu ngoặc kép để xác định chuỗi literals như các thuộc tính:

const element =
;Bạn cũng có thể sử dụng dấu ngoặc nhọn để nhúng một biểu thức JavaScript trong một thuộc tính:

const element = ;Không đặt dấu ngoặc kép quanh dấu ngoặc nhọn khi nhúng một biểu thức JavaScript trong một thuộc tính. Nếu không, JSX sẽ coi thuộc tính là một chuỗi chữ chứ không phải là một biểu thức. Bạn nên sử dụng dấu ngoặc kép (cho giá trị chuỗi) hoặc dấu ngoặc nhọn (cho các biểu thức), nhưng không phải cả hai trong cùng một thuộc tính.

Xem thêm: Sheer Là Gì – Nghĩa Của Từ Sheer, Từ Từ điển Anh

7. Chỉ định children với JSX

Nếu một thẻ trống, bạn có thể đóng nó lại ngay lập tức với />, như XML:

const element = ;JSX có thể chứa children

const element = (
Hello!

Good to see you here.

Chuyên mục: Hỏi Đáp