Estos son los comandos para crear la carpetas de ejercicios de RxJS:
mkdir curso-rxjs
cd curso-rxjs
npm init --yes
npm i rxjs webpack webpack-dev-server
npm i -D webpack-cli
También puedes acceder al repositorio de este curso donde se encuentran los archivos de configuración (como ).
Estoy tomando el curso, pero usando Typescript.
Aquí el ejemplo del profe.
import{Observable,Subscriber}from"rxjs";// Las variables que sean observables se les argega el $const observableAlfa$ =newObservable<number | string>(subscriber=>{ subscriber.next(1);//Dentro del flujo de información del observable solo hay numeros. subscriber.next(2); subscriber.complete(); subscriber.next(20);});//Se va a crear un observador que se subscribirá al observable.const observator ={next:(value: number | string)=>{console.log(`The value is: ${value}`)},complete:()=>{console.log(`The observable has no values`)},error:(error:Error)=>{console.error(error.message);}}observableAlfa$.subscribe(observator);
sabes cual puedo encontrar de este mismo tema pero enfocado en typescript?
No hay ese curso dentro de platzi, pero no hay necesidad. Solo necesitas experiencia con Ts, que la puedes obtener en los cursos de Ts que están en platzi(son muy buenos). Por ejemplo, en el ejemplo que coloqué me basé en el módulo de Genéricos del curso de POO y asincronismo con TS.
Para los que quieran usar typescript instalan ts-loader
import{Observable}from"rxjs";// agregar $ al finalconst observableAlfa$ =newObservable(suscriber=>{ suscriber.next(10); suscriber.next(2); suscriber.next(3); suscriber.next(1); suscriber.complete()//observable finished//suscriber.error('Error en el flujo') //observable finished})const observador ={next:(value)=>{console.log('Value', value);},complete:()=>{console.info('Finished');},error:(error)=>{console.error(error)}}observableAlfa$.subscribe(observador);
npm start to start the project
Hola a todos, tengo la siguiente duda, estaba ejecutando el comando "npm start", pero me retorna el sig. error:
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:[newwebpack.LoaderOptionsPlugin({// test: /\.xxx$/, // may apply this only for some modulesoptions:{ouput: …
}})]
saben como puedo continuar, xfa, gracias
¡Hola Marcelino! Claro.
El error ocurrió porque en el archivo de configuración de Webpack (webpack.config.js) agregaste como propiedad ouput, en lugar de output. Falta la letra t después de la u.
NOTAS:
La convención al nombrar los observables es que se les coloque un signo $ al final. Eso es lo que distingue a los observables.
Ejemplo:
const observableAlfa$ =newObservable;
En el observador sólo el método next y error emiten valores, emiten información, next emite el valor en sí y el error el error.
Ejemplo:
Para este ejecicio lo haremos en Js asi que para eso, primero inicalizacimos nuestro proyecto de npm y instalamos la dependencia de RsJS y Webpack para el renderizado de nuestra aplicacion:
npm init -yes
npm i rxjs
npm i webpack webpack-dev-server
{..."scripts":{"test":"echo \"Error: no test specified\" && exit 1","start":"webpack serve --open --mode development"},..."dependencies":{"rxjs":"^7.8.1","webpack":"^5.87.0","webpack-dev-server":"^4.15.1"},"devDependencies":{"webpack-cli":"^5.1.4"}
Y ahora creamos nuestro observable
En primer lugar, se importa la clase Observable de la librería RxJS.
import{Observable}from'rxjs'
A continuación, se crea una instancia de Observable llamada observableAlfa$. El signo '$' al final del nombre es una convención que indica que es un Observable.
En este caso, se emiten varios eventos utilizando el método next() del suscriptor. Los valores 'Alfa', 'Beta', 'Gamma' y 'Delta' son enviados secuencialmente como eventos.
Después, se simula un error utilizando el método error() del suscriptor. Esto provoca que el Observable emita un error.
Finalmente, se llama al método complete() del suscriptor para indicar que la emisión de eventos ha finalizado.
A continuación, se define un objeto llamado observador que tiene tres métodos: next, error y complete. Cada uno de estos métodos simplemente imprime el valor recibido en la consola.
Finalmente, se suscribe el objeto observador al Observable observableAlfa$ utilizando el método subscribe(). Esto significa que el objeto observador actuará como el suscriptor y recibirá los eventos emitidos por observableAlfa$.
observableAlfa$.subscribe(observador)
Intento andar el npm start pero me aparece este error en la consola
UncaughtTypeError:(0, _util_pipe__WEBPACK_IMPORTED_MODULE_3__.pipeFromArray)(...) is not a function at Observable.pipe(Observable.js:87:85) at eval(index.js:19:17) at ./src/index.js(bundle.js:443:1) at __webpack_require__(bundle.js:472:33) at bundle.js:1545:37 at bundle.js:1547:12
👋 ¡Hola Carlos! ¿Podrías escribir tu código en una respuesta? Luce como un error de sintáxis al crear el observable.
Pero que clase tan buena..!!
Creación de proyecto con vite.js
npm create vite@latest course-rxjs
cd course-rxjs
npminstallnpm i rxjs
npm run serve
el Observer es un callback
Buena tarde profesor Marcelo tengo 51 años nunca realice ninguna programacion llegue a la case 6 pero lamentablemente veo que el curso es para personas que tiene un esquema conceptual previo de la progtramacion , no se la verdad como iniciar .
Solo podemos responder preguntas relacionadas con esta clase.
¡Hola Andrés!,
Sí, puedes inciar con la Ruta de Programación y Desarrollo de Software:
Y una vez termines el curso de Python y de Introducción a Inteligencia Artificial puedes iniciar con este curso 💚
En mi caso no logro hacer que me muestre los resultados en el navegador, seguí todos los pasos de la configuración, no comprendo muy bien que esta pasando. La consola del navegador solo no muestra nada o este mensaje : Failed to load resource: the server responded with a status of 404 (Not Found)
Comparte el código en tus archivos para poder ayudar
Hola AngieLore, a mi me pasaba igual, en mi caso salía error 404 porque configuré mal el webpack.config.js.
En ves de poner module.exports = {....} tenía puesto module.export = {...}, en resumen no le había puesto la "s" al exports
Puede que en tu caso sea un tema similar.
