• Português

      • JSX

      O RunJS suporta a sintaxe JSX, permitindo que você escreva código de forma semelhante a componentes React. O JSX é compilado automaticamente antes da execução.

      Notas de compilação

      • Usa o sucrase para transformar o JSX.
      • O JSX é compilado em ctx.libs.React.createElement e ctx.libs.React.Fragment.
      • Não é necessário importar o React: Você pode escrever JSX diretamente; ele usará automaticamente o ctx.libs.React após a compilação.
      • Ao carregar um React externo via ctx.importAsync('react@x.x.x'), o JSX passará a usar o método createElement dessa instância específica.

      Usando React e componentes integrados

      O RunJS inclui o React e bibliotecas de UI comuns de forma integrada. Você pode acessá-los diretamente via ctx.libs sem usar import:

      • ctx.libs.React — Núcleo do React
      • ctx.libs.ReactDOM — ReactDOM (pode ser usado com createRoot, se necessário)
      • ctx.libs.antd — Componentes do Ant Design
      • ctx.libs.antdIcons — Ícones do Ant Design
      const { Button } = ctx.libs.antd;

ctx.render(<Button>Clique</Button>);

      Ao escrever JSX diretamente, você não precisa desestruturar o React. Você só precisa desestruturar de ctx.libs ao usar Hooks (como useState, useEffect) ou Fragment (<>...</>):

      const { React } = ctx.libs;
const { useState } = React;

const Counter = () => {
  const [count, setCount] = useState(0);
  return <div>Contagem: {count}</div>;
};

ctx.render(<Counter />);

      Nota: O React integrado e o React externo importado via ctx.importAsync() não podem ser misturados. Se você usar uma biblioteca de UI externa, o React também deve ser importado da mesma fonte externa.

      Usando React e componentes externos

      Ao carregar uma versão específica do React e de bibliotecas de UI via ctx.importAsync(), o JSX usará essa instância do React:

      const React = await ctx.importAsync('react@19.2.4');
const { Button } = await ctx.importAsync('antd@6.2.2?bundle');

ctx.render(<Button>Clique</Button>);

      Se o antd depender de react/react-dom, você pode especificar a mesma versão via deps para evitar múltiplas instâncias:

      const React = await ctx.importAsync('react@18.2.0');
const { Button } = await ctx.importAsync('antd@5.29.3?bundle&deps=react@18.2.0,react-dom@18.2.0');

ctx.render(<Button>Botão</Button>);

      Nota: Ao usar um React externo, bibliotecas de UI como o antd também devem ser importadas via ctx.importAsync(). Não as misture com ctx.libs.antd.

      Pontos principais da sintaxe JSX

      • Componentes e props: <Button type="primary">Texto</Button>
      • Fragment: <>...</> ou <React.Fragment>...</React.Fragment> (requer a desestruturação de const { React } = ctx.libs ao usar Fragment)
      • Expressões: Use {expressão} no JSX para inserir variáveis ou operações, como {ctx.user.name} ou {count + 1}. Não use a sintaxe de template {{ }}.
      • Renderização condicional: {flag && <span>Conteúdo</span>} ou {flag ? <A /> : <B />}
      • Renderização de listas: Use array.map() para retornar uma lista de elementos e garanta que cada elemento tenha uma key estável.
      const { React } = ctx.libs;
const items = ['a', 'b', 'c'];

ctx.render(
  <ul>
    {items.map((item, i) => (
      <li key={i}>{item}</li>
    ))}
  </ul>
);