描述使用者介面
React 是一個用於渲染使用者介面（UI）的 JavaScript 函式庫。UI 由按鈕、文字和圖片等小單元組成。React 讓您可以將它們組合成可重複使用、可巢狀的元件。從網站到手機應用程式，螢幕上的一切都可以分解為元件。在本章中，您將學習如何建立、自訂以及有條件地顯示 React 元件。
您的第一個元件
React 應用程式是由稱為元件的獨立 UI 片段所構建。一個 React 元件是一個可以加入標記語言的 JavaScript 函式。元件可以小到一個按鈕，也可以大到整個頁面。以下是一個渲染三個Gallery元件的Profile元件：
匯入與匯出元件
你可以在一個檔案中宣告多個元件，但大型檔案可能難以瀏覽。為了解決這個問題，你可以將元件匯出到它自己的檔案中，然後從另一個檔案匯入該元件：
使用 JSX 撰寫標記語言
每個 React 元件都是一個 JavaScript 函式，其中可能包含一些 React 會渲染到瀏覽器中的標記語言。React 元件使用一種稱為 JSX 的語法擴充來表示該標記語言。JSX 看起來很像 HTML，但它更嚴格一些，並且可以顯示動態資訊。
如果我們將現有的 HTML 標記語言貼到 React 元件中，它不一定能正常運作：
如果你有像這樣的現有 HTML，可以使用轉換工具來修復它：
使用大括號在 JSX 中嵌入 JavaScript
JSX 讓您可以在 JavaScript 檔案中編寫類似 HTML 的標記，將渲染邏輯和內容保持在同一個地方。有時您會想要在該標記內添加一點 JavaScript 邏輯或引用動態屬性。在這種情況下，您可以在 JSX 中使用大括號來「開啟一個視窗」連接到 JavaScript：
向元件傳遞 props
React 元件使用props來相互通訊。每個父元件都可以透過給予 props 來向其子元件傳遞一些資訊。Props 可能會讓您想起 HTML 屬性，但您可以透過它們傳遞任何 JavaScript 值，包括物件、陣列、函數，甚至是 JSX！
條件渲染
您的元件通常需要根據不同的條件顯示不同的內容。在 React 中，您可以使用 JavaScript 語法（例如if陳述式、&& 和 ? :運算子）來條件性地渲染 JSX。
在此範例中，JavaScript&&運算子用於條件性地渲染一個勾選標記：
渲染列表
您通常會希望從資料集合中顯示多個相似的元件。您可以使用 JavaScript 的filter() 和 map()與 React 結合，將您的資料陣列過濾並轉換為元件陣列。
對於每個陣列項目，您需要指定一個key。通常，您會希望使用資料庫中的 ID 作為key。Keys 讓 React 能夠追蹤每個項目在列表中的位置，即使列表發生變化。
保持元件純粹
有些 JavaScript 函式是純粹的。 純粹函式：
- 只管自己的事。它不會改變任何在它被呼叫前就已存在的物件或變數。
- 相同輸入，相同輸出。 給定相同的輸入，純粹函式應總是回傳相同的結果。
透過嚴格地僅將您的元件撰寫為純粹函式，您可以避免隨著程式碼庫增長而出現的一整類令人困惑的錯誤和不可預測的行為。以下是一個不純粹元件的範例：
您可以透過傳遞屬性（prop）而非修改既有的變數，來使這個元件變得純粹：
您的使用者介面即樹狀結構
React 使用樹狀結構來模擬元件與模組之間的關係。
React 渲染樹是元件之間父子關係的一種表示。
一個 React 渲染樹的範例。
位於樹狀結構頂部、靠近根元件的元件被視為頂層元件。沒有子元件的元件則是葉節點元件。這種元件分類對於理解資料流和渲染效能很有用。
模擬 JavaScript 模組之間的關係是理解您應用程式的另一種有用方式。我們稱之為模組依賴樹。
一個模組依賴樹的範例。
建置工具經常使用依賴樹來打包所有相關的 JavaScript 程式碼，以供客戶端下載和渲染。過大的打包體積會降低 React 應用程式的使用者體驗。理解模組依賴樹有助於調試此類問題。
接下來呢？
前往 您的第一個元件 開始逐頁閱讀本章！
或者，如果您已經熟悉這些主題，何不閱讀關於新增互動性的內容？