Ngôn ngữ đánh dấu siêu văn bản [HTML] là ngôn ngữ tiêu chuẩn cho các tài liệu xác định cấu trúc của một trang web. HTML là một ngôn ngữ rất quan trọng trong phát triển web. Mã của bạn có trong HTML ban đầu hoặc biên dịch cho nó để các trình duyệt có thể đọc nó. JSX, mặt khác, có nghĩa là phần mở rộng cú pháp JavaScript hoặc JavaScript XML như một số người muốn đặt nó. Nó được tạo ra như một đường cú pháp cho Ngoài ra, điều đó có nghĩa là các từ khóa dành riêng của JavaScript phải được giữ nguyên. Và đó là lý do tại sao thuộc tính của For For trong HTML là HT HTMLFor, trong JSX, vì "cho" là một trong những từ khóa dành riêng cho JavaScript. Về mặt hỗ trợ của các trình duyệt, HTML được hỗ trợ bởi tất cả chúng. JSX, mặt khác, không bao giờ thực sự có ý định, vì vậy bạn cần một trình biên dịch như Babel hoặc Webpack để chuyển JSX vào JavaScript mà trình duyệt hiểu. Một trong những khác biệt chính giữa HTML và JSX là trong JSX, bạn phải trả về một phần tử mẹ duy nhất hoặc nó sẽ không biên dịch. Rất nhiều nhà phát triển sử dụng Trong HTML, bạn có thể tự do làm bất cứ điều gì bạn muốn vì bạn không phải trả lại một yếu tố cha mẹ duy nhất.React.createElement[]
. Đây là một phần mở rộng của JavaScript cho phép các nhà phát triển viết HTML ngay trong JavaScript. Vì vậy, khi bạn viết JSX, về mặt kỹ thuật, bạn đang viết JavaScript và HTML cùng nhau.Sự khác biệt chính giữa HTML và JSX
Bạn cần trả về một phần tử cha mẹ duy nhất trong JSX
, nhưng một loại tốt hơn mà nhiều người sử dụng là Fragment Fragment, ...
làm cho mã dễ đọc hơn.
Ở đây bạn có thể thấy rằng JSX không biên dịch vì không có yếu tố cha mẹ.
Và ở đây JSX đang biên dịch vì có một phần tử cha [đoạn].
Bạn có thể triển khai JS trực tiếp trong JSX
Trong JSX, có thể viết JavaScript trực tiếp. Bạn có thể làm điều này bằng cách đặt JavaScript vào niềng răng xoăn {...}
. Trong khi ở HTML, bạn cần một thẻ tập lệnh hoặc tệp JavaScript bên ngoài để triển khai JavaScript:
const Article = [] => {
return [
Hi campers
How's coding going
What is up?
{new Date[].toDateString[]}
{2 + 5} is seven in word
];
};
export default Article;
Tất cả các thẻ tự đóng trong jsx
Thẻ có thể tự đóng trong JSX. Đó là, có thể có là ____10 và
const Article = [] => {
return [
Hi campers
How's coding going
What is up?
{new Date[].toDateString[]}
{2 + 5} is seven in word
Name
];
};
export default Article;
1 là const Article = [] => {
return [
Hi campers
How's coding going
What is up?
{new Date[].toDateString[]}
{2 + 5} is seven in word
Name
];
};
export default Article;
2. Bạn không muốn làm điều đó, nhưng nó có thể.Các thẻ tự đóng trong HTML có thể tự đóng mà không cần chém trước khung góc vuông, đó là
const Article = [] => {
return [
Hi campers
How's coding going
What is up?
{new Date[].toDateString[]}
{2 + 5} is seven in word
Name
];
};
export default Article;
3 có thể hoạt động như const Article = [] => {
return [
Hi campers
How's coding going
What is up?
{new Date[].toDateString[]}
{2 + 5} is seven in word
Name
];
};
export default Article;
4. Nhưng trong JSX, bạn cần bao gồm dấu gạch chéo. Điều này sẽ mang lại một cái gì đó trong tâm trí - JSX phụ thuộc rất nhiều vào cú pháp HTML 4.Ở đây bạn có thể thấy rằng JSX không được biên dịch vì không có dấu gạch chéo phía trước trước khung góc bên phải của thẻ ngắt dòng.
Và ở đây bạn có thể thấy rằng JSX đang biên dịch vì có một dấu gạch chéo phía trước trong thẻ phá vỡ dòng.
ClassName và HTMLFor, không phải lớp và cho trong JSX
Để xác định tên lớp và cho các thuộc tính trong JSX, bạn không làm điều đó là
const Article = [] => {
return [
Hi campers
How's coding going
What is up?
{new Date[].toDateString[]}
{2 + 5} is seven in word
Name
];
};
export default Article;
5 hoặc const Article = [] => {
return [
Hi campers
How's coding going
What is up?
{new Date[].toDateString[]}
{2 + 5} is seven in word
Name
];
};
export default Article;
6, vì cả hai đều được bảo lưu các từ khóa trong JavaScript.Bạn thực sự tạo các thành phần lớp với từ khóa
const Article = [] => {
return [
Hi campers
How's coding going
What is up?
{new Date[].toDateString[]}
{2 + 5} is seven in word
Name
];
};
export default Article;
5. Vì vậy, để xác định tên lớp trong JSX, bạn thực hiện nó là "const Article = [] => {
return [
Hi campers
How's coding going
What is up?
{new Date[].toDateString[]}
{2 + 5} is seven in word
Name
];
};
export default Article;
8" và cho các thuộc tính cho các nhãn bạn viết "const Article = [] => {
return [
Hi campers
How's coding going
What is up?
{new Date[].toDateString[]}
{2 + 5} is seven in word
Name
];
};
export default Article;
9":const Article = [] => {
return [
Hi campers
How's coding going
What is up?
{new Date[].toDateString[]}
{2 + 5} is seven in word
Name
];
};
export default Article;
Viết tất cả các thuộc tính HTML trong Camelcase trong JSX
Bạn cần viết tất cả các thuộc tính HTML và tài liệu tham khảo sự kiện trong Camelcase trong khi viết JSX. Vì vậy,
const Article = [] => {
const sayHI = [] => {
alert["Hi Campers"];
};
return [
Hi campers
How's coding going
What is up?
{new Date[].toDateString[]}
{2 + 5} is seven in word
ALert Hi
];
};
export default Article;
0 trở thành const Article = [] => {
const sayHI = [] => {
alert["Hi Campers"];
};
return [
Hi campers
How's coding going
What is up?
{new Date[].toDateString[]}
{2 + 5} is seven in word
ALert Hi
];
};
export default Article;
1, const Article = [] => {
const sayHI = [] => {
alert["Hi Campers"];
};
return [
Hi campers
How's coding going
What is up?
{new Date[].toDateString[]}
{2 + 5} is seven in word
ALert Hi
];
};
export default Article;
2 trở thành const Article = [] => {
const sayHI = [] => {
alert["Hi Campers"];
};
return [
Hi campers
How's coding going
What is up?
{new Date[].toDateString[]}
{2 + 5} is seven in word
ALert Hi
];
};
export default Article;
3, v.v.const Article = [] => {
const sayHI = [] => {
alert["Hi Campers"];
};
return [
Hi campers
How's coding going
What is up?
{new Date[].toDateString[]}
{2 + 5} is seven in word
ALert Hi
];
};
export default Article;
Viết các kiểu nội tuyến dưới dạng đối tượng trong JSX
Và cuối cùng, để xác định các kiểu nội tuyến cho JSX, bạn viết nó thành một đối tượng, với các thuộc tính trong Camelcase, các giá trị trong trích dẫn, và sau đó bạn chuyển nó nội tuyến cho JSX.
Điều này có nghĩa là bạn phải mở một thuộc tính kiểu và sử dụng niềng răng xoăn thay vì trích dẫn. Điều này trái ngược với HTML nơi bạn tự do xác định hàng triệu kiểu ngay bên trong thẻ mở mà không viết chúng làm đối tượng và đưa chúng vào trích dẫn:
const Article = [] => {
const inlineStyle = {
color: "#2ecc71",
fontSize: "26px",
};
return [
Hi campers
How's coding going
What is up?
{new Date[].toDateString[]}
{2 + 5} is seven in word
ALert Hi
];
};
export default Article;
Bạn có thể chọn viết đối tượng trực tiếp vào thuộc tính kiểu - nghĩa là, bằng cách mở hai niềng răng xoăn và đặt các thuộc tính và giá trị bên trong.
Nhưng một cách sạch hơn là xác định đối tượng bên ngoài JSX, và sau đó chuyển nó vào thẻ mở.
const Article = [] => {
return [
Hi campers
How's coding going
What is up?
{new Date[].toDateString[]}
{2 + 5} is seven in word
];
};
export default Article;
Lưu ý rằng bạn không nên sử dụng Kiểu nội tuyến trong HTML đơn giản - bạn không muốn phá hỏng SEO của trang web của mình.
Đó là nó!
Cảm ơn bạn đã đọc. Để kết nối với tôi, hãy kiểm tra danh mục đầu tư của tôi hoặc theo dõi tôi trên Twitter, nơi tôi dành phần lớn thời gian để tweet và tham gia vào bất cứ điều gì phát triển web.
Học mã miễn phí. Chương trình giảng dạy nguồn mở của Freecodecamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu