Por que converter ASTRO para JSX?
Um arquivo .astro e um componente React .jsx misturam lógica e marcação, então os templates são parentes próximos - mas o Astro usa uma cerca de código apenas para o servidor, enquanto o JSX usa uma função de renderização exportada. Desenvolvedores convertem ao migrar um componente para uma base de código React ou Next.js.
Como converter ASTRO para JSX
Reescrita manual FREE
Mova a lógica da cerca --- para o corpo da função, envolva a marcação em return ( ... ) e adicione export default function. Leia as props como um argumento da função em vez de Astro.props.
Corrigir sintaxe específica de JSX FREE
Altere class para className, substitua <slot /> por {children} e converta diretivas Astro e set:html para seus equivalentes em React, como dangerouslySetInnerHTML.
Sobre estes formatos
Um arquivo .astro é um modelo de componente para a estrutura web Astro. Ele contém marcação no estilo HTML, além de uma seção opcional de script JavaScript ou TypeScript, e o Astro o…
Abrir detalhes de .ASTRO →
.JSX
Adobe ExtendScript File
Um arquivo .jsx é mais comumente um Adobe ExtendScript - um script de automação JavaScript em texto simples que roda dentro do After Effects, Photoshop, InDesign ou Illustrator. Abra-o no…
Abrir detalhes de .JSX →Qualidade e o que observar
- Nenhuma ferramenta faz isso automaticamente - espere edição manual para cada componente.
- Recursos exclusivos do Astro (diretivas de hidratação parcial
client:*,Astro.props,Astro.glob,<slot>, estilos com escopo) não têm equivalente direto em JSX e devem ser reimplementados. - O Astro renderiza no servidor por padrão; a mesma marcação como um componente React pode ser enviada como JS no lado do cliente, a menos que você use um framework de servidor, alterando as características de desempenho.
Perguntas frequentes
Existe um conversor automático de Astro para JSX?
Qual é a principal mudança estrutural?
--- torna-se o corpo da função, e a marcação vai dentro de uma instrução return de uma função exportada.Como eu lido com slots?
<slot /> do Astro pela prop {children} do React.E quanto aos atributos de classe?
className em vez do atributo class simples usado em arquivos .astro.
