Trong bài viết này, chúng ta sẽ khám phá JSX trong ReactJS. Ở bài viết trước, mình đã giới thiệu những kiến thức cơ bản nhất về JSX. Bài viết này sẽ tiếp tục và đi sâu vào cú pháp của JSX trong ReactJS, cũng như cách sử dụng nó.
1. JSX là gì?
JSX là viết tắt của JavaScript XML, là một ngôn ngữ mẫu (template language) có hầu hết các tính năng của JavaScript. Nó cho phép bạn viết các đoạn mã HTML trong React một cách dễ dàng và có cấu trúc hơn. React sử dụng JSX để xây dựng cấu trúc của ứng dụng thay vì sử dụng JavaScript thông thường. JSX giúp tạo ra các ‘elements’ trong React.
Việc sử dụng JSX trong ReactJS mang lại nhiều lợi ích như:
– JSX giúp việc xây dựng các ứng dụng React nhanh hơn và dễ dàng tối ưu hóa khi biên dịch sang JavaScript.
– JSX giúp dễ dàng phát hiện lỗi trong quá trình triển khai, vì hầu hết các lỗi sẽ được hiển thị trong quá trình biên dịch, trái ngược với việc các đoạn mã HTML có thể thiếu các thẻ div và dẫn đến hiển thị giao diện sai.
– Cú pháp của JSX khá giống với HTML, giúp cho việc viết và chuyển đổi dễ dàng hơn.
Nếu quan tâm, bạn có thể tìm hiểu thêm về JSX để có được cái nhìn toàn diện hơn.
2. JSX trong ReactJS
Trong ReactJS không bắt buộc bạn phải sử dụng JSX nhưng hầu hết mọi nguời đều sử dụng nó bởi đây là cách hữu ích nhất để làm việc với các UI bên trong Javascript code. JSX cũng cho phép React hiển thị đầy đủ các lỗi nhất và hiệu quả hơn.
Bài viết này được đăng tại [free tuts .net]
Gán một biểu thức trong JSX
Giả sử bạn muốn gán một biểu thức trong JSX, trong ví dụ bên dưới mình sẽ gán biến name vào trong JSX bằng cách bọc nó trong dấu { :
|
1
2
3
4
5
6
7
|
const name = 'Freetuts.net';const element = <h1>Welcome to {name}</h1>;ReactDOM.render(element,document.getElementById('root')); |
Ngoài ra bạn có thêm bất cứ biểu thức javscript nào vào trong dấu ngoặc kép này như info.name, 1+1, formatMoney(10000),…Như trong ví dụ dưới đây mình sử dụng hàm formatName :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
function formatName(user) {return user.firstName + ' ' + user.lastName;}const user = {firstName: 'Nguyễn',lastName: 'Trí'};const element = (<h1>Xin chào, {formatName(user)}!</h1>);ReactDOM.render(element,document.getElementById('root')); |
JSX là một biểu thức
Sau khi complie, các đoạn đoạn mã JSX sẽ như các object Javasript thông thường, cho phép bạn có thể gọi hoặc làm bất cứ gì với nó.
Có nghĩa là bạn có thể sử dụng JSX bên trong if, for, function,…hay là chỉ định nó làm giá trị của một biến,..Trong ví dụ mình có một hàm trả về một JSX:
|
1
2
3
4
5
6
7
|
function sayHi(name) {if(name) {return <p>Xin chào, {name} !</p>}else{return <p>Xin chào bạn !</p>}} |
Chỉ định attributes với JSX
Bạn cũng có thể chỉ định một attribute trong JSX, cú pháp giống như HTML thông thường :
|
1
|
const element = <div tabIndex="0"></div>; |
hay chỉ định attributes với JSX bằng biểu thức javascript như này:
|
1
|
const element = <img src={user.avatarUrl}></img>; |
Bạn nên dùng dấu ngoặc kép ( “” ) cho giá trị chuỗi và ngoặc nhọn ( {} ) cho biểu thức như trong ví dụ trên, React khuyên chúng ta không nên dùng cả 2 cái lồng nhau như thế này :
|
1
|
const element = <div tabIndex={"1"}></div>; |
Quy ước đặt tên của JSX gần giống với HTML, React DOM sử dụng thuộc tính camelCase cho tên của thuộc tính cho phép chuyển đổi dễ hơn giữa HTML và JSX. Ví dụ trong HTML có thuộc tính class, JSX sẽ chuyển thành className, tabindex -> tabIndex.
Phần tử con trong JSX
Nếu chỉ có một tag bạn chỉ cần đóng nó bằng dấu /> như ví dụ :
|
1
|
const element = <img src={user.avatarUrl} />; |
trong trường hợp trong tag có nhiều phần tử con bạn cần phải bọc ngoài nó bằng một JSX tags:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
//Đúng cú pháp//Phải bọc nó bằng một tagsconst element = (<div><h1>Hello</h1><p>Welcome to Freetuts</p></div>);//Viết sai//Các phần từ không được bọcconst element = (<h1>Hello</h1><p>Welcome to Freetuts</p>); |
JSX Object
Để complide một JSX object thành JSX thông thường chúng ta sử dụng React.createElement() như ví dụ :
|
1
2
3
4
5
6
7
|
const element = React.createElement("p",{ className: "welcome" },"Welcome to Freetuts.net!");const element = <p className="welcome">Welcome to Freetuts.net!</p> |
JSX object cho phép bạn tạo ra các JSX dễ dàng debug hơn, ngoài ra JSX obejct còn có thể được viết theo dạng như:
|
1
2
3
4
5
6
7
8
9
|
const element = {type: "p",props: {className: "welcome",children: "Welcome to Freetuts.net!"}};const element = <p className="welcome">Welcome to Freetuts.net!</p>; |
Ngăn chặn Injection Attacks
Đây là một tính năng bảo mật của React, React DOM sẽ tiến hành escaped tất cả các giá trị bên trong JSX một cách tự động trước khi render chúng, điều này rất hữu ích cho việc ngăn chặn các hình thức tấn công bằng cách tiêm mã độc.
|
1
2
3
|
//Khi sử dụng trong React sẽ không nguy hiểmconst content = '<script>XSS</script>'const element = <p className="welcome">{content}</p>; |
JSX không chỉ giới hạn trong việc sử dụng với React. Bạn có thể sử dụng JSX với các thư viện JavaScript khác, mặc dù điều này không phổ biến. JSX có thể được cấu hình để hoạt động với bất kỳ hàm nào mà bạn định nghĩa, nhưng cần phải có một công cụ biên dịch để chuyển đổi JSX thành các lệnh gọi hàm thích hợp.
JSX là một công cụ mạnh mẽ và linh hoạt trong React, giúp các nhà phát triển xây dựng giao diện người dùng một cách hiệu quả và trực quan. Bằng cách kết hợp cú pháp HTML với sức mạnh của JavaScript, JSX mang lại sự rõ ràng và nhất quán cho mã nguồn của bạn. Việc hiểu và sử dụng JSX đúng cách là một bước quan trọng để trở thành một nhà phát triển React thành công. Với những kiến thức cơ bản và nâng cao đã được trình bày, bạn sẽ có một nền tảng vững chắc để tiếp tục khám phá và tận dụng tối đa các tính năng của React và JSX.. Trong bài này chúng ta đã cùng nhau đi tìm hiểu về JSX trong ReactJS, đây là kiến thức rất cơ bản về nó nhưng cũng hết sức quan trọng trong quá trình làm việc với ReactJS. Mong rằng bài viết sẽ giúp ích cho bạn.
