Créez un terrain de jeu de code dynamique avec SandPack React !

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.

Découvrez 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 :

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

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

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.

Une autre fonctionnalité utile est la possibilité de basculer entre différents modes de mise en page. SandPack propose trois modes : aperçu, tests et console. Le mode par défaut est aperçu, tandis que le mode tests fournit une suite pour exécuter des tests et le mode console restitue un composant terminal/console au lieu d'une fenêtre d'aperçu. Le mode console est utile pour afficher les sorties de la logique côté serveur. Vous pouvez également changer le sens de la mise en page à l'aide de l'option rtl (mise en page de droite à gauche).

Personnalisation de la sortie

Outre l'éditeur lui-même, l'affichage de la sortie peut également être personnalisé. Par exemple, vous pouvez choisir d'afficher ou de masquer la console, de modifier la disposition ou même de modifier l'apparence de la fenêtre d'aperçu. Plutôt cool, non !. Les éditeurs de code ont souvent des fenêtres d'édition fortement personnalisées, mais le résultat réel n'est pas autant pris en compte.

La console affiche toutes sortes d'erreurs et de journaux de console. Selon le type d'extrait de code présenté, vous souhaiterez afficher ou masquer la console. Vous pouvez également basculer la visibilité du bouton Afficher la console. Par défaut, la console est masquée. Comme pour tous les composants SandPack, le style peut être modifié individuellement à l'aide de classes CSS personnalisées.

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

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

Outre la console, la fenêtre d'affichage elle-même peut également être personnalisée. Par exemple, vous pouvez activer ou désactiver la barre de navigation avec l'option showNavigator et décider si vous souhaitez que les panneaux soient redimensionnables avec l'option redimensionnablePanels.

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

Le résultat ressemblera un peu à ceci :

Conclusion

Sandpack n'est pas seulement facile à utiliser, il est également super personnalisable. Cela en fait un excellent choix pour les blogs, la documentation ou toute plate-forme où l'édition de code en direct ajoute de la valeur, tout en permettant aux développeurs de le personnaliser en fonction de leurs sites.

Vous pouvez consulter la version détaillée de cet article ici

Merci d'avoir lu !

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!