¿Por qué convertir ASTRO a JSX?
Tanto un archivo .astro como un componente de React .jsx mezclan lógica y marcado, por lo que las plantillas son muy similares; sin embargo, Astro utiliza un bloque de código solo para el servidor mientras que JSX utiliza una función de renderizado exportada. Los desarrolladores realizan la conversión al migrar un componente a una base de código de React o Next.js.
Cómo convertir ASTRO a JSX
Reescritura manual FREE
Mueva la lógica del bloque --- al cuerpo de la función, envuelva el marcado en return ( ... ) y añada export default function. Lea las props como un argumento de la función en lugar de Astro.props.
Corregir sintaxis específica de JSX FREE
Cambie class por className, reemplace <slot /> por {children} y convierta las directivas de Astro y set:html a sus equivalentes en React como dangerouslySetInnerHTML.
Acerca de estos formatos
Un archivo .astro es una plantilla de componente para el framework web Astro. Contiene marcado de estilo HTML más una sección opcional de script en JavaScript o TypeScript, y Astro lo…
Abrir detalles de .ASTRO →
.JSX
Adobe ExtendScript File
Un archivo .jsx es comúnmente un Adobe ExtendScript: un script de automatización de JavaScript en texto plano que se ejecuta dentro de After Effects, Photoshop, InDesign o Illustrator.…
Abrir detalles de .JSX →Calidad y qué observar
- Ninguna herramienta hace esto automáticamente: espere tener que editar a mano cada componente.
- Las características exclusivas de Astro (directivas de hidratación parcial
client:*,Astro.props,Astro.glob,<slot>, estilos con alcance) no tienen un equivalente directo en JSX y deben reimplementarse. - Astro renderiza en el servidor por defecto; el mismo marcado como componente de React puede enviarse como JS en el lado del cliente a menos que use un framework de servidor, lo que cambia las características de rendimiento.
Preguntas frecuentes
¿Existe un convertidor automático de Astro a JSX?
¿Cuál es el principal cambio estructural?
--- se convierte en el cuerpo de la función, y el marcado va dentro de una sentencia return de una función exportada.¿Cómo manejo los slots?
<slot /> de Astro por la prop {children} de React.¿Qué pasa con los atributos de clase?
className en lugar del atributo class simple que se usa en los archivos .astro.
