¿Cómo crear un componente y gestionar propiedades en Svelte?
La gestión de propiedades en Svelte es esencial para construir aplicaciones robustas y escalables. Este artículo abordará la creación de componentes y la forma de trabajar con propiedades y valores por defecto, así como las propiedades por propagación.
¿Cómo crear un nuevo componente con valores por defecto?
Crear un componente en Svelte empieza por definir un archivo con el nombre del componente. Para mantener las convenciones, se empieza con una letra mayúscula y se usa la extensión .svelte.
Crear el componente: Inicia el componente con un script.
Definir las propiedades: Usa el método export let para gestionar las propiedades que serán recibidas desde otros componentes.
Establecer valores por defecto: Para un valor por defecto, asigna un valor al utilizar export let.
En este ejemplo, el componente llamado Text recibe una propiedad anotherText, que por defecto es "Lorem ipsum". Esto asegura que si no se recibe un valor desde el componente padre, aún se mostrará un texto.
¿Cómo integrar un componente en la aplicación?
Una vez creado el componente, el siguiente paso es integrarlo en tu aplicación principal.
Importar el componente: Utiliza la declaración import para añadirlo a tu aplicación.
Usar el componente: Llama al componente y asigna las propiedades que necesites.
<script>
import Text from './components/Text.svelte';
</script>
<Text anotherText="Hola" />
Aquí, el componente Text es importado y se le pasa la propiedad anotherText con el valor "Hola".
¿Cómo trabajar con objetos y propiedades por propagación?
Svelte permite la transmisión de múltiples propiedades mediante un objeto utilizando la técnica de propagación. Este método puede simplificar el manejo de varias propiedades.
Crear un objeto con datos: En tu aplicación principal, define un objeto que contenga todos los datos necesarios.
<script>const data ={name:"Óscar",lastName:"Barajas",age:31};</script>
Importar y usar el componente: Trae el componente e integra el objeto usando la propagación.
<script>
import Person from './components/Person.svelte';
</script>
<Person {...data} />
Al usar las llaves {...} se propagan todos los valores del objeto data al componente Person.
¿Cómo recibir y manejar propiedades en el componente receptor?
Con las propiedades propagadas en el componente receptor, se deben establecer usando export let, y luego representar como sea necesario dentro del componente.
<script>
export let name;
export let lastName;
export let age;
</script>
<div class="person">
<p>{name} {lastName}, {age}</p>
</div>
Al estructurar correctamente las propiedades en el componente hijo, puedes desglosarlas y usarlas de forma eficiente y clara.
Trabajar con componentes y propiedades en Svelte es una habilidad esencial para cualquier desarrollador que desee crear aplicaciones modernas y eficientes. Sigue explorando y mejorando tus habilidades Svelte para dominar completamente este poderoso framework.
Recomiendo la herramienta Relative path para apoyarse en el llamado de archivos.
¡Gracias por el aporte, Emmanuel!
¡Nunca pares de aprender! (Y practicar) ✨🦄
Excelente, gran aporte! Gracias! 👨🏻💻
Typo min 08:38 dage
Allí el typo era para dar una idea de que debían mostrarse los props con cada atributo del objeto:
data.name,
data.lastName,
data.age.
Había intentado mostrarlos tal cual, creyendo que había alguna especie de abstracción y no me resultó. 😵
Es decir, tras definir el objeto data e importar el componente, intenté hacer esto:
<Person {name} {lastName} {age}>
Paso de argumentos por propagación: Se envían de forma destructurada los elementos.
{...Objeto}
Esa no es considerada una buena practica ni en React y supongo que tampoco aca. El problema es que no sabes muy bien cuales son las props que estas enviando a tu componente. Igual y le estas mandando datos que no necesita.
También se puede mandar todo el objeto como un prop
<Person data={data}/>
y después en nuestro componente desestructurarlo
exportlet data;const{name, lastName, age}= data;
Es el mismo resultado pero para los que quieran seguir la notación del prop="value" puede ser más útil
En lugar de que realices varias veces
exportlet name
exportlet lastName
exportlet age
Puedes optar por
exportlet name, lastName, age
Hola Oscar, en este curso enseñan el tema de rutas para navegar entre pestañas?
En el curso de Sapper que sale próximamente aprendemos a trabajar con rutas.
que vaina profe, seria muy bueno un tutorial en el blog gndx.dev para manejar rutas sin necesidad de Sapper, ya que por acá no se logró
Propiedades en Svelte
La podemos realizar mediante dos formas:
De forma explícita:
// Componente padre App.svelte
<main>...
<Text anotherText="Hello!" />...
</main>
De forma implícita:
// Componente padre App.svelte
<main>...
<Person {...data} />...html
</main>// Componente hijo Person.svelte
<script> export let name;
export let gitHub;
export let rol;
</script><div class="p">{name} {gitHub} {rol}</div>
Nota. Considera que la segunda forma deberá estar llamado igualmente en el componente hijo.
Eslint me marca warning al hacer la propagación del objeto, ¿tú recomiendas que se haga o es mejor práctica pasar el nombre de cada uno de los elementos del objeto en lugar del {...data}?
La verdad es muy extraño que te marque un warning, ya que los spread operator se vienen utilizando desde ES6 en el 2015. (https://dev.to/sagar/three-dots---in-javascript-26ci), nos tocaria revisar la como esta configurado el eslint :)
Es raro que te marque ese error, que configuración tienes de ESLint?
Creamos la variable en la estructura de JS
exportlet anotherText;
Luego la utilizamos en la estructura html
<p>{anotherText}</p>
Luego en el componente que vamos a utilizar podemos enviarle el valor
<Text anotherText="Hola"/>
Si por algún motivo no le vamos a enviar valor y queremos que tenga uno por default haremos lo siguiente:
A qué se debe que tanto en Person.svelte y en App.svelte tengamos que exportar lo mismo? ¿Cuál es la mecánica? Gracias!
// Estas lineas de código son exactamente iguales en Person.svelte y en App.svelteexportlet name;exportlet lastName;exportlet age;
Podemos usar la desestructuración de objetos:
Para pasar los props a Person como un solo dato: <Person data={data} />
Luego en el componente:
`<script>
export let data;
const {nombre, apellido, edad}=data;
</script>`
`<div class="Person">
<p>{ nombre} { apellido } { edad }</p>
</div>
`
Las props son una forma de comunicar nuestros componentes padres con nuestros hijos, mandandoles datos para que los hijos puedan pintarlo en pantalla o traer datos de una API, pero es importante saber que al pasar una prop a un componente hijo no podremos modificarlos.
Pueden asignar los valores en una sola linea ej.:
./components/Person.svelte
<script>exportlet name, last, age
</script><div class="person"><ul><li>Name:{name}</li><li>Last:{last}</li><li>Age:{age}</li></ul></div>```
si quisiera duplicar un componente en mi archivo padre, como puedo identificar cada componente puesto que su id son iguales.
ejemplo si quisiera hacer un if comparando el nombre de Person. como indicarle en mi funcion que me refiero al nombre del 2do componente Person y no el primer componente Person.
Me gusta mucho más la forma en la que se indican los valores de los props de forma explícita según la estructura del objeto data:
data.name, data.lastName y data.age.
Aunque, claro, la sintaxis spread ({...data}) lo hace ver más sofisticado, más conciso.
Cuando queremos enviar como prop un objeto completo podemos usar {…objeto} siempre y cuando los campos del objeto coincidan con los nombres de las props del componente (ejemplo name o lastName)
Oscar necesita lentes xD
jaja. Yo me quedé inquieto que no viera el error.
Me encanta lo pausado que habla el profesor, porque le capto todo
👌
Pasando un objeto por propagación.
<script>const data ={name:'Cristian',lastName:'Perez',age:30};</script>
Básicamente creando un destructuring igual en React.
