BÀI 3 - JSX TRONG REACTJS
BÀI 3 - JSX TRONG REACTJS
Embedded Files
JSX là viết tắt là Javascript XML, một template languges nhưng nó lại mang hầu hết 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 cho việc xây dựng bố cục thay vì javascript thông thường. JSX giúp tạo ra các React 'elements'. Việc sử dụng nó trong ReactJS rất hữu ích bởi:
JSX giúp cho việc xây dựng các ứng dụng React một cách nhanh hơn, dễ tối ưu trong việc complie code sang javascript.
JSX rất dễ xem các lỗi trong quá trình triển khai bởi hầu hết các lỗi sẽ được hiển thị trong quá trình compile, không như các đoạn mã HTML có thể thừa thiếu các thể div khiến giao diện bị hiển thị sai. JSX lại hoàn toàn ngược lại, khi bạn quên đóng div chẳng hạn thì nó lập tực sẽ hiển thị lỗi.
Cú pháp khá giống với HTML nên dễ dàng cho việc viết chuyển đổi.
JSX trong ReactJS
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.
Gán một biểu thức trong JSX
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 { :
const name = 'Hama.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 :
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const user = {
firstName: 'Nguyễn',
lastName: 'Thúy'
};
const element = (
<h1>
Xin chào, {formatName(user)}!
</h1>
);
ReactDOM.render(
element,
document.getElementById('root')
);
JSX là một biểu thức
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:
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
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 :
const element = <div tabIndex="0"></div>;
hay chỉ định attributes với JSX bằng biểu thức javascript như này:
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 :
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
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ụ :
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:
//Đúng cú pháp
//Phải bọc nó bằng một tags
const element = (
<div>
<h1>Hello</h1>
<p>Welcome to Freetuts</p>
</div>
);
//Viết sai
//Các phần từ không được bọc
const element = (
<h1>Hello</h1>
<p>Welcome to Freetuts</p>
);
JSX Object
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ụ :
const element = React.createElement(
"p",
{ className: "welcome" },
"Welcome to Hama.net!"
);
=> const element = <p className="welcome">Welcome to Hama.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ư:
const element = {
type: "p",
props: {
className: "welcome",
children: "Welcome to Hama.net!"
}
};
const element = <p className="welcome">Welcome to Hama.net!</p>;
Ngăn chặn Injection Attacks
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.
//Khi sử dụng trong React sẽ không nguy hiểm
const content = '<script>XSS</script>'
const element = <p className="welcome">{content}</p>;
Page updated
Google Sites
Report abuse