Primeros pasos

Les comparto unos enlaces que generará más gusto por aprender:

• Rollup vs Webpack

• Svelte GitHub

• Svelte DevTools

• Svelte native

Y sobre todo, el sitio del profesor @gndx

Aunque ya para este curso debes saber JS, por si acaso, npx viene en el paquete de NodeJS. Instala NodeJS https://nodejs.org. Una vez que tengas instalado node y npx, instala degit con:

npm install -g degit

y entonces ya podrías instalar Svelte como lo menciona el prof. Óscar.

npx degit sveltejs/template svelte
cd svelte
npm install

Les dejó este link para quienes usan VSCode:
https://marketplace.visualstudio.com/items?itemName=fivethree.vscode-svelte-snippets

Este es el plugin de VS Code para que los archivos .svelte se vean con color en las etiquetas. y este es el repo en github

• para los que deseen un template con webpack:
  • https://github.com/sveltejs/template-webpack
  • https://github.com/gndx/svelte-base – éste es del repo del profesor Oscar.

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

Este es el comando para crear el proyecto

npx degit sveltejs/template "nombre del proyecto"

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

npx degit sveltejs/template-webpack svelte-app

Svelte Intellisense
API Docs Svelte
Svelte 3 Snippets

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.

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

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

Visual Studio Code>Themes>SynthWave '84

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

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

recomiendo usar VITE para esta era

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

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

Like si esperar ansioso la llegada de SvelteKit SvelteKit

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

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

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

¿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 😄

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.

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

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
  },
}

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 😦

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

.
vamos por mas