JSX 簡介

  • 1 分鐘

React 會使用稱為 JavaScript XML (JSX) 的特殊語法。 JSX 可讓您將 HTML (或您可能建立的自訂元件) 和 JavaScript 整合成單一檔案，或甚至整合成單行程式碼。 藉由使用 JSX，您可以依賴 JavaScript 語法獲得邏輯。 Visual Studio Code 提供 IntelliSense for JSX 檔案，因此當您使用 React 時，其是很有用的工具。

注意

JSX 依賴可延伸標記語言 (XML)。 XML 的語法類似於 HTML。 在許多執行個體中，您可能不會注意到差異。 不過，XML 會對您的語法設下幾個重要的限制：

  • 所有元素都必須放在父元素內。
  • 所有元素都必須關閉。

建置程序

瀏覽器原本不支援 JSX。 因此，必須從 JSX 檔案產生 JavaScript 和 HTML，才能由瀏覽器轉譯。 數個搭配程式和其他工具可以執行必要的工作。 這些工具包括 Webpack、Parcel 和 Snowpack。 我們將使用 Snowpack，因為其不需要程式碼或額外的指令碼。

元件

React 開發是以「元件」為基礎。 元件是顯示和工作的獨立式單位。 它們可以在應用程式中重複使用。 使用它們，以邏輯方式將您的應用程式細分為較小的區塊 (或元件)。