React JSX
React JSX là gì? JSX là viết tắt của Javascript XML.
JSX là phần mở rộng của ngôn ngữ JavaScript dựa trên ES6 và được dịch sang JavaScript thông thường khi chạy.
JSX được dùng để viết HTML trong React, nó có cách viết đơn giản và dễ sử dụng.
Cách viết code JSX trong React App.
JSX cho phép chúng ta viết các phần tử HTML bằng Javascript và đặt chúng vào DOM mà không cần sử dụng phương thức createElement() hoặc appendChild().
JSX chuyển các thẻ HTML thành các thành phần React.
Lưu ý: Bạn không nhất thiết phải sử dụng JSX trong React.Tuy nhiên bạn nên sử dụng JSX để viết code React App.Bởi vì JSX sẽ giúp viết code đơn giản và dễ dàng hơn.
Để hiểu về cách viết code React bằng JSX các bạn xem 2 ví dụ bên dưới đây.
Ví dụ 1: Code React sử dụng JSX .
Ví dụ
const myElement = <h2> Đây là cách viết code React sử dụng JSX !</h2>;
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);
Ví dụ 2: Code React không sử dụng JSX.
Ví dụ
const myElement = React.createElement('h2', {}, 'Đây là cách viết code React không sử dụng JSX !');
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);
Như các bạn có thể thấy ở ví dụ 1 có cách viết đơn giản hơn sử dụng JSX, nó có thể viết HTML trực tiếp bên trong Javascript mà không cần phải dùng hàm createElement().
Cú pháp thẻ JSX trong React:
-Thẻ JSX phải có thẻ đóng />.
-Thẻ JSX phải viết bên trong một cặp thẻ cấp cao nhất (Top level element) <div> … </div> hoặc <>…</>
Ví dụ JSX phải có thẻ đóng
function AboutPage() {
return (
<>
<h1>Giới Thiệu</h1>
<p>Xin Chào !.<br /> Đây là cách sử dụng JSX trong React </p>
</>
);
}
Ví dụ JSX viết trong cặp thẻ div
function AboutPage() {
return (
<div>
<h1>Giới Thiệu</h1>
<p>Xin Chào !.<br /> Đây là cách sử dụng JSX trong React </p>
</div>
);
}
-Thuộc tính CSS className trong React JSX:
Như các bạn biết thuộc tính class là thuộc tính được sử dụng nhiều trong HTML, nhưng vì JSX được hiển thị dưới dạng JavaScript và từ khóa class là một từ dành riêng trong JavaScript nên bạn không được phép sử dụng nó trong JSX.
Trong JSX sử dụng thuộc tính className thay cho thuộc tính class.Khi JSX được hiển thị nó sẽ dịch các thuộc tính className thành thuộc tính class.
Ví dụ sử dụng className trong React JSX.
<img class="img-size" className='my-Photo'></img>
Trong file CSS App.css viết như sau:
.my-Photo{
border-radius: 50%;
border: 1px solid Red;
width: 50px;
height: 50px;
}
-Hiển thị dữ liệu (Show data) trong React JSX.
Trong React JSX sử dụng dấu { } để hiển thị dữ liệu.
Ví dụ
function ShowEmployee(){
const user = {name:"Hoàng Văn Lưu", phone:"0973551833"};
return(
<div>
<table>
<tr>
<td>Họ Tên: </td>
<td>{user.name}</td>
</tr>
<tr>
<td>Số Điện Thoại:</td>
<td> {user.phone}</td>
</tr>
</table>
</div>
);
}