傳統上，開發者將標記和邏輯分離到不同的檔案中，用HTML來做結構，用CSS來做造型，然後寫JavaScript來處理互動和資料操作。
但是，如果有一種方法可以將這些技術結合起來，簡化開發過程，使其更容易建立複雜的使用者介面，那會怎麼樣呢？這就是JSX的作用。
在這篇文章中，你將瞭解什麼是JSX，它是如何工作的，以及為什麼它對在網路開發中構建動態使用者介面很重要。
讓我們更詳細地探討這一革命性的技術。
什麼是JSX?
JSX(JavaScript XML)是JavaScript的一個語法擴充套件，它允許開發者在JavaScript檔案中編寫類似HTML的程式碼。它是由Meta（以前的Facebook）開發的。
JSX的語法類似於HTML，有開啟和關閉標籤、屬性和巢狀元素。
例如，你可以寫下面的JSX程式碼來渲染一個簡單的標題元素：
const heading = <h1>Hello, JSX!</h1>;
這段程式碼看起來像HTML，但它是JavaScript。const關鍵字建立了一個名為標題的新變數，該變數的值是JSX表示式的結果。
JSX是如何工作的？
JSX在瀏覽器中執行之前被轉換為普通的JavaScript。這種轉換是通過一個叫做轉碼器的工具完成的。最流行的JSX轉碼器是Babel。
Babel將JSX程式碼轉換為一系列的函式呼叫。這些函式呼叫相當於JSX中寫的類似HTML的程式碼。然後，瀏覽器可以執行產生的JavaScript程式碼。
例如，下面的JSX程式碼：
const element = <h1>Hello, world!</h1>;
被轉化為以下JavaScript程式碼：
const element = React.createElement("h1", null, "Hello, world!");
這種轉換使開發人員能夠以熟悉和容易閱讀的語法編寫程式碼，同時仍然利用JavaScript的力量和靈活性。
JSX和React
JSX是React的一個組成部分，允許開發者在一個檔案中編寫這些元件的標記和邏輯。
下面是一個React元件中的JSX程式碼的簡單例子：
import React from 'react';
function Greet() {
return <h1>Hello World!</h1>;
}
export default Greeting;
在這個例子中，你有一個名為 Greet 的功能元件，該元件渲染了一個帶有問候資訊的 h1 元素。
React編譯器將把這段程式碼轉化為可以被瀏覽器執行的優化的JavaScript程式碼，使該元件在螢幕上呈現。
下面是React編譯器將把 Greet 元件轉換成的內容：
import React from 'react'
function Greet() {
return React.createElement("h1", {}, "Hello, World!")
}
在這段程式碼中，JSX程式碼已被轉化為 React.createElement 呼叫，建立與原始JSX程式碼相同的結構和內容。
這就是React編譯JSX程式碼時在幕後發生的事情，使其能夠被瀏覽器執行。然而，轉換後的程式碼可能比原始JSX程式碼的可讀性差。
在React第17版中，引入了新的JsX轉換功能，它自動從React包的新入口點匯入特殊函式，允許開發人員使用JsX，而不必在檔案頂部匯入React。
// Inserted by a compiler (don't import it yourself!)
import {jsx as _jsx} from 'react/jsx-runtime';
function App() {
return _jsx('h1', { children: 'Hello world' });
}
使用JSX的JavaScript表示式
在JSX中，JavaScript表示式可以直接嵌入到標記中以動態生成內容。這允許開發者使用JavaScript程式碼來計算值，執行操作，並在他們的JSX元件中有條件地渲染內容。
這個例子顯示瞭如何在JJSX中使用兩個JavaScript表示式：
import React from 'react';
const MyComponent = () => {
const name = 'John';
const age = 30;
return (
<div>
<h1>Hello, {name}!</h1>
<p>You are {age} years old.</p>
<p>Next year, you will be {age + 1} years old.</p>
{age >= 18 && <p>You are an adult.</p>}
</div>
);
};
export default MyComponent;
在這個例子中，像{name}, {age}, {age + 1}, 和 {age >= 18 && <p>You are an adult.</p>} 這樣的JavaScript表示式被用來根據姓名和年齡變數的值來動態渲染內容。
在JSX中使用CSS
CSS可以通過各種方式應用於JSX元件，如內聯樣式、獨立的CSS檔案或CSS-in-JS庫。內聯樣式是使用JavaScript物件直接在JSX標記中定義的，而單獨的CSS檔案或CSS-in-JS庫允許元件的外部和模組化樣式。
這個例子顯示瞭如何使用JSX中的style屬性，將使用JavaScript物件定義的內聯樣式應用於元素：
import React from 'react';
const MyComponent = () => {
const styles = {
backgroundColor: 'blue',
color: 'white',
padding: '10px'
};
return (
<div style={styles}>
<h1>Hello, World!</h1>
<p>This is a component with inline styles.</p>
</div>
);
};
export default MyComponent;
在這個例子中，像 backgroundColor 、 color 和padding這樣的CSS屬性被設定為style物件中的鍵值對，而它們的值是代表CSS值的字串。
注意：雖然內聯樣式提供了靈活性和簡單性，但建議使用CSS類或CSS-in-JS庫，以便在更大的應用程式中獲得更復雜或可重複使用的樣式。
6條重要的JSX規則
在編寫JSX程式碼時，你應該遵循一些規則，以確保程式碼的有效性和易讀性。
1. 總是返回一個單一的根元素
在JSX中，你必須總是返回一個單一的根元素。這意味著你所有的JsX程式碼必須包含在一個單一的最外層元素中。例如，這是有效的JSX：
return ( <div> <h1>Hello World!</h1> <p>This is my first React component.</p> </div> )
但這並不是因為它返回兩個元素而不是一個：
return ( <h1>Hello World!</h1> <p>This is my first React component.</p> )
在將HTML程式碼轉換為JJSX時，必須牢記這一點。
2. 使用className而不是class
在HTML中，你會使用 class 屬性來指定一個元素的CSS類別。然而，在JSX中，你需要使用 className 屬性來代替。比如說：
// Good <div className="my-class">This element has a CSS class.</div> // Bad <div class="my-class">This element has a CSS class.</div>
使用 className 而不是 class 是很重要的，可以避免命名衝突，因為 class 是JavaScript中的一個保留關鍵字。
3. 對JavaScript表示式使用大括號
當你需要在JSX程式碼中包含一個JavaScript表示式時，你需要用大括號{}來包裹它。這可以用於任何事情，從顯示動態資料到有條件地渲染元件。下面是一個例子：
// Good
<div>{myVariable}</div>
// Bad
<div>myVariable</div>
你也可以在大括號內執行數學運算，如：
<p>The total cost is {25*10}</p>
另外，在你的大括號內，你可以使用三元運算子設定條件語句：
<h1>{(x) < 15 ? "Welcome" : "Goodbye"}</h1>
下面是一個用React元件的更好的例子：
function Greeting() {
const isLoggedIn = true;
return (
<div>
{isLoggedIn ? (
<h1>Welcome back!</h1>
) : (
<h1>Please log in.</h1>
)}
</div>
);
}
在這個例子中，我們定義了一個Greeting元件。該元件使用三元操作符，根據 isLoggedIn 的值，有條件地渲染一個問候語。如果 isLoggedIn 為 true，該元件將渲染一個 h1 元素，其文字為 “Welcome back!”。如果 isLoggedIn 是 false，該元件將呈現一個 h1 元素，其文字為 “Please log in”。
4. 在JSX中對大多數東西使用camelCase
在JSX中，大多數東西都使用camelCase，包括屬性、事件處理程式和變數名。這個慣例與JavaScript的命名慣例一致，有助於保持可讀性。
例如，使用 onClick 而不是 onclick ，使用 className 而不是 class 。
// Good
<button onClick={handleClick} className="btn">Click me!</button>
// Bad
<button onclick={handle_click} class="btn">Click me!</button>
5. 始終使用閉合標籤
在JSX中，你需要始終使用閉合標籤，即使它們沒有任何內容。比如說：
// Good <div></div> // Bad <div/>
6. 對空的元素使用自閉合標籤
如果你有一個沒有任何內容的元素，你可以用一個自閉合標籤來代替開閉標籤。
// Good <img src="my-image.jpg" alt="My Image"/> // Bad <img src="my-image.jpg" alt="My Image"></img>
為什麼JSX對網路開發很重要？
JSX對網路開發很重要，因為：
- 它允許開發者以更直觀和熟悉的方式構建使用者介面。
- 開發者可以使用JSX來描述他們的使用者介面的結構，而不是直接操作DOM，這種方式更像是在寫HTML。
- 它允許更有效和靈活的開發。因為JSX只是JavaScript，開發者可以利用JavaScript的所有功能來建立更復雜和動態的使用者介面。
- 它是React庫的一個重要組成部分，React庫是現代網路開發中構建使用者介面的最流行的選擇之一。如果你想使用React，你將需要學習JSX。
小結
JSX是JavaScript的一個語法擴充套件，它允許開發者在JavaScript檔案中編寫類似HTML的標記。這使得為網路應用程式建立動態和互動的使用者介面更加容易。
你已經學會了一些在使用JSX時需要遵循的規則–通過遵循這些規則，我們可以寫出乾淨、可讀、可維護的程式碼，並與JavaScript的命名慣例保持一致。
評論留言