Bearbeiten Sie eine React-Komponente, führen Sie sie sofort aus und debuggen Sie Fehler, ohne ein Projekt einrichten zu müssen.
Drücken Sie Strg oder Cmd plus Enter zum Ausführen. Wenn die Tab-Taste eine Einrückung einfügt, drücken Sie Esc und dann die Tab-Taste, um den Fokus aus dem Editor zu bewegen.
Der Starter kompiliert lokal. Bei zukünftigen Fehlern wird die letzte funktionierende Vorschau beibehalten.
Dieser fokussierte React-Playground startet mit einer funktionierenden Komponente, einem JSX-Compiler, einer CSS-Datei und einer Live-Vorschau. Bearbeiten Sie App.jsx, verwenden Sie React-Hooks und drücken Sie „Ausführen“ oder Strg/Cmd + Enter, um eine Idee zu testen, ohne ein Repository zu erstellen oder Pakete zu installieren.
Neuer Code wird in einem versteckten Kandidaten-Frame kompiliert und gerendert. Das sichtbare Ergebnis ändert sich erst, nachdem dieser Kandidat erfolgreich gestartet wurde. Syntaxfehler, blockierte Importe, Laufzeitfehler und die Konsolenausgabe bleiben über „Probleme“ und „Konsole“ verfügbar, während die letzte erfolgreiche Komponente sichtbar bleibt.
Die Kompilierung erfolgt in einem Browser-Worker und der Vorschau-Code wird in einem Iframe ohne Same-Origin-Zugriff ausgeführt. Fetch, XHR, WebSocket, externe Pakete, Formulare, Pop-ups und Top-Level-Navigation werden blockiert. Ihre App.jsx, CSS, Diagnosen, Konsolennachrichten und die gerenderte Vorschau sind für die Sitzungswiedergabe (Session Replay) maskiert. Führen Sie nur Code aus, dem Sie vertrauen.
Der anfängliche Playground enthält absichtlich App.jsx und styles.css. Er unterstützt React-Importe und einen optionalen styles.css-Side-Effect-Import, jedoch keine npm-Pakete, Projektbäume, Deployments oder gehostetes Teilen. Verwenden Sie Phoenix Code, wenn das Experiment zu einem vollständigen Webprojekt heranwächst.
Phoenix Code herunterladenJa. Importieren Sie Hooks wie useState, useEffect, useMemo und useRef aus React und exportieren Sie dann Ihre Komponente als Standardexport aus App.jsx.
Nicht in diesem fokussierten Release. Andere Importe als React und die enthaltene Datei styles.css erzeugen eine eindeutige Fehlermeldung, anstatt ein Paket-CDN zu kontaktieren.
Der Editor markiert die Stelle im Quellcode, Problems erklärt, was fehlgeschlagen ist, und die letzte erfolgreiche Vorschau bleibt sichtbar. Korrigieren Sie den Code und führen Sie ihn erneut aus, um sie zu ersetzen.
Ja. Phoenix Code sendet Ihren Quellcode nicht an einen Build-Server, aber der Vorschau-Code wird weiterhin als JavaScript in Ihrem Browser ausgeführt. Führen Sie nur Code aus, dem Sie vertrauen, und fügen Sie keine Geheimnisse ein.