-
Notifications
You must be signed in to change notification settings - Fork 13
/
Svelte.txt
181 lines (127 loc) · 5.47 KB
/
Svelte.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
====================
Guía de Svelte by dM
====================
¿Qué es Svelte?
===============
Svelte es un framework de JavaScript para construir aplicaciones web
interactivas y dinámicas. Lo que distingue a Svelte de otros frameworks como
React o Angular es que Svelte se centra en la compilación en lugar de en la
ejecución en tiempo real.
En otras palabras, Svelte no carga una biblioteca de tiempo de ejecución en el
navegador para actualizar la página. En su lugar, el código de la aplicación se
compila en JavaScript puro durante el proceso de construcción, lo que significa
que el navegador solo necesita descargar y ejecutar el código final. Esto puede
hacer que las aplicaciones sean más rápidas y ligeras.
Svelte también utiliza un enfoque diferente para manejar el estado de la
aplicación en comparación con otros frameworks. En lugar de depender de
bibliotecas de gestión de estado externas, Svelte incluye su propio sistema de
gestión de estado, que se integra bien con el enfoque de compilación. En
general, Svelte es una herramienta muy poderosa y popular para la construcción
de aplicaciones web modernas.
Instalación en GNU/Linux Debian
===============================
Probado en GNU/Linux Debian 11
1- Asegúrate de tener Node.js y npm instalados en tu sistema.
2- Crear un nuevo proyecto de svelte:
$ npx degit sveltejs/template my-svelte-project
Si no está instalado te dirá que necesita instalar el paquete degit
Need to install the following packages:
Ok to proceed? (y) y
> cloned sveltejs/template#HEAD to my-svelte-project
Esto creará un nuevo directorio llamado "my-svelte-project" en tu ubicación
actual y descargará el proyecto base de Svelte.
El directorio creado contiene:
my-svelte-project
package.json
public
README.md
rollup.config.js
scripts
src
3- Navega al directorio del proyecto recién creado e instala las dependencias
usando el siguiente comando:
$ cd my-svelte-project
$ npm install
Esto instalará todas las dependencias del proyecto, incluyendo el propio
framework de Svelte.
¡Y eso es todo! Ahora puedes comenzar a desarrollar tu aplicación Svelte en
Debian.
4- Compilar los archivos del proyecto
$ npm run dev
Esto levantara el proyecto en la dirección http://localhost:8080 la cual se
puede visitar desde el navegador web donde podrás ver un "Hello world!"
En los archivos main.js y App.svelte que están en la carpeta src podrás
ver un ejemplo de como se crea el hola mundo que vemos en el navegador.
Hola mundo simple
=================
Para hacer un "Hola mundo" en Svelte, sigue estos pasos:
1- Abre el directorio de tu proyecto Svelte en tu editor de código preferido.
2- Crea o edita un nuevo archivo llamado App.svelte en la carpeta src.
En el archivo App.svelte, escribe lo siguiente:
<script>
let nombre = 'Mundo';
</script>
<h1>Hola, {nombre}!</h1>
Este código define una variable llamada nombre y la usa en un encabezado que
dice "Hola, {nombre}!".
En el archivo main.js, reemplaza el contenido existente con lo siguiente:
import App from './App.svelte';
const app = new App({
target: document.body
});
export default app;
Este código importa el componente App desde el archivo App.svelte y lo
renderiza en el cuerpo del documento HTML.
Guarda los cambios en ambos archivos.
En la terminal, ejecuta el siguiente comando para iniciar el servidor de desarrollo:
Abre un navegador web y navega a http://localhost:8080. Deberías ver el
mensaje "Hola, Mundo!" en la página.
¡Y eso es todo! Ahora has creado tu primera aplicación Svelte.
Hacer una solicitud HTTP a un endpoint desde una aplicación Svelte
==================================================================
Puedes usar la API Fetch de JavaScript. Fetch es una función nativa del
navegador que te permite realizar solicitudes HTTP y recuperar los datos que se
devuelven en una promesa.
Aquí te muestro un ejemplo básico de cómo usar Fetch en Svelte:
En el archivo .svelte donde quieras hacer la solicitud, importa la función Fetch
de JavaScript:
<script>
import { onMount } from 'svelte';
let data;
onMount(async () => {
const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
data = await response.json();
});
</script>
En este ejemplo, la solicitud HTTP se hace utilizando la función fetch a la URL
https://jsonplaceholder.typicode.com/todos/1. Una vez que se recibe la
respuesta, se convierte a formato JSON utilizando el método json(), y se
almacena en la variable data.
Utiliza la variable data en tu plantilla .svelte para mostrar la información
recibida:
<main>
{#if data}
ID: {data.id}
<br>
Title: {data.title}
<br>
Completed: {data.completed}
{:else}
<p>Loading...</p>
{/if}
</main>
En este ejemplo, se muestran dos propiedades del objeto recibido: title y
completed. La petición a la API se realiza de forma asíncrona en la función
"onMount", lo que significa que el valor de "data" aún no está disponible
cuando se renderiza la página y se intenta mostrar su propiedad "title".
Para solucionarlo, puedes agregar una comprobación para verificar si "data"
tiene un valor antes de intentar acceder a su propiedad, por eso se agre el
{#if data}
¡Y eso es todo! Ahora has hecho una solicitud HTTP desde tu aplicación Svelte y
has mostrado la información recibida en la plantilla. Recuerda que puedes
personalizar la solicitud y la respuesta para adaptarse a tus necesidades
específicas.
Fuentes
=======
ChatGPT y dM