No tienes acceso a esta clase

Para ver esta clase necesitas una suscripción a Platzi

Curso de Svelte

Curso de Svelte

Oscar Barajas Tavares

Oscar Barajas Tavares

Primeros pasos3/26

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

Y sobre todo, el sitio del profesor @gndx

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

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

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

Este es el comando para crear el proyecto

npx degit sveltejs/template "nombre del proyecto"
Screen Shot 2020-04-16 at 1.10.34.png

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

npx degit sveltejs/template-webpack svelte-app

Baby steps
_
hello-svelte.png

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

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

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

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

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:

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! 🎉🎉🎉

Screenshot_2020-11-01_15-04-39.png

.
vamos por mas

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

Y sobre todo, el sitio del profesor @gndx

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

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

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

Este es el comando para crear el proyecto

npx degit sveltejs/template "nombre del proyecto"
Screen Shot 2020-04-16 at 1.10.34.png

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

npx degit sveltejs/template-webpack svelte-app

Baby steps
_
hello-svelte.png

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

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

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

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

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:

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! 🎉🎉🎉

Screenshot_2020-11-01_15-04-39.png

.
vamos por mas