Introducción a Svelte: un breve tutorial

 

 

 

Introduccion a svelte un breve tutorial 1

Cómo empezar a utilizar Svelte

Desde que comencé a usar Hugo como generador de sitios estáticos para crear sitios web, me encantó este enfoque de publicación en la web, en comparación con el uso de un CMS que generaba páginas dinámicamente, como estaba acostumbrado en el pasado.

Svelte es un framework de JavaScript que me da la misma sensación. En comparación con React, Vue, Angular y otros frameworks, una aplicación creada con Svelte se compila de antemano, los visitantes de su sitio no tienen que recibir el código del framework y de las bibliotecas y, como resultado, toda la experiencia es más fluida, consume menos ancho de banda y todo parece más rápido y liviano.

 

Al igual que con Hugo, que desaparece durante la implementación y genera HTML simple, Svelte desaparece y todo lo que obtienes es JavaScript simple.

Pero vayamos al meollo del artículo: cómo empezar a utilizar Svelte.

Necesitas tener instalado Node.js. ¡Consulta mi publicación sobre cómo instalar Node.js si aún no lo tienes!

Y asegúrese de que sea la última versión ( cómo actualizar Node.js ).

Node instala el npxcomando, que es una forma práctica de ejecutar comandos de Node. En particular, vamos a ejecutar esto:

npx degit sveltejs/template firstapp

Esto descargará y ejecutará el comando degit , que a su vez descarga el código más reciente de la plantilla del proyecto Svelte que se encuentra en https://github.com/sveltejs/template , en la firstappcarpeta.

Ahora, vaya a esa firstappcarpeta y ejecute el comando npm installpara descargar las dependencias adicionales de la plantilla. En el momento de escribir esto, esas son las dependencias de esa plantilla de proyecto: Actualidad y noticias

"npm-run-all""rollup""rollup-plugin-commonjs""rollup-plugin-livereload""rollup-plugin-node-resolve""rollup-plugin-svelte""rollup-plugin-terser""svelte"

Como puedes ver, es el núcleo de Svelte, más Rollup (una alternativa a Webpack) y algunos de sus complementos. Además npm-run-all, una herramienta CLI que se utiliza para ejecutar varios scripts npm en paralelo o secuencialmente.

Ahora estamos listos para ejecutar nuestro sitio Svelte en modo de desarrollo, ejecutando

npm run dev

Esto iniciará la aplicación en el host local, en el puerto 5000, de forma predeterminada:

Si apunta su navegador allí, verá el ejemplo “¡Hola mundo!”:

Ya está listo para abrir el código en su editor favorito. La srccarpeta contiene todo lo que necesita para modificar la aplicación: el main.jsarchivo:

Este archivo es el punto de entrada y en este caso inicializa el componente App, que está definido en App.svelteun componente de archivo único:

scriptexport let name;/scriptstyleh1 {color: purple;}/styleh1Hello {name}!/h1

Si estás familiarizado con Vue.js , se trata de un concepto similar. Defines el marcado, el estilo y el código JavaScript para cada componente en un solo .sveltearchivo.




Tal vez te puede interesar:

  1. Introducción a React
  2. Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
  3. Cómo cambiar el valor de un nodo DOM
  4. Cómo comprobar si un elemento DOM tiene una clase

Introducción a Svelte: un breve tutorial

Desde que comencé a usar Hugo como generador de sitios estáticos para crear sitios web, me encantó este enfoque de publicación en la web, en comparación c

programar

es

https://aprendeprogramando.es/static/images/programar-introduccion-a-svelte-un-breve-tutorial-2106-0.jpg

2024-11-02

 

Introduccion a svelte un breve tutorial 1
Introduccion a svelte un breve tutorial 1

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

 

 

Update cookies preferences