Primeros pasos

Hola chicos, solo por si les interesa, para que los iconos se vean igual de cool como se ven en el Visual de Oscar, la extensión se llama Material Icon, me gustó cuando lo vi y lo busqué, de pronto a alguien le pueda gustar

Baby steps
_

Dejo algunos apuntes de la clase

Con este comando instalan Svelte usando WebPack, aunque no esta de mas aprender a usar otro empaquetador 😃

npx degit sveltejs/template-webpack svelte-app

Este es el comando para crear el proyecto

npx degit sveltejs/template "nombre del proyecto"

toso lo que se trabaje con svelte esta en un mismo archivo

Genial! Creo que me está gustando micho Svelte! y solo llevo tres clases. Increible la verdad.

Usando WSL, no recargaba la página, pero era porque la dirección del proyecto estaba en /mnt

Volví a crear el proyecto usando root /~ como raiz, y funciona sin problema.

Si quieren formatear el código, con Ctrl + shift + p
buscan formato y listo.

Estoy viendo esto en el 2022 y estoy usando vite en lugar de rollup

Estoy cursando esta tecnología en junio 2023, vengo del curso de Frameworks. Por su velocidad al crear un archivo por cada componente con sus propias @mediaqueries Es una manera increíble de crear visuales.

En caso de que las necesidades del producto incluyan robusto, aprenderé Angular. Abrazos comunidad.

Comando que yo use para descargar la última versón de un proyecto Svelte.

npm create svelte@latest name__project

Wauuu se ve un código más limpio.

¿qué extensión instalaste para el formateo autómatico al guardar tus cambios?
Saludos.

Buenas tardes.
Para aquellas personas que puedan tener problema al ejecutar

npx degit sveltejs/template svelte

la solución puede ser instalar git, en Ubuntu solo basta con sudo apt install git y luego intentar ejecutar la instalación de svelte, de acuerdo con el video.
Gracias 😄

Les comparto un problema que me apareció cuando intenté correr el proyecto con pm run dev.

EN un principio, me salió un mensaje de error y usé los siguientes comandos:

npm cache clean --force
rm -rf node_modules
npm install
git init
npm run dev

y funcionó

espero que les sirva

Encuentro similitudes entre svelte y vue (en cuestión de como luce un archivo .svelte y uno .vue). Pero a nivel interno son bastante diferentes

Una duda, podria trabajar svelte colocando en el archivo este orden?

• Vista (HTML)
• Estilos (CSS)
• Lógica (JS)

Son costumbres que tengo de trabajar con Vue jej

Instalen la extension de svelte para el editor que estén usando.

Me gusta porque los archivos son como Vue, general el HTML, CSS y JavaScript en un documento y parece que es fácil pasar valores entre archivos.

Bueno en mi caso la estructura de App.svelte era diferente. Primero está el script, luego el html y al final los styles.

recomiendo usar VITE para esta era

Mi código no aparecia con colores, tuve que instalar la extensión de Svelte en VS Code.

Al fin un curso donde la versión está al día! 🎉🎉🎉

al momento de usar el comando npm run dev lo realiza bien en la terminal pero no logra cargar el link aparece problema para conectar con el servidor por lo que no puedo ver los cambios que haga 😦

TIP: Si quieres un format elegante de tu código y usas VSCode, te recomiendo instalar estas extensiones:

• prettier-vscode
• svelte-vscode
• vscode-eslint

Y en tu settings.json añade esta configuración:

{
"editor.formatOnSave": true,
  // Svelte
  "[svelte]": {
    "editor.defaultFormatter": "svelte.svelte-vscode"
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
}

.
vamos por mas