Erstellen Sie mit SandPack React einen dynamischen Code-Spielplatz!

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.

Schauen 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:

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

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

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

Eine weitere nützliche Funktion ist die Möglichkeit, zwischen verschiedenen Layoutmodi zu wechseln. SandPack bietet drei Modi: Vorschau, Tests und Konsole. Der Standardmodus ist die Vorschau, während der Testmodus eine Suite zum Ausführen von Tests bietet und der Konsolenmodus eine Terminal-/Konsolenkomponente anstelle eines Vorschaufensters rendert. Der Konsolenmodus ist nützlich, um Ausgaben der serverseitigen Logik anzuzeigen. Sie können die Layoutrichtung auch mit der RTL-Option (Rechts-nach-Links-Layout) ändern.

Anpassen der Ausgabe

Neben dem Editor selbst kann auch die Ausgabeanzeige angepasst werden. Sie können beispielsweise die Konsole ein- oder ausblenden, das Layout ändern oder sogar das Erscheinungsbild des Vorschaufensters ändern. Ziemlich cool, oder! Code-Editoren verfügen häufig über stark angepasste Bearbeitungsfenster, der tatsächlichen Ausgabe wird jedoch nicht so viel Aufmerksamkeit geschenkt.

Die Konsole zeigt alle Arten von Fehlern und Konsolenprotokollen an. Abhängig von der Art des angezeigten Codeausschnitts möchten Sie die Konsole entweder ein- oder ausblenden. Sie können auch die Sichtbarkeit der Schaltfläche „Konsole anzeigen“ umschalten. Standardmäßig ist die Konsole ausgeblendet. Wie bei allen SandPack-Komponenten kann das Styling mithilfe benutzerdefinierter CSS-Klassen individuell geändert werden.

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

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

Neben der Konsole kann auch das Anzeigefenster selbst angepasst werden. Sie können beispielsweise die Navigationsleiste mit der Option „showNavigator“ ein- oder ausschalten und mit der Option „resizablePanels“ entscheiden, ob die Größe der Panels geändert werden soll.

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

Das Ergebnis wird ungefähr so ​​aussehen:

Abschluss

Sandpack ist nicht nur einfach zu verwenden, sondern auch super anpassbar. Dies macht es zu einer großartigen Wahl für Blogs, Dokumentationen oder jede Plattform, auf der die Bearbeitung von Live-Code einen Mehrwert bietet und es Entwicklern dennoch ermöglicht, es basierend auf ihren Websites anzupassen.

---

Die ausführliche Version dieses Artikels können Sie hier einsehen

Danke fürs Lesen!

Das obige ist der detaillierte Inhalt vonErstellen Sie mit SandPack React einen dynamischen Code-Spielplatz!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!