Erstellen eines All-in-One-Code-Editors mit React und SandPack

In diesem Artikel werden wir SandPack, ein beliebtes Spielplatz-Framework von CodeSandbox, erkunden und diskutieren, wie Sie damit eine dynamischere und interaktivere Umgebung für Ihre Benutzer erstellen können.

Dieser Artikel behandelt so ziemlich alle grundlegenden Dinge, die Sie über SandPack wissen müssen. Erweiterte Funktionen wie Hooks und benutzerdefinierte Komponenten sowie coole Anpassungsoptionen werden jedoch ausführlich in meinem Blog besprochen.

Sehen Sie sich die ausführliche Version dieses Artikels an

---

Was ist SandPack?

SandPack ist ein Komponenten-Toolkit zum Erstellen von Live-Code-Editoren für Ihre Blogs und technischen Dokumente. In diesem Artikel konzentrieren wir uns auf Sandpack-React und nicht auf Sandpack-Client, einen einfachen JavaScript-Bundler.

Was SandPack auszeichnet, ist die große Auswahl an verfügbaren Anpassungsoptionen. Außerdem ist der Einstieg wirklich einfach. Zu den nützlichsten Funktionen von Sandpack-React gehören:

• Vorgefertigte Vorlagen für gängige Sprachen und Frameworks
• Eine größere Anzahl vorgefertigter Themes für den Editor sowie die Möglichkeit, benutzerdefinierte Themes zu erstellen.
• Unterstützung für alle NPM-Abhängigkeiten und wichtige JavaScript-Frameworks.
• Optionen zum Anpassen der Benutzeroberfläche und fast aller Aspekte des Spielplatzes.
• Mit den vorgefertigten zusammensetzbaren Komponenten können Sie einen völlig individuellen Spielplatz erstellen.
• Anbieter und benutzerdefinierte Hooks stehen zum Erstellen benutzerdefinierter Komponenten zur Verfügung.

---

Überblick über The PlayGround

Um mit Sandpack-React zu beginnen, führen Sie diesen npm- oder Yarn-Befehl aus:

npm i @codesandbox/sandpack-react

oder
Garn hinzufügen @codesandbox/sandpack-react

Als nächstes importieren Sie den Sandpack-Spielplatz und rendern ihn mit dem folgenden Code:

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

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

Das Die Komponente richtet einen leeren Spielplatz ein, in den Sie direkt hineinspringen können. Standardmäßig enthält der Spielplatz eine grundlegende React-Vorlage. Schauen wir uns grundlegende Requisiten zum Anpassen der Vorlagen, Themen und mehr an:

• Vorlage: Diese Eigenschaft akzeptiert eine vordefinierte Liste von Vorlagen. Standardmäßig ist Vanille eingestellt.
• Dateien: Dies ist eine sehr nützliche Eigenschaft. Sie können mehrere Dateien mit benutzerdefiniertem Code erstellen, ähnlich einer regulären Ordnerstruktur. Das Dateiobjekt enthält einen Wert (den relativen Dateipfad) und den Schlüssel (Dateiinhalt). Die Dateien in diesem Objekt werden dann automatisch auch in den Registerkarten angezeigt.
• Optionen: Sie können mehrere Funktionen mithilfe des Optionsobjekts anpassen. Die vollständige Liste können Sie hier einsehen. Zu den nützlichsten gehören:
  • showLineNumbers: Schaltet die Sichtbarkeit von Zeilennummern um.
  • showTabs: Schaltet die Sichtbarkeit der Tabs um.
  • Klassen: Sie können vorhandenen Vorlagenklassen zur weiteren Anpassung benutzerdefinierte Klassennamen zuweisen.
• Abhängigkeiten: Das Abhängigkeitsobjekt kann jedes von der App benötigte NPM-Paket enthalten. Das Format und die Syntax ähneln denen einer package.json-Datei.
• Theme: Sie können ein vorgefertigtes Theme auswählen oder ein vollständig benutzerdefiniertes Theme zuweisen.

Anpassen des Spielplatzes

Lassen Sie uns den Standardspielplatz an unseren Stil anpassen und ein unterhaltsames Beispiel zum Herumspielen erstellen. Wenn Sie den Editor so anpassen, dass er zu Ihrem Website-Thema passt, kann er sich nahtlos einfügen und nicht wie eine Einbettung eines Drittanbieters wirken. Zuerst verwenden wir die Dateistütze, um eine einfache Zählerschaltfläche zu erstellen. Neben der App.js-Datei erstellen wir auch die App.css-Datei.

Sehen Sie sich das Beispiel und den Code unten an:

In diesem Beispiel wird eine Thekenkomponente auf dem Spielplatz gerendert. Das Dateiobjekt enthält den Code für App.js und App.css. Wir haben ein Thema aus der zuvor erwähnten vorgefertigten Liste ausgewählt, das aus Sandpack-Themes stammt und einen Hauch von Stil verleiht. Zeilennummern wurden ebenfalls auf „true“ gesetzt.

Darüber hinaus können Sie die Gestaltung des Spielplatzes ganz einfach anpassen. Dies kann entweder durch die Anwendung benutzerdefinierter Klassen oder durch die Nutzung der vorgefertigten Optionen von SandPack erfolgen. Sie können beispielsweise benutzerdefinierte Klassen wie diese verwenden:

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

Sie können dann das Erscheinungsbild und Layout mithilfe von CSS optimieren, wodurch Sie viel mehr Kontrolle über das visuelle Design haben.

Another useful feature is the ability to switch between different layout modes. SandPack offers three modes: preview, tests, and console. The default mode is preview, while the tests mode provides a suite for running tests and the console mode renders a terminal/console component instead of a preview window. The console mode is useful for displaying outputs of server side logic. You can also switch the layout direction using the rtl (Right to left layout) option.

Customizing the Output

Besides the editor itself, the output display can be customized as well. For instance, you can choose to show or hide the console, change the layout, or even modify the appearance of the preview window. Pretty cool right!. Code editors often have heavily customized editing windows, but the actual output is not paid attention to as much.

The console displays all sorts of errors and console logs. Depending on the type of code snippet being showcased, you'd either want to show or hide the console. You can also toggle the visibility of the show console button. By default, the console is hidden. As with all the SandPack components, the styling can be individually modified using custom CSS classes.

<Sandpack
  template="react"
  files={files}
  theme={nightOwl}
  options={{
    showConsole: true,
    showConsoleButton: true,
  }}
/>;

Besides the console, the display window itself can be customized as well. For example, you can turn the navigator bar on or off with the showNavigator option and decide if you want the panels to be resizable with the resizablePanels option.

<Sandpack
  template="react"
  files={files}
  theme={nightOwl}
  options={{
    showLineNumbers: true,
    showNavigator: true,
    resizablePanels: true,
  }}
/>

The result will look somewhat like this:

Conclusion

Sandpack isn't just easy to use—it's also super customizable. This makes it a great choice for blogs, documentation, or any platform where live code editing adds value, while still allowing developers to customize it based on their sites.

---

You can check the detailed version of this article here
Thanks for reading!

Das obige ist der detaillierte Inhalt vonErstellen eines All-in-One-Code-Editors mit React und SandPack. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!