Edite um componente React, execute-o instantaneamente e depure erros sem precisar configurar um projeto.
Pressione Control ou Command mais Enter para executar. Quando Tab insere indentação, pressione Escape e depois Tab para mover o foco para fora do editor.
O template inicial está compilando localmente. Erros futuros manterão a última pré-visualização funcional.
Este playground focado em React começa com um componente funcional, compilador JSX, arquivo CSS e visualização ao vivo. Edite App.jsx, use hooks do React e pressione Executar ou Control/Command + Enter para testar uma ideia sem criar um repositório ou instalar pacotes.
O novo código é compilado e renderizado em um quadro candidato oculto. O resultado visível só muda depois que esse candidato é iniciado com sucesso. Erros de sintaxe, importações bloqueadas, falhas de tempo de execução e a saída do console permanecem disponíveis através de Problemas e Console, enquanto o último componente bem-sucedido permanece visível.
A compilação ocorre em um worker do navegador e o código de visualização é executado dentro de um iframe sem acesso de mesma origem. Fetch, XHR, WebSocket, pacotes externos, formulários, pop-ups e navegação de nível superior são bloqueados. Seu App.jsx, CSS, diagnósticos, mensagens do console e a visualização renderizada são mascarados da repetição da sessão. Execute apenas código em que você confia.
O playground inicial contém intencionalmente App.jsx e styles.css. Ele suporta importações do React e uma importação opcional do styles.css como efeito colateral, mas não pacotes npm, árvores de projeto, implantação ou compartilhamento hospedado. Use o Phoenix Code quando o experimento se tornar um projeto web completo.
Baixar o Phoenix CodeSim. Importe hooks como useState, useEffect, useMemo e useRef do React e, em seguida, exporte seu componente como a exportação padrão do App.jsx.
Não nesta versão focada. Importações que não sejam do React e do arquivo styles.css incluído geram um problema claro, em vez de contatar um CDN de pacotes.
O editor marca o local no código-fonte, a seção Problemas explica o que falhou e a última visualização bem-sucedida permanece visível. Corrija o código e execute novamente para substituí-la.
Sim. O Phoenix Code não envia seu código-fonte para um servidor de compilação, mas o código da visualização ainda é executado como JavaScript no seu navegador. Execute apenas código em que você confia e não cole informações confidenciais.