Curso de Svelte

Clases del Curso de Svelte

Instruido por:
Oscar Barajas Tavares
Oscar Barajas Tavares
Básico
3 horas de contenido
Ver la ruta de aprendizaje
Pugstagram
Proyecto del curso
Pugstagram

Crea una aplicación de red social tipo Instagram utilizando Svelte. Desarrolla los componentes de la aplicación y vincúlalos. Implementa estilos para dar una gran experiencia de usuario. Conecta una API a Pugstagram para obtener datos y finalmente desplegar la app en Internet.

Curso de Svelte

Curso de Svelte

Progreso del curso:0/26contenidos(0%)

Contenido del Curso
Tutoriales de estudiantes
Preguntas de estudiantes

Progreso del curso:0/26contenidos(0%)

Introducción

Material Thumbnail

Para qué sirve Svelte y qué aprenderas sobre él

00:50 min

Material Thumbnail

¿Qué es Svelte?

02:17 min

Elementos básicos de Svelte

Material Thumbnail

Primeros pasos

06:51 min

Material Thumbnail

Estilos

07:30 min

Material Thumbnail

Componentes

06:37 min

Material Thumbnail

Estructura de control: each

05:59 min

Material Thumbnail

Eventos del DOM y Binding

10:14 min

Configuración del proyecto

Material Thumbnail

Presentación de Pugstagram

04:22 min

Material Thumbnail

Configurar el entorno de trabajo

12:05 min

Material Thumbnail

Servidor de desarrollo local

10:31 min

Desarrollo de la aplicación

Material Thumbnail

Componentes Header y Sidebar

11:46 min

Material Thumbnail

Componente Timeline

13:06 min

Material Thumbnail

Estilos de nuestra aplicación

09:38 min

Material Thumbnail

Conectar nuestra aplicación a una API

11:39 min

Material Thumbnail

Componente Comments

10:27 min

Deployment

Material Thumbnail

Despliegue en Netlify

10:07 min

Material Thumbnail

Continúa con el Curso de Sapper

00:56 min

Apuntes de Svelte

00:01 min

nuevosmás votadossin responder
sr.cristofher
sr.cristofher
Estudiante

No hay una manera como un estado para no tener que pasar props de hijo en hijo?

1
sr.cristofher
sr.cristofher
Estudiante

Cual es la diferencia entre usar el link en el header a usar el import en el style tag??
Afecta al performance? SI es con link relentiza el cliente, entonces es mejor usar @impport?

1
Marco Octavio Luna Vargas
Marco Octavio Luna Vargas
Estudiante

Disculpe tengo un problema al ejecutar

npm run start 
Selección_003.png

Pero no me sale lo que debería salir , y esto es lo que me sale en la terminal

> [email protected]1.0.0 start /home/marco/Dropbox/Escritorio/PROGRAMACION Y ARDUINO/SVELTE-SAPPER/Pugstagram
> webpack serve

ℹ 「wds」: Project is running at http://localhost:8080/
ℹ 「wds」: webpack output is served from /
ℹ 「wds」: Content not from webpack is served from /home/marco/Dropbox/Escritorio/PROGRAMACION Y ARDUINO/SVELTE-SAPPER/Pugstagram
⚠ 「wdm」: asset bundle.js 153 KiB [emitted] [minimized] (name: main) 1 related asset
asset ./index,html 238 bytes [emitted]
runtime modules 432 bytes 3 modules
orphan modules 62.2 KiB [orphan] 2 modules
cacheable modules 398 KiB
  modules by path ./node_modules/webpack-dev-server/client/20.9 KiB 10 modules
  modules by path ./node_modules/html-entities/lib/*.js 61 KiB 5 modules
  modules by path ./node_modules/url/ 37.4 KiB 3 modules
  modules by path ./node_modules/querystring/*.js 4.51 KiB
    ./node_modules/querystring/index.js 127 bytes [built] [code generated]
    ./node_modules/querystring/decode.js 2.34 KiB [built] [code generated]
    ./node_modules/querystring/encode.js 2.04 KiB [built] [code generated]
  modules by path ./node_modules/webpack/hot/1.42 KiB
    ./node_modules/webpack/hot/emitter.js 75 bytes [built] [code generated]
    ./node_modules/webpack/hot/log.js 1.34 KiB [built] [code generated]
./node_modules/webpack/hot/ sync nonrecursive ^\.\/log$ 170 bytes [built] [code generated]

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production'for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

webpack 5.41.1 compiled with 1 warning in3427 ms
ℹ 「wdm」: Compiled with warnings.

Gracias por su ayuda

0
Marco Octavio Luna Vargas
Marco Octavio Luna Vargas
Estudiante

Buenos Días
Les comento que estoy teniendo algunos problemas al iniciar con Svelte, yo actualmente estoy un Windows, y me descargue una terminal para usar la terminal de Linux en Windows

npx degit sveltejs/template svelte

Y me sale este error

Command ‘npx’ not found, but can be installed with:

sudo apt install npm

Y no puedo instalar npm por que me sale un error
Me pueden ayudar porfavor

1
sr.cristofher
sr.cristofher
Estudiante

Osea que el bind: es como el onChange?

0
sr.cristofher
sr.cristofher
Estudiante

veo que se usa un template… Se puede hacer Manualmente y con Yarn en vez de npm??

1
Carlos Torres
Carlos Torres
Estudiante

Buenas, no he podido empezar el curso, pero tengo un poco de experiencia en svelte, les queria solciitar apoyo con un caso que tengo en especifico con un filter dentro de una tabla la cual contiene en los td dropdown, ahora bien al momento de filtrar se pierden los valores del selected cuando es un solo registro y sobreescribe tomando los valores del primer row, les adjunto a usted profe y a los mucchachos para ver si me pueden apoyar con este tema.
https://svelte.dev/repl/61cbfece91634507b7466fd5bb9d125a?version=3.35.0

1
Cristian Camilo Perez Cardona
Cristian Camilo Perez Cardona
Estudiante

Que tema de VS code tienes ?

0
Cristian Camilo Perez Cardona
Cristian Camilo Perez Cardona
Estudiante

Quiero saber su la sintaxis :global es de svelte nativo o de CSS, como tal, la pregunta es si se puede utilizar con html5 básico, o en react, vuejs.

/** Global styles */
  :global(body){
    background-color: #f2eee2;
    color: #0084f6;
  }

  /** Creating variables */
  :global(:root) {
    --theme-color: purple;
    --theme-text-dark-mode: #bfc2c7;
  }

  :global(body.dark-mode) {
    background-color: #1d3040;
    color: #bfc2c7;
  }
0
antonn-fernandez
antonn-fernandez
Estudiante

$ npm run build

[email protected] build /home/andtooan/pugstagram
webpack --mode production

assets by status 238 bytes [cached] 2 assets

ERROR in main
Module not found: Error: Can’t resolve ‘babel-loader’ in '/home/andtooan/pugstagram’
resolve ‘babel-loader’ in '/home/andtooan/pugstagram’
Parsed request is a module
using description file: /home/andtooan/pugstagram/package.json (relative path: .)
resolve as module
looking for modules in /home/andtooan/pugstagram/node_modules
single file module
using description file: /home/andtooan/pugstagram/package.json (relative path: ./node_modules/babel-loader)
no extension
/home/andtooan/pugstagram/node_modules/babel-loader doesn’t exist
.js
/home/andtooan/pugstagram/node_modules/babel-loader.js doesn’t exist
/home/andtooan/pugstagram/node_modules/babel-loader doesn’t exist
looking for modules in /home/andtooan/node_modules
single file module
No description file found in /home/andtooan/node_modules or above
no extension
/home/andtooan/node_modules/babel-loader doesn’t exist
.js
/home/andtooan/node_modules/babel-loader.js doesn’t exist
/home/andtooan/node_modules/babel-loader doesn’t exist
/home/node_modules doesn’t exist or is not a directory
/node_modules doesn’t exist or is not a directory

webpack 5.25.0 compiled with 1 error in 1081 ms
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: webpack --mode production
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /home/andtooan/.npm/_logs/2021-03-16T23_51_26_427Z-debug.log

Me aparece todo eso y no funciona, aiudaaaaaa, estoy chiquito u.u

2