JSX / React Runtime

1O que ĂŠ o JSX Runtime?#

JSX ĂŠ uma extensĂŁo de sintaxe usada pelo React que permite escrever cĂłdigo parecido com HTML dentro do JavaScript. Navegadores e WebView nĂŁo conseguem executar JSX diretamente: ele precisa ser compilado antes.

O recurso JSX Runtime carrega React e Babel Standalone no seu app em tempo de execução, entĂŁo cĂłdigo JSX puro simplesmente funciona, sem ferramentas de build.

2Quando usar#

Ative o JSX Runtime quando:

• VocĂŞ escreve cĂłdigo React/JSX no campo de JS personalizado
• Seus arquivos HTML contĂŞm tags <script type="text/babel">
• VocĂŞ gerou cĂłdigo JSX com IA
• VocĂŞ quer usar componentes React sem montar um pipeline de build

â ď¸ NĂO ĂŠ necessĂĄrio se vocĂŞ enviar um projeto em ZIP: o bundler esbuild integrado jĂĄ cuida do JSX em envios de ZIP.

3Como ativar#

1. VĂĄ para a Etapa 4 (Recursos avançados) no assistente
2. Ative '⚛️ JSX / React Runtime'
3. Escreva seu JSX no campo de JS personalizado ou no seu HTML
4. Gere seu APK normalmente

O app vai carregar React 18 + Babel pela CDN no primeiro carregamento da pĂĄgina.

4Escrevendo JSX no JS personalizado#

Com o JSX Runtime ativado, vocĂŞ pode escrever cĂłdigo React diretamente no campo de JS personalizado:

const App = () => (
<div>

<h1>Hello from React!</h1>
<p>This JSX is compiled at runtime</p>

</div>
);

const root = ReactDOM.createRoot(
document.getElementById('root')
);
root.render(<App />);

O Babel transpila o JSX automaticamente antes da execução.

5Usando <script type="text/babel"> no HTML#

Se seu site ou HTML offline usa tags script com JSX, marque-as com type="text/babel":

<script type="text/babel">
function Greeting({ name }) {

return <h1>Hello, {name}!</h1>;

}
ReactDOM.createRoot(document.getElementById('app'))

.render(<Greeting name="World" />);

</script>

O Babel Standalone encontra e compila essas tags automaticamente.

6Notas importantes#

• Requer conexĂŁo com a internet no primeiro carregamento (CDN)
• Adiciona cerca de 200-500 ms de atraso na inicialização para a compilação do Babel
• React 18 e ReactDOM 18 sĂŁo carregados automaticamente
• Funciona junto com todos os outros recursos (anĂşncios, push, menu lateral etc.)
• Para apps de produção com bases de cĂłdigo grandes, considere usar o envio de ZIP com empacotamento esbuild: ĂŠ mais rĂĄpido e funciona offline