Creando la función load routes
Taller de Creación de Router para Single Page App con JavaScript
Contenido del curso
Pau Pregoni Juan
Alejandro Luján
Carlos Eduardo Diaz Polanco
Carlos Eduardo Diaz Polanco
Usuario anónimo
User
Jose Luis Gutierrez Carcausto
Daniel Cu Sanchez
Rafael Azuero Hurtado
Fernando Villalba
Javier Romero
Maikol Pedroza
Jesus Velasco
Kevin Naranjo
Alexis Leonardo Rodriguez Gutierrez
Fernando Melendez Lozada
Ricardo Celis
Profesor
Jared García
Ismael Grimaldo Vega
Jared García
Manuel Entrena Jimenez
Carlos Eduardo Gomez García
Sergio Estrella
Profesor
Rubén Padilla
Octavio Elsacte Palma
FRANK CARLOS LISBOA ABAD
Hector Miguel Salazar Doroteo
Jorge Cruz Perez
Lucas Madrigal Beltran
Holman H Galeano Caballero
jorge llanque
Cristofher Jumbo Jimenez
Javier Romero
Hola, personalmente me cuesta seguir este curso no porque no entienda lo que se está haciendo, sino por la metodología de enseñanza. Creo que sería más fácil explicar:
1)Colocamos [data-router] en el elemento <div data-router>. 2)Creamos la constante “routerOutElm” […]. etc. Y no viceversa.
También creo que debería testearse individualmente cada implementación en cada capítulo, para tener una orientación práctica de lo que se está haciendo en lugar de ver el resultado final a final del curso.
Saludos.
Concuerdo contigo, el contenido esta bien, pero la forma en que lo estan enseñando no es la correcta, al menos para mi, 🙋🏻♂️
Que bolas dirian en mi pais! 😡😡😡
Estoy molesto! 😡😡😡 Estoy rezando para saber si mi codigo realmente funcionara, no hay una metodologia de enseñanza progresiva!
Tildes invertidas = Alt + 96 (o copiar y pegar de acá)
Vaya metodología de enseñanza, Como extraño los cursos de Leónidas, hasta el gordito barajas es mucho mejor :(
Porque se declara loadRoute sin el guion _ a diferencia de las otras dos funciones? ¿Cual es esa convecion?
loadRoute es un método público de la clase Router y se puede llamar utilizando la instancia router.
Por otro lado, _matchUrlToRoute y _loadInitialRoute son métodos privados que van a ser utilizados únicamente dentro de la clase Router.
parece que lo obligan a realizar el curso
jajaja que quieres decir amigo ?
Eso mismo pienso :/
No estoy entendiendo nada jejeje ... jejeje :(
``
Hola, estoy siguiendo los pasos sin embargo Visual Studio al parecer no reconoce los caracteres de mi codigo que muestro a continuacion: class Router {
constructor(routes) { this.routes = routes; this._loadInitialRoute(); }
loadRoute(...urlSegs){
const matchedRoute = this._matcUrlToRoute(urlSegs); const url = ՝/${urlSegs.join('/')}՝; history.pushState({},'this works', url);
}
matcUrlToRoute(urlSegs)
{
const matchedRoute = this.routes.find(route =>{
const routePathSegs = route.path.split("/").slice(1) if (routePathSegs.length !== urlSegs.length){ return false; } return routePathSegs .every((routePathSeg, i ) => routePathSeg === urlSegs[i]);
});
return matchedRoute;
} _loadInitialRoute() {
const pathNameSplit = window.location.pathname.split("/"); const pathSegs = pathNameSplit.length > 1 ? pathNameSplit(1): ""; this.loadRoute(...pathSegs)
} // En la parte donde se escribe ( const url = ՝/${urlSegs.join('/')}՝;) hacia abajo todo se pone en rojo e indica no reconocer caracteres como codigo, no se que hacer muchas gracias
En la linea: const matchedRoute = this._matchUrlToRoute(urlSegs); // revisa q en tu codigo la palabra matcUrlRoute le falta la "h" para completar la palabra match.
así es, es lo que te comentaron por acá! Gracias Fernando!
¿Cómo se ponían los acentos graves? se me olvidó
Mantén presionada la tecla Alt y enseguida teclea 96, al final suelta la tecla
No me funciona, ¿alguna otra manera?
¿Alguien me explica que hace esta linea? No entiendo el parámetro de selección ni el [0] del final
const routerOutElm = document.querySelectorAll("[data-router]")[0];
¡Hola!, el parámetro de selección significa que va a seleccionar cualquier elemento que tenga el atributo data-router, los corchetes significan selección de atributos, por lo que podrías tener un selector como este: [class] que seleccionaría todos los elementos que tengas el atributo class, o este: [id], que seleccionaría todos los elementos que tienen el atributo id, pero en este caso, está seleccionando todos los elementos con el atributo data-router (recuerda que si inicia con data- es un atributo HTML personalizado)
El 0 al final es porque el método querySelectorAll regresa un array de todos los elementos que tengan ese atributo, con el 0 indicas que solo quieres el primero :D
Routes y router no deben ser exportados para que se puedan trabajar desde el index.js? :thinking:
No se exportan por que en este curso no se hace uso de los módulos, el profesor incluye cada script individualmente en el index.html.
Hay errores durante el desarrollo del curso que confunden a los estudiantes que piensan que algo hicieron mal. Creo que aprovechando que los videos son cortos, deberian revisarse los contenidos antes de liberarlos. Se puede perder el interes si uno cree que no le está entendiendo cuando en realidad nos están dando un procedimiento equivocado.
Entre con todas las ganas de aprender este curso, que es muy interesando, la forma de enseñanza no es muy buena.. Hay que revisar otros documentos para estar en brecha..
Para que el server del inicio si no probamos nada hasta el momento, ahora mismo tengo como 6 errores
Lei la documentacion sobre el metodo queryselectorAll(), recibe un argumento: Un DOMString que contiene uno o más selectores para buscar coincidencias. Esta cadena de texto debe ser una cadena CSS selector válida; si no lo es, se lanzará una excepción SyntaxError. Se supone que esto no seria valido:
<div data-router> </div>
podrias compartir cual seria la correcta?
ALT + 96 = ``
interesante
vale con poner un import en index.js y luego exportart todo junto al html?
Alt gr + tecla } <- con esas teclas pueden sacar las tildes invertidas :)
