Fundamentos de programación reactiva
¿Por qué deberías aprender programación reactiva con RxJS?
La teoría de la programación reactiva
Introducción a la librería RxJS
Extensiones Reactivas
La idea de la reactividad
Diagrama de canicas
Generación de Observables
Creación de un Observable
Introducción al Proyecto PlatziWordle
Observables: fromEvent
Aplicación de fromEvent en PlatziWordle
Observables: Subject
Aplicación de Subject en PlatziWordle
Observables: from y of
Observables: interval y time
Finalización del Proyecto PlatziWordle
Transformación con Operadores
Introducción al Proyecto PlatziBoard
La idea de un Operador
Operadores: map, reduce y filter
Aplicación de map en PlatziBoard
Operadores de distinción
Operadores de tiempo
Operadores: mergeAll, mergeMap
Aplicación de mergeAll en PlatziBoard
Operadores: takeUntil
Aplicación de TakeUntil en PlatziBoard.
Operadores: pluck
Operadores: startWith, endWith
Finalización del Proyecto PlatziBoard
PlatziWordle con opción de reinicio
Manejo de errores
Manejo de errores en RxJS
Peticiones HTTP con RxJS
ajax
fromFetch
Recomendaciones y conclusión
Documentación de RxJS
Notas sobre RxJS
Recomendaciones y futuro de RxJS
Bonus
Implementación de PlatziBoard en React
Despedida
Próximos pasos con RxJS
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Última oportunidad para asegurar tu aprendizaje por 1 año a precio especial
Antes: $249
Paga en 4 cuotas sin intereses
Termina en:
Aportes 4
Preguntas 0
Avanzamos aquí unos últimos detalles de PlatziWordle.
En esta clase ya hemos integrado el observador deleteLetter (o removeLetter) enfocado a eliminar la última letra de la palabra cuando el usuario presiona la tecla Borrar.
🔗 Puedes ver el código de ese observador aquí.
Otros cambios que realizamos:
checkWord agregando colores de fondo para las letras de una palabra (gris, verde y amarillo).Hola comunidad, estuve haciendo el proyecto a la par con el profesor. Pero estuve aplicando lo aprendido en los cursos de Ts, ello incluye POO. Así que si quieren darle un vistazo aquí está el repositorio.
Posdata: tiene errores al momento de perder, ganar o reiniciar el wordle. Ya que aún no he visto como se manejan los errores por desuscribir un observable.
https://proyecto-rxjs.web.app/
Dejo el link del proyecto hecho por mí, pueden usarlo desde el celular también. Gracias.
Mi función de checkWord:
// Posterior a validar la tecla enter
messageText.textContent = ''
// Informar las letras que faltan
if (userAnswers.length !== 5) {
messageText.textContent = `¡Hacen falta ${5 - userAnswers.length} letras!`
return;
}
// Si la respuesta es correcta, usar el Subject (no requiere iterar)
if(userAnswers.join('') === correctWord) {
userWinOrLoose$.next();
return;
}
// Si la respuesta no es correcta, verificar cada letra
const letterBox = [...letterRows[letterRowIndex].children]
userAnswers.forEach((value, index) => {
const letterStatus = correctWord.indexOf(value)
letterBox[index].classList.add(
`letter-${ ( letterStatus === -1 ? 'grey' : ( index === letterStatus ? 'green' : 'yellow') ) }`
)
})
letterRowIndex++;
userAnswers = [];
letterColumnIndex = 0;
Queda una parte pendiente, los duplicados, en palabras como GALAS, marca la 2da A como amarillo aunque esté en la posición correcta porque IndexOf devuelve el Index de la primera coincidencia, aún no lo resuelvo.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.