Curso de Svelte

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

¿Qué es Svelte?

02:17 min

Elementos básicos de Svelte

Material Thumbnail

Primeros pasos

06:51 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
aibique
aibique
Estudiante

Osea que el bind: es como el onChange?

0
aibique
aibique
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
Johan Stivens Suarez Galindo
Johan Stivens Suarez Galindo
Estudiante

Entonces para que sirve el ContextAPI que también trae svelte integrado?

0
Mauricio Perera
Mauricio Perera
Estudiante

Disculpen me encuentro tomando el curso pero al correr npm build tengo este error:
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.

  • configuration has an unknown property ‘plugin’. These properties are valid:
    object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry?, externals?, infrastructureLogging?, loader?, mode?, module?, name?, node?, optimization?, output?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, serve?, stats?, target?, watch?, watchOptions? }
    For typos: please correct them.
    For loader options: webpack >= v2.0.0 no longer allows custom properties in configuration.
    Loaders should be updated to allow passing options via loader options in module.rules.
    Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:
    plugins: [
    new webpack.LoaderOptionsPlugin({
    // test: /.xxx$/, // may apply this only for some modules
    options: {
    plugin: …
    }
    })
    ]

No se si alguien tenga idea de cual pueda ser el error, mi webpack.config.js esta asi:
`const path = require(‘path’);
const HtmlWebPackPlugin = require(‘html-webpack-plugin’);

module.exports = {
entry: ‘./src/index.js’,
output: {
path: path.resolve(__dirname, ‘dist’),
filename: ‘bundle.js’,
},
resolve: {
extensions: ["*", “.mjs”, “.js”, “.svelte”],
alias: {
"@": path.resolve(__dirname, “./src”),
"@Components": path.resolve(__dirname, “./src/components”)
}
},
module: {
rules: [{
test: /.js?$/,
exclude: /node_modules/,
use: {
loader: ‘babel-loader’,
},
},
{
test: /.svelte$/,
exclude: /node_modules/,
use: {
loader: “svelte-loader”,
},
},
],
},
plugin: [
new HtmlWebPackPlugin({
inject: true,
template: ‘./public/index.html’,
filename: ‘./index.html’,
}),
],
};`

2
Cristian Daniel Jesus Rios
Cristian Daniel Jesus Rios
Estudiante

No me quedo claro lo que hace el store y que logica cumple este code:

exportconst likeCount = writable(0);

Por lo que entiendo de localStorage hace lo mismo, osea guarda un valor en memoria y lo inicializa en 0 ?

0
lahincapie
lahincapie
Estudiante

Hola comunidad… Si quiero hacer el sitio funcional. ósea, que se guarden los comentarios y los me gustan, que el login funcione, que curso(s) debo seguir?

0