使用 SandPack React 創建動態程式碼遊樂場！

在本文中，我們將探索 SandPack（CodeSandbox 的一個流行的 Playground 框架），並討論如何使用它為用戶創建一個更動態和互動的環境。

本文涵蓋了您需要了解的有關 SandPack 的幾乎所有基本知識。然而，我的部落格上詳細討論了更高級的功能，例如掛鉤和自訂元件以及很酷的自訂選項。

查看本文詳細版本

---

什麼是沙包

SandPack 是一個元件工具包，用於為您的部落格和技術文件建立即時程式碼編輯器。在本文中，我們將重點放在 sandpack-react 而不是 sandpack-client，它是一個輕量級的 JavaScript 捆綁器。

SandPack 的脫穎而出之處在於提供廣泛的客製化選項。另外，它真的很容易上手。 sandpack-react 最有用的功能包括：

• 針對流行語言和框架的預先建構範本
• 為編輯器提供大量預先建置主題以及建立自訂主題的選項。
• 支援所有 npm 依賴項和主要 JavaScript 框架。
• 自訂 UI 和遊樂場幾乎各個方面的選項。
• 您可以使用預先建置的可組合元件來建立一個完全自訂的 Playground。
• 提供者和自訂掛鉤可用於建立自訂元件。

---

遊樂場概覽

要開始使用 sandpack-react，請執行此 npm 或紗線命令：

npm 我@codesandbox/sandpack-react

或
紗線添加@codesandbox/sandpack-react

接下來，導入 Sandpack 遊樂場並使用以下程式碼渲染它：

import { Sandpack } from "@codesandbox/sandpack-react";

export default function App() {
  return <Sandpack />
}

>組件設定了一個空的遊樂場供您直接跳進去。預設情況下，遊樂場包含一個基本的 React 模板。讓我們來看看自訂模板、主題等的基本道具：

• template：此屬性接受預先定義的範本清單。預設情況下，設定為 vanilla。
• files：這是一個非常有用的屬性。您可以使用自訂程式碼建立多個文件，類似於常規資料夾結構。文件物件包含一個值（相對文件路徑）和鍵（文件內容）。然後，該物件中的檔案也會自動顯示在選項卡中。
• 選項：您可以使用選項物件自訂多個功能。您可以在此處查看完整清單。一些最有用的包括：
  • showLineNumbers：切換行號的可見度。
  • showTabs：切換選項卡的可見性。
  • 類別：您可以將自訂類別名稱指派給現有範本類別以進行進一步自訂。
• 依賴項：依賴項物件可以包含應用程式所需的任何 NPM 套件。格式和語法與 package.json 檔案類似。
• 主題：您可以選擇預先建立的主題或指派完全自訂的主題。

客製化遊樂場

讓我們調整預設的 Playground 以適應我們的風格，並創建一個有趣的範例來玩。自訂編輯器以匹配您的網站主題可以使其無縫融合，而不是感覺像第三方嵌入。首先，讓我們使用 files 屬性來建立一個簡單的計數器按鈕。除了 App.js 檔案之外，我們還將建立 App.css 檔案。

看看下面的範例和程式碼：

在此範例中，計數器元件在 Playground 中渲染。檔案物件包含 App.js 和 App.css 的程式碼。我們從前面提到的預建清單中選擇了一個主題，源自沙包主題，並添加了一絲風格。行號也已設定為 true。

此外，您可以輕鬆自訂遊樂場的佈局。這可以透過應用自訂類別或利用 SandPack 提供的預先建置選項來完成。例如，您可以使用這樣的自訂類別：

import { Sandpack } from "@codesandbox/sandpack-react";

export default function App() {
  return <Sandpack />
}

然後，您可以使用 CSS 調整外觀和佈局，從而更好地控制視覺設計。

另一個有用的功能是能夠在不同的佈局模式之間切換。 SandPack 提供三種模式：預覽、測試和控制台。預設模式是預覽，而測試模式提供了用於運行測試的套件，控制台模式呈現終端/控制台組件而不是預覽視窗。控制台模式對於顯示伺服器端邏輯的輸出非常有用。您也可以使用 rtl（從右到左佈局）選項切換佈局方向。

自訂輸出

除了編輯器本身之外，還可以自訂輸出顯示。例如，您可以選擇顯示或隱藏控制台、變更佈局，甚至修改預覽視窗的外觀。很酷吧！程式碼編輯器通常有大量自訂的編輯窗口，但實際輸出卻沒有受到太多關注。

控制台顯示各種錯誤和控制台日誌。根據所顯示的程式碼片段的類型，您可能想要顯示或隱藏控制台。您也可以切換顯示控制台按鈕的可見性。預設情況下，控制台是隱藏的。與所有 SandPack 元件一樣，可以使用自訂 CSS 類別單獨修改樣式。

import { Sandpack } from "@codesandbox/sandpack-react";

export default function App() {
  return <Sandpack />
}

除了控制台之外，顯示視窗本身也可以自訂。例如，您可以使用 showNavigator 選項開啟或關閉導覽列，並決定是否要使用 resizingPanels 選項調整面板的大小。

<Sandpack
  theme={theme}
  template="react"
  options={{
    classes: {
      "sp-wrapper": "custom-wrapper",
      "sp-layout": "custom-layout",
      "sp-tab-button": "custom-tab",
    },
  }}
/>

結果看起來有點像這樣：

結論

Sandpack 不僅易於使用，而且還具有超級可自訂性。這使得它成為部落格、文件或任何即時程式碼編輯增加價值的平台的絕佳選擇，同時仍允許開發人員根據他們的網站對其進行自訂。

---

您可以在這裡查看本文的詳細版本

感謝您的閱讀！

以上是使用 SandPack React 創建動態程式碼遊樂場！的詳細內容。更多資訊請關注PHP中文網其他相關文章！