Advice Generator Application por la Comu de Mermelada.tech

Contribuye con tu solución! 🥰♥💞🥰

¿ Cómo participar? 💭

Necesitarás tener instalado Visual Studio Code, Node.js 16+ y la extensión de Astro, la puedes encontrar aquí

Proyecto en el que vamos a trabajar

Seguiremos el ejemplo de Frontend Mentor. Es realizar un simple fetch a una api y traer un resultado. Puedes usar JavaScript o cualquier liobrería que quieras (React, Vue, Solid, Preact, etc). Puedes seguir el diseño estipulado o crear el tuyo. La innovación queda de tu parte!

¿Cómo empezar? 🛑

Crea un fork de este repositorio
Clona el repositorio

git clone git clone git@github.com:TU_USUARIO/advice-generator-app.git

Instala las dependecias

npm install
# o
pnpm install
# o
yarn install

Crea una página en:

/pages/entry/<tu-nombre-de-usuario-en-github>/index.astro

Ejeuta el proyecto:

npm run dev
# o
pnpm run dev
# o
yarn dev

Tienes que saber:

Astro para crear componentes dinámicos tiene directivas especiales. Si tu componente lleva un botón, deberás indicarle a Astro que dicho componente es interactivo y que tiene que ser hidratado en el navegador. Dicha hidratación se realiza de la siguiente manera:

<AdviceGeneratorApp client:load>{children}</AdviceGeneratorApp>

Debemos recordar que Astro es un framework SSG con cero Javascript por defecto, a menos que nosotrxs indiquemos lo contrario

👀 ¿Tienes dudas y no sabes cómo seguir?