Edita un componente de React, ejecútalo al instante y depura errores sin configurar un proyecto.
Pulsa Control o Comando más Intro para ejecutar. Cuando Tab inserte sangría, pulsa Escape y luego Tab para mover el foco fuera del editor.
El iniciador se está compilando localmente. Los errores futuros mantendrán la última vista previa funcional.
Este playground de React enfocado comienza con un componente funcional, un compilador de JSX, un archivo CSS y una vista previa en vivo. Edita App.jsx, usa los hooks de React y pulsa Ejecutar o Control/Comando + Intro para probar una idea sin crear un repositorio ni instalar paquetes.
El nuevo código se compila y renderiza en un marco candidato oculto. El resultado visible solo cambia después de que ese candidato se inicie correctamente. Los errores de sintaxis, las importaciones bloqueadas, los fallos de ejecución y la salida de la consola siguen disponibles a través de Problemas y Consola mientras el último componente exitoso permanece visible.
La compilación se realiza en un worker del navegador y el código de la vista previa se ejecuta dentro de un iframe sin acceso del mismo origen. Fetch, XHR, WebSocket, los paquetes externos, los formularios, las ventanas emergentes y la navegación de nivel superior están bloqueados. Tu App.jsx, CSS, los diagnósticos, los mensajes de la consola y la vista previa renderizada se ocultan en la repetición de la sesión. Ejecuta solo código en el que confíes.
El entorno de pruebas inicial contiene intencionadamente App.jsx y styles.css. Admite importaciones de React y una importación opcional de `styles.css` como efecto secundario, pero no paquetes npm, árboles de proyecto, despliegues ni la opción de compartir proyectos alojados. Utiliza Phoenix Code cuando el experimento crezca hasta convertirse en un proyecto web completo.
Descargar Phoenix CodeSí. Importa hooks como useState, useEffect, useMemo y useRef desde React y, luego, exporta tu componente como la exportación por defecto de App.jsx.
No en esta versión específica. Las importaciones distintas de React y del archivo `styles.css` incluido generan un problema claro en lugar de contactar con un CDN de paquetes.
El editor marca la ubicación en el código fuente, la sección de Problemas explica el fallo y la última vista previa correcta permanece visible. Corrige el código y vuelve a ejecutarlo para reemplazarla.
Sí. Phoenix Code no envía tu código fuente a un servidor de compilación, pero el código de la vista previa se sigue ejecutando como JavaScript en tu navegador. Ejecuta solo código en el que confíes y no pegues secretos.