btn, que se encuentra dentro de buttonStyles.\n document.getElementById(\"counter\").className = buttonStyles.btn;\n

Aunque también podemos ir a la etiqueta y darle la clase directamente, algo así:\n <button id=\"counter\" class=${buttonStyles.btn} type=\"button\"></button>

\n\n

Cuando guardes los cambios, el botón tiene los estilos que le indicamos en nuestro módulo, esta es una manera estándar que nos ofrece CSS para separar nuestro código y que los estilos sean únicos hacia el componente que lo estamos importando.

\n

Contribución creada por: Jofay Zhan Segura

","markdown_content":"","publishable_content":true,"uploading":false}],"quiz":null},{"id":11361,"title":"Archivos estáticos","materials":[{"id":50424,"title":"Importar imágenes","url":"https://platzi.com/cursos/vitejs/importar-imagenes/","material_type":"video","thumbnail_url":"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_62983690661e1f655d304c75_62983690661e1f655d304c81_42s.jpg","duration":418,"index":9,"content":"

Importar una imagen o cualquier archivo multimedia con Vite es bastante sencillo, simplemente debes de usar la palabra clave import, definir un nombre para la imagen e indicar donde se encuentra.

\n

\n
Si quieres puedes descargar esta imagen
\n

\n

// main.js\nimport catImage from \"./cat.jpg\";

\n

Una vez importada tu imagen, solo te faltaría en una etiqueta img pasar el nombre de tu imagen en la propiedad src.

\n

Puedes hacerlo así:\ndocument.getElementById(\"img\").src = catImage;\nO así:\n<img id=\"img\" src=\"${catImage}\"/>

\n

¿Cómo está pasando?

\n

En la sección de sources, de nuestras devtools, podremos encontrar dos archivos.

\n

Nuestra imagen
Un archivo de JS con el nombre de la imagen y adicionalmente la palabra ?import.

\n

Este último es un ECMAScript module que contiene nuestra imagen. Vite convierte todo a un ECMAScript module para un mejor rendimiento.

\n

Contribución creada por: Jofay Zhan Segura

","markdown_content":"","publishable_content":true,"uploading":false},{"id":50425,"title":"Importar JSON","url":"https://platzi.com/cursos/vitejs/importar-json/","material_type":"video","thumbnail_url":"https://thumbs.cdn.mdstrm.com/thumbs/512e13acaca1ebcd2f000279/thumb_6298373d6297c3156af1cbd7_6298373d6297c3156af1cbe3_48s.jpg","duration":454,"index":10,"content":"

Con Vite podemos importar todo el archivo JSON de una manera muy simple, aunque también podemos traer partes específicas para optimizar el código y mejorar el rendimiento en producción.

\n

Importar JSON

\n

Para empezar deberemos crear un archivo JSON, en este caso lo nombraré data.json y contendrá la siguiente información:

\n

{\n \"user\": {\n \"name\": \"Diana\",\n \"lastname\": \"Martinez\"\n },\n \"session\": {\n \"id\": \"string session\"\n }\n}

\n

Para importar todo el archivo JSON lo haríamos igual que como lo hemos estado haciendo. Escribimos import, le damos un nombre e indicamos donde se encuentra.

\n

import data from \"./data.json\";

\n

Ahora para visualizarlo creamos una etiqueta y dentro de esta usamos JSON.stringify para convertir nuestro objeto en un string.

\n

<pre>${JSON.stringify(data)}</pre>

\n

Como podrás ver en el navegador estamos trayendo todos los datos del archivo JSON, pero también podríamos visualizar una parte más especifica, como solamente el usuario, para esto solo tendríamos que destructurar los datos, de la siguiente forma:

\n

Visualizamos solo los datos de user:\n<pre>${JSON.stringify(data.user)}</pre>