Hola Frontender, bienvenido, bienvenida a este curso gratuito de Svel.
Si te estás reenganchando ahora, esta es la tercera clase, así que no te pierdas la primera que te dejo por aquí,
que fue la introducción a Svel para contar qué es este framework y por qué es tan interesante,
en qué se diferencia respecto a los demás.
Y en la segunda clase, que te dejo el enlace también por aquí arriba por si te lo has perdido,
iniciamos nuestro proyecto y preparamos el entorno de desarrollo.
Es importante que lo sigas porque ese mismo proyecto es el que vamos a continuar desarrollando en esta clase.
Igualmente no hace falta que lo escribas y te lo piques entero porque tengo preparado un repositorio
para que te lo clones, como veremos al principio de esta clase.
Y si ya has hecho las dos anteriores clases, pues perfecto, vamos a por esta tercera,
donde vamos a ver cómo crear componentes reutilizables aquí en Svel y además cómo podemos dotarlos de reactividad,
esto es, que tengan un estado interno y que al cambiar el valor del estado veamos reflejados esos cambios en la interfaz.
Y es muy interesante porque Svel hace una especie de magia.
Así que si ya estás preparado o preparada, vamos a empezar con esta clase de Svel, State y Componentes.
Pues vamos a empezar la tercera clase y como os decía en el vídeo de introducción,
pues aquí tenemos el repositorio preparado con todo nuestro código.
Tengo aquí una rama que llamamos InicianProyectoConSvel, que es donde tenemos todo el código de la última clase.
Así que lo que vamos a hacer es clonar este repositorio.
Voy a copiarme esto por aquí, voy a mi terminal y voy a hacer un git clone de este repositorio.
Ahora, una vez que lo tenemos, entramos en la carpeta y podemos ver que solo tiene un readme.
Eso es esta rama master, así que tenemos que cambiar a la rama de Inicia, Inicia un proyecto con Svel.
Ahora, si miramos, sí que tenemos como todos los archivos de este proyecto, tenemos el package.json,
así que tenemos que hacer un npm install para instalar todas las dependencias de nuestro proyecto.
Esto nos debería instalar Svel, nos debería instalar todo el entorno de desarrollo.
No debería tardar mucho, va a tardar unos segundos, perfecto, voy a limpiar un poquito la terminal.
Y ahora lo que podría hacer es hacer un npm run para ver todo lo que podría hacer,
que es una build, un modo dev, que este es el que nos interesa.
Voy a abrir esto en mi editor de código, esta carpeta.
Vale, la he dejado por aquí.
Voy a mover esto aquí.
Muy bien, ya lo tengo.
Vale, aquí tenemos nuestro editor de código, en mi caso es Visual Studio Code.
Voy a abrir mi terminal.
Me gusta tenerlo todo en la misma ventana.
Así que ya podemos empezar a abrir el entorno de desarrollo con npm run dev.
Esto nos va a abrir en el puerto 5000 un servidor donde va a estar nuestra aplicación funcionando.
Vamos a ponerlo aquí.
Y esto es como lo dejamos con este hola mundo, hello world, que habíamos hecho en la anterior clase.
A partir de aquí vamos a seguir trabajando.
En source teníamos el main.js, que es el punto de entrada de nuestra aplicación,
donde estamos cargando este componente app, que es el que está pintando esto.
Y aquí lo tenemos, el app donde teníamos el script, que era la prop, el export let name.
Es la prop que podemos, digamos, configurar desde fuera.
En main teníamos word, pero podíamos poner aquí mid dev.
Y al guardar los cambios, pues vemos todo aquí como se refleja.
Vale, luego en style teníamos los estilos que estábamos personalizando.
En este caso lo teníamos en azul, lo podríamos poner de color rojo y cambiaría.
Y esto es lo que estaría renderizando nuestro componente.
Si en lugar de hola ponemos hello, pues nos saldría hello.
Así que, perfecto.
Vale, ahora, esto es un ejemplo bastante sencillo.
Pero me gustaría que de alguna forma cambiase el nombre, ¿no?
Si al principio es name, como lo estamos pasando aquí, mid dev, me gustaría que si le pongo aquí un botón
y le ponemos que sea cambiar nombre, pues que al hacer clic en el cambiar nombre,
le cambie el nombre en lugar de mid dev ponga otra cosa.
¿Cómo lo podemos hacer?
Vale, pues lo primero que tenemos que hacer es utilizar lo que se llama como una directiva.
En este caso, una directiva es como el onClick de React, pues es como decirle que cuando se haga clic en este elemento,
ejecute una función.
En este caso, pues vamos a decirle que sería la función handleClick.
Esta función handleClick no existe.
Tenemos que crearla.
La vamos a crear aquí.
Vamos a llamar function handleClick.
¿Y qué es lo que queremos que haga esta función handleClick?
Pues lo que queremos que haga esta función handleClick es que el name pase a ser otro nombre.
Y ya está.
Vamos a guardar los cambios.
Y ahora podemos ver que estamos, cuando hacemos un clic, ejecutamos handleClick y name,
hacemos que ahora pase a ser otro nombre.
Vale.
Vamos a darle a cambiar nombre.
Y ya está.
Cambia el nombre.
¿Cómo está funcionando esto?
Esto acaba de funcionar como si fuese un estado interno de nuestro componente,
pero nosotros no le estamos indicando en ningún sitio que sea un estado.
Así que es bastante sorprendente.
Es como si detectases Bell que es un estado y que por eso se tiene que volver a renderizar el componente.
No es como React que tenemos que decirle que es un state.
Pues vamos a intentar ver aquí en el código qué es lo que está pasando.
Si inspecciono esto y en Nickware voy a buscar el bundleJS, esto es todo lo que está compilando Svelte,
porque recordad, framework de Svelte es porque compila, tiene un paso de compilación.
Voy a buscar este name.
Vamos a buscar el name.
Y podríamos ver que en algunos sitios nos ha como envuelto este name en algunas funciones,
como por ejemplo, vamos a ver aquí, aquí.
Tenemos que cuando hacemos un handleClick, que es esta función handleClick que hemos hecho nosotros,
puedes ver que este name, que lo que hace es reasignar,
en realidad Svelte lo ha envuelto como en un método que llama invalidate.
Así que lo que hace de alguna forma es detectar con ese paso de compilación que esto es un estado
y dice vale, voy a invalidar este propio componente, lo voy a volver a renderizar cuando se cambie el valor de name.
Es como que detecta que es el state y lo hace por nosotros, de forma totalmente transparente.
Aquí es donde está la magia un poquito de Svelte.
Vale, ahora que tenemos esto, a mí me gustaría enseñarte todavía otro ejemplo rápido de state,
uno que es el más típico.
Lo que vamos a hacer, en lugar de tener este botón y cambiar el nombre,
vamos a hacer el típico ejemplo del contador.
Sé que es muy típico, pero es que me parece que es rápido y bastante interesante.
Así que vamos a hacer algo, vamos a este export, vamos a acercarse a un contador
y el contador lo que vamos a hacer es incrementarlo en uno, cuando le demos un clic.
Vale, ahora aquí esto, claro, ahora esto no es un h1, vamos a cambiarlo a el span
y lo que vamos a renderizar es justamente este contador.
Vale, guardamos los cambios y vale, ¿por qué no sale undefined?
Porque ahora mismo este contador no tiene ningún valor por defecto.
Para ponerle un valor por defecto, aunque sea una prop, porque aquí como estamos haciendo un export,
es una prop que va hacia afuera, pues hay que ponerle un igual y el valor que queremos que tenga por defecto.
Ahora es cero y cada vez que le damos clic a incrementar, nos lo incrementa.
Ahora, hay un patrón bastante típico en librerías como React que a través de las props le podemos pasar un valor inicial,
pero queremos que sea luego un estado.
Por ejemplo, aquí en estas props tenemos el name, que es midudev, vale, pues queremos pasarle un initial counter, ¿vale?
Y queremos que empiece a contar a partir de 5.
Voy a guardar los cambios y aquí lo que voy a hacer es que este export ahora no va a ser el contador, va a ser initial counter, ¿vale?
Vamos a poner que por defecto sea cero.
Ahora, lo que vamos a tener aquí es el estado interno de nuestro componente, que va a ser contador,
y lo que va a pasar es que contador va a tomar el valor de initial counter,
o sea, estamos inicializando lo que vamos a utilizar de estado con una prop que le viene de fuera.
Voy a guardar los cambios, ¿vale?
Y puedes ver que empieza en 5. ¿Por qué?
Porque le estamos pasando como prop a este componente el initial counter a 5.
Entonces, estamos tomando esto como initial counter a 5, aunque si no le pasasemos ninguno,
empezaría en 0, pero como le estamos pasando 1 a 5, empieza en 5.
Y luego este valor que toma desde las props es lo que utiliza como estado inicial del componente.
Y a partir de ahí, pues ya tenemos que initial counter es 5, el contador empezará en 5,
y cada vez que le damos, lo incrementa, ¿vale?
Ahora, esto está muy bien, pero me gustaría poner más de un contador, ¿no?
Me gustaría que tuviéramos más de un contador en la aplicación.
¿Cómo podemos lograr esto?
Pues voy a crear aquí un nuevo archivo, le va a llamar counter.svelte,
y vamos a crear nuestro primer componente.
Como en la app tengo básicamente el contador, lo que voy a hacer es copiarlo todo,
lo selecciono y lo pego aquí.
Muy bien.
Y ahora en la app vamos a borrarlo todo.
La app lo único que quiero es que renderice más de un contador.
¿Cómo puedo conseguir este contador?
Pues tengo que importar el componente del otro archivo.
Vamos a hacer un import de counter y lo hacemos desde counter.svelte.
Pero fíjate en una cosa, ¿vale?
Porque en counter no hemos puesto en ningún sitio que exportamos este componente.
Esto es algo diferente a como lo haríamos en otras librerías.
Es que no hace falta poner ningún tipo de export.
El único export que tenemos aquí es el de esta prop.
Pero el componente en sí no lo exportamos.
Esto ya se detecta automáticamente.
Así que ahora aquí que tenemos el script y tenemos el counter,
¿qué es lo que queremos renderizar hoy?
¿Qué es lo que queremos renderizar a nivel de app?
Pues el counter.
Muy bien.
Guardamos los cambios.
Y aquí tenemos un contador.
Si ahora pongo aquí otro contador y guardo los cambios,
pues tenemos dos contadores.
Así lo mismo.
Con un tercer contador, pues tres contadores.
Y cada uno funciona de forma totalmente independiente.
Ahora, ahora esto no lo necesitamos.
En el punto de entrada está prop que le estamos pasando al componente app.
Ya no tiene ningún sentido.
Así que la vamos a quitar.
Muy bien.
Y lo que quiero enseñarte antes de terminar es que en counter puedes ver que el style está estilando un span.
Si yo voy a app y aquí le añado un span y digo que ponemos, pues no sé,
tenemos counters aquí,
podrás ver que este span no está estilado de la forma como lo hemos estilado los otros que están dentro del counter.
Quiero decir, este estilo que aquí pone que estamos estilando el span es totalmente independiente al span que hay aquí.
Así que podríamos añadir un style aquí, decir que queremos estilar span de este componente
y le vamos a poner que sea de color azul.
Si guardamos los cambios, podemos ver que el span de este componente
no colisiona con los estilos del span de dentro del componente counter.
Esto lo hace Svelte de forma totalmente automática.
De hecho, si miramos aquí los elementos,
este span tiene una clase totalmente diferente a los span que tiene el contador.
Así que de esta forma no va a colisionar.
Nos ha creado como un hash único.
Esto es muy interesante y nos lo hace totalmente de forma transparente Svelte
para que no nos tengamos que preocupar de nada.
Vamos a quitar este estilo porque este estilo no interesa
y vamos a probar también, como hemos hecho antes, este initial counter.
Vamos a decirle que el primero va a tener un initial counter, pues no sé, de 2.
Vamos a copiar esto.
El segundo va a ser de 10 y el tercero va a tener por defecto.
Y aquí tenemos los cambios.
El incrementar el primero empieza en 2, el otro en 10 y el otro en 0
porque es el valor que tenemos por defecto en initial counter.
Así que con esto, pues ya tenemos un componente totalmente reusable que además tiene un estado.
Y hasta aquí la tercera clase de este curso gratuito de Svelte,
donde hemos visto cómo crear componentes reusables y cómo se crea el estado interno de un componente.
Y no me puedes decir que no es interesante la magia que hace Svelte.
Y si quieres más, pues ya sabes, dale like, suscríbete si no lo estás todavía, dale a la campanita,
comenta a ver qué te ha parecido el vídeo y en la siguiente clase vamos a ver cómo podemos manejar
o cómo podemos empezar a manejar un formulario para ir tomando forma nuestro proyecto de un buscador de películas.
Así que te veo en el siguiente vídeo, no te lo pierdas, aquí en Midudev.
¡Hasta luego!
¡Suscríbete!