ReactJS - JSX
React sử dụng JSX để tạo khuôn mẫu thay vì JavaScript thông thường. Tuy nhiên, không cần thiết phải sử dụng nó, sau đây là một số ưu điểm đi kèm với nó.
- Nó nhanh hơn vì nó thực hiện tối ưu hóa trong khi biên dịch mã sang JavaScript.
- Nó cũng là loại an toàn và hầu hết các lỗi có thể mắc phải trong quá trình biên dịch.
- Nó giúp bạn viết các mẫu dễ dàng và nhanh chóng hơn nếu bạn đã quen với HTML.
Sử dụng JSX
JSX trông giống như một HTML thông thường trong hầu hết các trường hợp. Chúng tôi đã sử dụng nó trong phầnThiết lập Môi trường. Xem mã từ App.jsx nơi chúng tôi đang trả về div .
App.jsx
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
Hello World!!!
</div>
);
}
}
export default App;
Mặc dù nó tương tự như HTML, nhưng có một số điều chúng ta cần lưu ý khi làm việc với JSX.
Các phần tử lồng nhau
Nếu chúng ta muốn trả về nhiều phần tử hơn, chúng ta cần bọc nó bằng một phần tử vùng chứa. Lưu ý cách chúng ta đang sử dụng div làm trình bao bọc cho các phần tử h1 , h2 và p .
App.jsx
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
<h1>Header</h1>
<h2>Content</h2>
<p>This is the content!!!</p>
</div>
);
}
}
export default App;
Thuộc tính
Chúng ta có thể sử dụng các thuộc tính tùy chỉnh của riêng mình ngoài các thuộc tính và thuộc tính HTML thông thường. Khi chúng ta muốn thêm thuộc tính tùy chỉnh, chúng ta cần sử dụng tiền tố data- . Trong ví dụ sau, chúng tôi đã thêm data-myattribute làm thuộc tính của phần tử p .
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
<h1>Header</h1>
<h2>Content</h2>
<p data-myattribute = "somevalue">This is the content!!!</p>
</div>
);
}
}
export default App;
Biểu thức JavaScript
Các biểu thức JavaScript có thể được sử dụng bên trong JSX. Chúng ta chỉ cần bọc nó bằng dấu ngoặc nhọn {} . Ví dụ sau sẽ hiển thị 2 .
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
<h1>{1+1}</h1>
</div>
);
}
}
export default App;
Chúng ta không thể sử dụng các câu lệnh if else bên trong JSX, thay vào đó chúng ta có thể sử dụng các biểu thức có điều kiện (bậc ba) . Trong ví dụ sau, biến i bằng 1 nên trình duyệt sẽ hiển thị true , Nếu chúng ta thay đổi nó thành một số giá trị khác, nó sẽ hiển thị false .
import React from 'react';
class App extends React.Component {
render() {
var i = 1;
return (
<div>
<h1>{i == 1 ? 'True!' : 'False'}</h1>
</div>
);
}
}
export default App;
Tạo kiểu
React khuyên bạn nên sử dụng các kiểu nội tuyến. Khi chúng ta muốn thiết lập các kiểu nội tuyến, chúng ta cần sử dụng cú pháp camelCase . React cũng sẽ tự động thêm px sau giá trị số trên các phần tử cụ thể. Ví dụ sau đây cho thấy cách thêm nội tuyến myStyle vào phần tử h1 .
import React from 'react';
class App extends React.Component {
render() {
var myStyle = {
fontSize: 100,
color: '#FF0000'
}
return (
<div>
<h1 style = {myStyle}>Header</h1>
</div>
);
}
}
export default App;
Comments trong react
Khi viết nhận xét, chúng ta cần đặt dấu ngoặc nhọn {} khi chúng ta muốn viết nhận xét trong phần con của thẻ. Bạn nên luôn sử dụng {} khi viết nhận xét, vì chúng tôi muốn nhất quán khi viết ứng dụng.
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
<h1>Header</h1>
{//End of the line Comment...}
{/*Multi line comment...*/}
</div>
);
}
}
export default App;
Quy ước đặt tên
Các thẻ HTML luôn sử dụng tên thẻ viết thường , trong khi các thành phần React bắt đầu bằng chữ hoa .
Lưu ý - Bạn nên sử dụng className và htmlFor làm tên thuộc tính XML thay vì class và for .
Điều này được giải thích trên trang chính thức của React là -
Vì JSX là JavaScript nên các định danh như class và for không được khuyến khích làm tên thuộc tính XML. Thay vào đó, các thành phần React DOM yêu cầu các tên thuộc tính DOM tương ứng như className và htmlFor .
Bài viết nổi bật
Bài viết nổi bật