Nó được gọi là JSX và nó là phần mở rộng cú pháp của JavaScript. Chúng tôi khuyên bạn nên sử dụng nó với React để mô tả giao diện người dùng trông như thế nào. JSX có thể khiến bạn liên tưởng đến một ngôn ngữ mẫu, nhưng nó có đầy đủ sức mạnh của JavaScript JSX tạo ra các “yếu tố” React. Chúng ta sẽ khám phá việc hiển thị chúng cho DOM trong phần tiếp theo. Dưới đây, bạn có thể tìm thấy kiến thức cơ bản về JSX cần thiết để bắt đầu Tại sao lại là JSX?React chấp nhận thực tế rằng logic hiển thị vốn đã được kết hợp với logic UI khác. cách các sự kiện được xử lý, cách trạng thái thay đổi theo thời gian và cách dữ liệu được chuẩn bị để hiển thị Thay vì phân tách các công nghệ một cách giả tạo bằng cách đặt đánh dấu và logic vào các tệp riêng biệt, React phân tách các mối quan tâm bằng các đơn vị được ghép lỏng lẻo gọi là “thành phần” chứa cả hai. Chúng ta sẽ quay lại các thành phần trong phần tiếp theo, nhưng nếu bạn chưa thấy thoải mái khi đặt đánh dấu trong JS, bài nói chuyện này có thể thuyết phục bạn bằng cách khác React không yêu cầu sử dụng JSX, nhưng hầu hết mọi người thấy nó hữu ích như một công cụ hỗ trợ trực quan khi làm việc với giao diện người dùng bên trong mã JavaScript. Nó cũng cho phép React hiển thị các thông báo lỗi và cảnh báo hữu ích hơn Với cách đó, chúng ta hãy bắt đầu Nhúng biểu thức vào JSXTrong ví dụ dưới đây, chúng tôi khai báo một biến có tên là const name = 'Josh Perez';const element = <h1>Hello, {name}</h1>;
2 và sau đó sử dụng nó bên trong JSX bằng cách gói nó trong dấu ngoặc nhọnconst name = 'Josh Perez';const element = <h1>Hello, {name}</h1>;
Bạn có thể đặt bất kỳ biểu thức JavaScript hợp lệ nào bên trong dấu ngoặc nhọn trong JSX. Ví dụ: const name = 'Josh Perez';const element = <h1>Hello, {name}</h1>;
3, const name = 'Josh Perez';const element = <h1>Hello, {name}</h1>;
4 hoặc const name = 'Josh Perez';const element = <h1>Hello, {name}</h1>;
5 đều là các biểu thức JavaScript hợp lệTrong ví dụ bên dưới, chúng tôi nhúng kết quả của việc gọi một hàm JavaScript, const name = 'Josh Perez';const element = <h1>Hello, {name}</h1>;
5, vào một phần tử const name = 'Josh Perez';const element = <h1>Hello, {name}</h1>;
7function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const user = {
firstName: 'Harper',
lastName: 'Perez'
};
const element = (
<h1>
Hello, {formatName(user)}! </h1>
);
Dùng thử trên CodePen Chúng tôi chia JSX thành nhiều dòng để dễ đọc. Mặc dù không bắt buộc nhưng khi thực hiện việc này, chúng tôi cũng khuyên bạn nên đặt nó trong ngoặc đơn để tránh những cạm bẫy của việc chèn dấu chấm phẩy tự động JSX cũng là một biểu thứcSau khi biên dịch, các biểu thức JSX trở thành các lệnh gọi hàm JavaScript thông thường và đánh giá các đối tượng JavaScript Điều này có nghĩa là bạn có thể sử dụng JSX bên trong các câu lệnh const name = 'Josh Perez';const element = <h1>Hello, {name}</h1>;
8 và vòng lặp const name = 'Josh Perez';const element = <h1>Hello, {name}</h1>;
9, gán nó cho các biến, chấp nhận nó làm đối số và trả về nó từ các hàmconst name = 'Josh Perez';const element = <h1>Hello, {name}</h1>;
0Chỉ định thuộc tính với JSXBạn có thể sử dụng dấu ngoặc kép để chỉ định chuỗi ký tự làm thuộc tính const name = 'Josh Perez';const element = <h1>Hello, {name}</h1>;
1Bạn cũng có thể sử dụng dấu ngoặc nhọn để nhúng biểu thức JavaScript vào thuộc tính const name = 'Josh Perez';const element = <h1>Hello, {name}</h1>;
2Không đặt dấu ngoặc kép quanh dấu ngoặc nhọn khi nhúng biểu thức JavaScript vào thuộc tính. Bạn nên sử dụng dấu ngoặc kép (đối với giá trị chuỗi) hoặc dấu ngoặc nhọn (đối với biểu thức), chứ không nên sử dụng cả hai trong cùng một thuộc tính Cảnh báo Vì JSX gần với JavaScript hơn là HTML, nên React DOM sử dụng quy ước đặt tên thuộc tính function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const user = {
firstName: 'Harper',
lastName: 'Perez'
};
const element = (
<h1>
Hello, {formatName(user)}! </h1>
);
0 thay vì tên thuộc tính HTMLVí dụ: function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const user = {
firstName: 'Harper',
lastName: 'Perez'
};
const element = (
<h1>
Hello, {formatName(user)}! </h1>
);
1 trở thành function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const user = {
firstName: 'Harper',
lastName: 'Perez'
};
const element = (
<h1>
Hello, {formatName(user)}! </h1>
);
2 trong JSX và function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const user = {
firstName: 'Harper',
lastName: 'Perez'
};
const element = (
<h1>
Hello, {formatName(user)}! </h1>
);
3 trở thành function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const user = {
firstName: 'Harper',
lastName: 'Perez'
};
const element = (
<h1>
Hello, {formatName(user)}! </h1>
);
4
Chỉ định trẻ em với JSXNếu một thẻ trống, bạn có thể đóng nó ngay lập tức bằng function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const user = {
firstName: 'Harper',
lastName: 'Perez'
};
const element = (
<h1>
Hello, {formatName(user)}! </h1>
);
5, như XMLconst name = 'Josh Perez';const element = <h1>Hello, {name}</h1>;
9Thẻ JSX có thể chứa con const name = 'Josh Perez';const element = <h1>Hello, {name}</h1>;
0JSX ngăn chặn các cuộc tấn công tiêm chíchViệc nhúng đầu vào của người dùng vào JSX là an toàn const name = 'Josh Perez';const element = <h1>Hello, {name}</h1>;
1Theo mặc định, React DOM thoát mọi giá trị được nhúng trong JSX trước khi hiển thị chúng. Do đó, nó đảm bảo rằng bạn không bao giờ có thể tiêm bất kỳ thứ gì không được viết rõ ràng trong ứng dụng của mình. Mọi thứ được chuyển đổi thành một chuỗi trước khi được hiển thị. Điều này giúp ngăn chặn các cuộc tấn công XSS (cross-site-scripting) JSX đại diện cho các đối tượngBabel biên dịch JSX thành _______76 cuộc gọi Hai ví dụ này giống hệt nhau const name = 'Josh Perez';const element = <h1>Hello, {name}</h1>;
3const name = 'Josh Perez';const element = <h1>Hello, {name}</h1>;
0function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const user = {
firstName: 'Harper',
lastName: 'Perez'
};
const element = (
<h1>
Hello, {formatName(user)}! </h1>
);
6 thực hiện một số kiểm tra để giúp bạn viết mã không có lỗi nhưng về cơ bản, nó tạo ra một đối tượng như thế nàyconst name = 'Josh Perez';const element = <h1>Hello, {name}</h1>;
1Những đối tượng này được gọi là "Các phần tử phản ứng". Bạn có thể coi chúng như những mô tả về những gì bạn muốn thấy trên màn hình. React đọc các đối tượng này và sử dụng chúng để xây dựng DOM và cập nhật nó Chúng ta sẽ khám phá việc kết xuất các phần tử React cho DOM trong phần tiếp theo Mẹo Chúng tôi khuyên bạn nên sử dụng định nghĩa ngôn ngữ “Babel” cho trình soạn thảo mà bạn chọn để cả mã ES6 và mã JSX đều được đánh dấu chính xác
Làm cách nào để chuyển đổi React sang HTML?
Ví dụ . nhập Phản ứng từ 'phản ứng'; nhập ReactHTMLConverter từ 'Reac-html-converter/node'; lớp Kiểm tra mở rộng React. Thành phần { kết xuất () ( return {this. props. text} ;. bộ chuyển đổi const = ReactHTMLConverter mới(); Làm cách nào để chuyển đổi HTML thành văn bản trong React js?
Easiest - Use Unicode, save the file as UTF-8 and set the charset to UTF-8. {'First · Second'} . An toàn hơn - Sử dụng số Unicode cho thực thể bên trong chuỗi Javascript. . Hoặc một mảng hỗn hợp với các chuỗi và phần tử JSX. . Phương sách cuối cùng - Chèn HTML thô bằng cách sử dụng một cách nguy hiểmSetInnerHTML React có dịch sang HTML không?
Có, cả ứng dụng Angular và React đều có thể (và thường được) "xây dựng" thành HTML, CSS và JS tĩnh .
Chúng ta có thể viết HTML trong React không?
JSX cho phép chúng ta viết HTML bằng React . JSX giúp viết và thêm HTML dễ dàng hơn trong React.
| 
