Modifiez un composant React, exécutez-le instantanément et déboguez les erreurs sans avoir à configurer un projet.
Appuyez sur Contrôle ou Commande plus Entrée pour exécuter. Lorsque Tab insère une indentation, appuyez sur Échap puis sur Tab pour déplacer le focus hors de l'éditeur.
Le starter est en cours de compilation locale. Les erreurs futures conserveront le dernier aperçu fonctionnel.
Ce playground React spécialisé démarre avec un composant fonctionnel, un compilateur JSX, un fichier CSS et un aperçu en direct. Modifiez App.jsx, utilisez les hooks React et appuyez sur Exécuter ou Contrôle/Commande + Entrée pour tester une idée sans créer de dépôt ni installer de paquets.
Le nouveau code est compilé et rendu dans un cadre candidat masqué. Le résultat visible ne change qu'après le démarrage réussi de ce candidat. Les erreurs de syntaxe, les importations bloquées, les échecs d'exécution et la sortie de la console restent disponibles via Problèmes et Console, pendant que le dernier composant réussi reste visible.
La compilation s'effectue dans un worker de navigateur et le code de l'aperçu s'exécute dans une iframe sans accès de même origine. Fetch, XHR, WebSocket, les paquets externes, les formulaires, les pop-ups et la navigation de niveau supérieur sont bloqués. Votre App.jsx, CSS, les diagnostics, les messages de la console et l'aperçu rendu sont masqués de la relecture de session. N'exécutez que du code de confiance.
Le playground initial contient intentionnellement App.jsx et styles.css. Il prend en charge les importations React et une importation facultative de styles.css pour les effets de bord, mais pas les paquets npm, les arborescences de projet, le déploiement ou le partage hébergé. Utilisez Phoenix Code lorsque l'expérimentation se transforme en un projet web complet.
Télécharger Phoenix CodeOui. Importez les hooks tels que useState, useEffect, useMemo et useRef depuis React, puis exportez votre composant en tant qu'exportation par défaut depuis App.jsx.
Pas dans cette version ciblée. Les importations autres que React et le fichier styles.css inclus génèrent un problème clair au lieu de contacter un CDN de paquets.
L'éditeur marque l'emplacement source, la section Problèmes explique ce qui a échoué, et le dernier aperçu réussi reste visible. Corrigez le code et exécutez-le à nouveau pour le remplacer.
Oui. Phoenix Code n'envoie pas votre code source à un serveur de build, mais le code de l'aperçu s'exécute toujours en tant que JavaScript dans votre navigateur. N'exécutez que du code auquel vous faites confiance et ne collez pas de secrets.