No tienes acceso a esta clase

¬°Contin√ļa aprendiendo! √önete y comienza a potenciar tu carrera

Componentes en React: header

18/25
Recursos

Aportes 7

Preguntas 4

Ordenar por:

¬ŅQuieres ver m√°s aportes, preguntas y respuestas de la comunidad?

Para instalar autom√°ticamente React en Astro:

npx astro add react

Astro instalará y configurará automáticamente React y todas sus dependencias, también se encargará de modificar los archivos de configuración automáticamente.

Los principiantes como yo:

Una pregunta Por alguna raz√≥n no me reconoce vsc las etiquetas como \<Header /> \<Base /> inclusive en index.astro no me reconoce la etiqueta \<Card /> Por lo que no se me importa el principio de \[...slug].astro el Header y la Base Alguien sabr√° cu√°l puede ser el problema? Me falta alg√ļn pluggin o componente ? ![](https://static.platzi.com/media/user_upload/image-3aec7044-a510-43b9-b2f5-39393c48a0de.jpg)

Astro Islands

El término Island se refiere a un componente de interfaz de usuario interactivo en una página estática. En la cual, pueden existir varias islas que puede ser desarrollada en diferentes Frameworks o librerías populares de JavaScript (React, Svelte, Vue, etc.), mezcladas en la misma página.
.

‚ú®Concepto clave
El patrón de arquitectura de la se construyen las Islands se conoce como hidratación parcial o selectiva.

.

Funcionamiento de Astro

Si bien, Astro compila código para generar las páginas de nuestro sitio web, Astro no dispone de dicho código del lado del cliente, delegando dicha responsabilidad a un módulo de servidor para renderizar el contenido automáticamente, anticipando y eliminando JavaScript del build final.
.

‚ú®Concepto clave
Con este mecanismo, Astro mantiene todos los sitios web r√°pidos de forma predeterminada para mejorar el rendimiento y SEO.

.
Sin embargo, Astro entiende que algunas veces, por interacción y anatomía de la Isla que renderiza, es necesario emplear y dejar un mínimo de JavaScript para convertir la página en un SPA o Single-Page-Application. De ello, Astro nos delega la elección mediante su declaración client .
.

Beneficio de las Islas

El beneficio principal de construir Astro con Islas es el rendimiento, minimizando el producto final para que sea r√°pido en la carga sin JavaScript que lo sature.
.
Por su parte, las Islas nos permiten desarrollar Frameworks o librer√≠as populares que nos permitan heredar o integrar para no recrear la rueda un Sistema de Dise√Īo.
.
Por √ļltimo, con la directiva client , le indicamos a Astro exactamente c√≥mo y cu√°ndo renderizar cada componente.

React Integration

ūüďĆ Enlaces importante
@astrojs/react

Creo que sería bueno actualizar este curso ya que en la versión 4 de Astro existen muchos cambios.
Primero instalamos React en Astro con el siguiente comando: `npx astro add react` Y le aceptamos las configuraciones por defecto de React. Luego creamos el componente de React para el Header dentro de la carpeta \_Components\_: `src/components/` `‚Ēó‚ĒĀ‚Ė∂Ôłé Header.tsx <- Es un archivo .tsx por que estamos usando TypeScript` Dentro de `Header.tsx` creamos el componente de la siguiente manera: ```js import React from "react"; interface Props { title: string; } const Header = ({ title }: Props) => { return (
<h1 className="mb=4"> {title}
); }; export default Header; ``` Ahora lo importante, para poder renderizar este *Header* en todos los *Posts* deberíamos insertar el componente dentro del *Layout*: ```js --- import { getCollection } from "astro:content"; import Base from "../../layouts/Base.astro"; import Header from "../../components/Header"; export async function getStaticPaths() { const posts = await getCollection("tips"); return posts.map((post) => ({ params: { slug: post.slug }, props: post, })); } const post = Astro.props; const { Content } = await post.render(); --- <Base title="AstroBuild.tips"> // Inserto el componente dentro del Layout para poder verlo en todos los posts <Header title="AstroBuild.tips" /> <Content /> </Base> ```