Création d'un éditeur de code tout-en-un à l'aide de React et SandPack

Dans cet article, nous explorerons SandPack, un framework de terrain de jeu populaire de CodeSandbox, et discuterons de la façon dont vous pouvez l'utiliser pour créer un environnement plus dynamique et interactif pour vos utilisateurs.

Cet article couvre à peu près toutes les choses de base que vous devez savoir sur SandPack. Cependant, des fonctionnalités plus avancées telles que des hooks et des composants personnalisés ainsi que des options de personnalisation intéressantes sont discutées en détail sur mon blog.

Consultez la version détaillée de cet article

Qu'est-ce que SandPack

SandPack est une boîte à outils de composants permettant de créer des éditeurs de code en direct pour vos blogs et documents techniques. Dans cet article, nous nous concentrerons sur sandpack-react plutôt que sur sandpack-client, qui est un bundle JavaScript léger.

Ce qui distingue SandPack, c'est le large éventail d'options de personnalisation disponibles. De plus, il est très facile de commencer. Les fonctionnalités les plus utiles de sandpack-react incluent :

• Modèles prédéfinis pour les langages et frameworks populaires
• Un plus grand nombre de thèmes prédéfinis pour l'éditeur ainsi que la possibilité de créer des thèmes personnalisés.
• Prise en charge de toutes les dépendances npm et des principaux frameworks JavaScript.
• Options pour personnaliser l'interface utilisateur et presque tous les aspects du terrain de jeu.
• Vous pouvez créer un terrain de jeu entièrement personnalisé à l'aide des composants composables pré-construits.
• Des fournisseurs et des hooks personnalisés sont disponibles pour créer des composants personnalisés.

Présentation du PlayGround

Pour démarrer avec sandpack-react, exécutez cette commande npm ou Yarn :

npm je @codesandbox/sandpack-react

ou
fil ajouter @codesandbox/sandpack-react

Ensuite, importez le terrain de jeu Sandpack et restituez-le en utilisant le code suivant :

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

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

Le Le composant configure un terrain de jeu vide dans lequel vous pouvez accéder directement. Par défaut, le terrain de jeu contient un modèle React de base. Examinons les accessoires de base pour personnaliser les modèles, les thèmes et bien plus :

• template : Cette propriété accepte une liste prédéfinie de modèles. Par défaut, la vanille est définie.
• fichiers : C'est une propriété très utile. Vous pouvez créer plusieurs fichiers avec un code personnalisé, similaire à une structure de dossiers classique. L'objet files contient une valeur (le chemin relatif du fichier) et la clé (le contenu du fichier). Les fichiers de cet objet sont ensuite automatiquement affichés dans les onglets.
• options : Vous pouvez personnaliser plusieurs fonctionnalités à l'aide de l'objet options. Vous pouvez consulter la liste complète ici. Certains des plus utiles incluent :
  • showLineNumbers : activez la visibilité des numéros de ligne.
  • showTabs : activez la visibilité des onglets.
  • Classes : vous pouvez attribuer des noms de classe personnalisés aux classes de modèles existantes pour une personnalisation plus poussée.
• dépendances : l'objet dépendances peut contenir n'importe quel package NPM nécessaire à l'application. Le format et la syntaxe sont similaires à ceux d'un fichier package.json.
• thème : vous pouvez choisir un thème prédéfini ou attribuer un thème entièrement personnalisé.

Personnalisation du PlayGround

Modifions le terrain de jeu par défaut pour l'adapter à notre style et créons un exemple amusant avec lequel jouer. La personnalisation de l'éditeur pour qu'il corresponde au thème de votre site peut lui permettre de se fondre de manière transparente et de ne pas ressembler à une intégration tierce. Tout d’abord, utilisons la prop files pour créer un simple bouton de compteur. Outre le fichier App.js, nous créerons également le fichier App.css.

Jetez un œil à l'exemple et au code ci-dessous :

Dans cet exemple, un composant compteur est rendu dans la cour de récréation. L'objet files contient le code pour App.js et App.css. Nous avons choisi un thème dans la liste prédéfinie mentionnée précédemment, provenant de thèmes sandpack, ajoutant une touche de style. Les numéros de ligne ont également été définis sur true.

De plus, vous pouvez facilement personnaliser l'aménagement de l'aire de jeux. Cela peut être fait soit en appliquant des classes personnalisées, soit en utilisant les options prédéfinies fournies par SandPack. Par exemple, vous pouvez utiliser des classes personnalisées comme celle-ci :

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

Vous pouvez ensuite modifier l'apparence et la mise en page à l'aide de CSS, vous donnant ainsi beaucoup plus de contrôle sur la conception visuelle.

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!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!