資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學在 React.js 中使用 JSX
JSX 就像一種具有 JavaScript 能力的模板語言。它有助於建立 React 元素。它是 JavaScript 的擴充套件，用於包含 UI 元素。
示例
let message = <h1>Hello World </h1>;
h1 標籤是眾所周知的 HTML 標籤，但使用 JSX，我們建立了一個包含 h1 標籤和“Hello World”訊息的變數。
JSX 的用途
雖然建立 React 元素並非必須使用 JSX，但它更直觀，並有助於更容易地理解程式碼。React 秉承將 UI 邏輯和渲染邏輯放在一起的理念。
我們可以構建不同的鬆散耦合元件來實現關注點分離。
Expression embedding :
let name = ‘Steve’;
const welcomeMessage = <h1>Welcome, {name} </h1>;
ReactDOM.render(
welcomeMessage,
document.getElementById(‘app’)
);在上面的例子中，name 是一個值為 'Steve' 的變數，它用花括號嵌入到 const welcomeMessage 中。
任何有效的 JavaScript 表示式，包括函式，都可以在 JSX 中的花括號內使用。例如：{ 5 * 5 } 將返回 25。
在 JSX 表示式中使用函式的示例：
function getFullName(customer) {
return customer.firstName + ' ' + customer.lastName;
}
const customer = {
firstName: 'Amit',
lastName: 'Sharma'
};
const welcomeCustomer = (
<h1>
Welcome, { getFullName(customer) } !
</h1>
);
ReactDOM.render(
welcomeCustomer,
document.getElementById('app')
);我們可以透過將多行 JSX 程式碼包裝在括號 () 中來新增它們。這也避免了自動分號插入的問題。編譯時，JSX 程式碼將轉換為常規 JavaScript 程式碼。
JSX 元素可以作為引數傳遞，也可以作為函式呼叫的返回值。它也可以用於條件語句。
JSX 元素上的屬性
JSX 元素上使用的屬性名稱遵循駝峰命名法。例如：用於新增 CSS 類的類名屬性命名為 className（因為 class 是 JavaScript 中的保留關鍵字，所以使用 className）。
tabIndex - 在常規 HTML 元素中，它將是小寫的 tabindex，但在 JSX 中，它將是 tabIndex。
我們可以使用字串字面量（例如 className="App"）或使用帶花括號的 JSX 表示式（例如 className={Test}）來為屬性賦值。
JSX 元素可以包含子元素，如果為空，則可以用 /> 關閉。
JSX 還透過在渲染之前轉義嵌入在 JSX 表示式中的值來幫助防止跨站指令碼攻擊 (XSS)。
Babel 將 JSX 編譯成常規 JavaScript 程式碼。示例：
const message = ( <div className="welcome"> Welcome ! </div> );
將轉換為：
const message = React.createElement(
'div',
{className: 'welcome'},
' Welcome !'
);
瀏覽量：321
