A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Cierre del curso y conclusiones

13/13
Recursos

Aportes 62

Preguntas 4

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

Lo hice con el template de platzi video 馃槃

Una pregunta al profesor o a quien sepa la respuesta. Si no es recomendable hacer la inserci贸n de c贸digo con el innerHTML, 驴Cu谩l es el m茅todo correcto de hacerlo?

Exelente curso, realice una peque帽a practica e implemente Web Components. SPA

Hola Celis, muchas gracias. estos cursos son realmente importantes ya que no se trata de saber hacerlo con alguna librer铆a o framework si no entender el proceso o flujo de informaci贸n que sucede detr谩s con vanila js.

lo unico que me confundio un poco es que este curso sale como primero en la lista de la carrera de Js de Platzi, deber铆an estar en orden, de resto esta genial.

Mi resultado del curso

Mi repositorio con el proyecto
https://github.com/mancillajonathan/spa-routing

Excelente curso pero me hubiese gustado que cada paso que se explica se probar谩 al momento y no hay final.

A mi si me gustaria mas ver cursos como este, pero ir viendo en camino que es lo que va pasando con cada codigo 馃槃

El curso deja mucho que desear en cu谩nto a la manera de explicar del profesor, el paso a paso que realiza para escribir el c贸digo no es muy entendible. Sin embargo les recomiendo que este curso les sirva como esa semilla que planta la curiosidad en su cerebro e investiguen y aprendan m谩s de este tema por su cuenta, eso los har谩 unos grandes desarrolladores y muy valiosos en el actual contexto laboral que requiere no solo gente calificada (t铆tulo), sino gente autodidacta con ganas de aprender nuevas cosas todos los d铆as. Saludos!

Excelente curso, muchas gracias!!

Y coincido con @maoacrlearn, los cursos no est谩n ordenados dentro de la ruta.
Me paso en varias oportunidades que al comenzar un nuevo curso de la ruta, el profesor nos dice que ya tendr铆amos que saber ciertos temas, y si no los sabemos, nos indica que debemos realizar antes otros cursos. y esos cursos se encuentran mas adelante en la ruta.

por ejemplo en este curso, nos indicas que si no sabemos nada de JS, deber铆amos tomar antes el curso de 鈥渇undamentos de JS鈥, dicho curso se encuentra ubicado en la linea de la ruta mucho despu茅s de este.

La verdad confunde un poco.

Muy buen curso, a veces es necesario no quedarse con la 鈥渕agia鈥 de las librerias y entender como funcionan las cosas. Como aporte tal vez seria bueno ir probando parte del codigo y no todo al ultimo, por si alguien cometio algun tipo de error en el tipeo por ejemplo.

Saludos.

Me gust贸 mucho el curso, definitivamente tengo que practicarlo m谩s para entender mejor la l贸gico pero si me siento capaz de entender el curso! Gran profe!

Me falta para llegar a ac谩, pero vaya que buen profesor es Celis

Chevere la idea pero este curso fue confuso para m铆 de todas formas aprend铆 cositas acerca d elo importante del curso que era saber como funciona herramientas que implementan dichas tecnicas. gracias.

No he llegado hasta este nivel pero fue bueno ver este curso para tener idea de lo que se viene

Excelente explicaci贸n, buen curso.

Me gust贸 mucho este curso!

Excelente!

Me gust贸 mucho este curso, claro, conciso pero bien explicado. Sobre todo me gust贸 la parte inicial, donde se explica bien la arquitectura y el pensamiento detr谩s del proyecto, algo que no se ve en muchas otras clases. 隆Me encanta! fue mi primer curso con Ricardo, pero me emociona tomar muchas m谩s con 茅l.

Esta bien usar este tipo de router si no es una spa muy grande son menos de 5 paginas pero necesito parametros dinamicos en la url. Debo usar reactDOm aunque sepa que no va a escalar . Gracias

Muy buen curso

Muy buen curso, creo que son de las cosas que deber铆an explicarse de esta manera tan sencilla y directa.

Me gusto el curso , solo que si en cada pasa lo probara entenderiamos mas. Yo con un debug pude comprender todo. Pero muy bien el profe.

Excelente curso, como indico el profesor lo aplicare en mi portafolio, creo que es una excelente opcion 馃檶馃檶

excelente curso

  1. Este curso deber铆a ir antes del de SPA con Vanilla JavaScript que dicta Oscar.
  2. Recomendaci贸n: Ir probando el c贸digo que vamos haciendo en cada clase, aunque estuvo sencillo es mejor para nosotros como estudiantes.

猸愨瓙猸愨瓙猸

Muy buen curso!

Fu茅 un curso genial, muchas gracias Ricardo.

Hola, Buen tema, me queda la duda sobre http-server-spa, es necesario? Acaso no puede probarse el tema de forma local con explorador? Me da la impresi贸n que el http-server-spa no es necesario para el curso.

Excelente Taller cargado de mucho conocimiento, fue corto pero sustantivo. muchas gracias馃憤

Excelente curso, gracias por la clara explicaci贸n.

Excelente, conoc铆 algo nuevo e importante de Javascript, muy buen profesor. Pienso a帽adir m谩s funcionalidades al proyecto, a modo de pr谩ctica.
Espero que hayan m谩s talleres as铆 a futuro.

Magnifico curso. 10/10 馃憣馃徎

Gracias por compartir tu conocimiento Ricardo. Encantado con el curso.
Si tuviese que mejorar algo, seria la dificultad del examen final. Quiz谩s, elaborarlo un poco mejor.
Slds!

Que gran curso, excelente explicaci贸n

Realmente gracias por el curso, fue muy completo para tratar el tema de SPA y me dio a entender muchas cosas, espero que sigan sacando mucho mas cursos como este.

A煤n sabiendo que es inseguro llevarlo a producci贸n, me gustar铆a saber c贸mo se har铆a el deploy.

Hay alguna forma de tener el routing s贸lo del lado del cliente? o se necesita un servidor que gestione las rutas (en el curso http-server-spa)?

M谩s cursos como este estar铆a genial

INCREIBLE!!!

Buen contenido y buena explicacion, solo se podria mejorar un poco en el manejo de errores.
Saludos desde Chihuahua Mexico xD

Genial

Gracias muy buen curso.
As矛 me qued贸.

Excelente curso, aunque hubo muchas cosas que no entend铆 por falta de conocimientos m谩s profundos de JS, pero lo importante del curso s铆 que lo entend铆 y me gust贸. Ahora voy a continuar con 鈥淟a escuela de JS鈥 y al terminarla, volver茅 a repasar este curso. Encantado! Muchas gracias Ricardo, excelente forma de ense帽ar!

Muchas gracias por el curso, muy claro y ameno.
El estar de primero en la lista permite vislumbrar el poder de javascript y anima a realizar con juicio la carrera.
Ejecute el c贸digo en el servidor generado con http-server-spa de manera satisfactoria , sin embargo en mi servidor XAMPP dentro del directorio que tengo reservado para este tipo de ejercicios no me quiso correr, incluso copie los archivos al directorio principal del servido local y tampoco.

Los errores son:

router.js:16 Uncaught TypeError: Cannot read property 鈥榯emplate鈥 of undefined
at Router.loadRoute (router.js:16)
at Router._loadInitialRoute (router.js:42)
at new Router (router.js:5)
at index.js:1

index.html:11 Uncaught ReferenceError: router is not defined
at HTMLButtonElement.onclick (index.html:11)
index.html:12 Uncaught ReferenceError: router is not defined
at HTMLButtonElement.onclick (index.html:12)
Uncaught ReferenceError: router is not defined
at HTMLButtonElement.onclick (index.html:13)

De nuevo muchas gracias.

Excelente curso, el profesor explica bastante bien y excelente iniciativa de este tipo de dise帽o de curso corto con buen contenido.

Buen curso.

Con este curso entend铆 lo que no me hab铆a quedado claro en el curso de SPA con Vanilla JavaScript.
Estuvo genial! 馃槃

Corto pero poderoso.
Muchas gracias.

Buen curso, sin embargo hace falta mejor estructura en la metodolog铆a y desarrollo del curso.

Estar铆a interesante ver c贸mo se puede reemplazar el innerHTML para hacerlo m谩s seguro 馃榾

Excelente curso, deseando que hagan mas cursos experimentales de este tipo.

Hola!
Les dejo mis notas de router.js de lo que entend铆 que hac铆a cada linea de c贸digo, espero que a alguien le sirva y me puedan corregir si comet铆 errores en las notas

router.js

class Router {

      constructor(routes) {
//traemos las rutas de routes.js, no es necesario importar ya que esta linkeado en el 
//HTML
        this.routes = routes; 
        this._loadInitialRoute(); //Al instancias la clase se llama a esta funci贸n
    }

	_loadInitialRoute() {
		//Location.pathname Obtiene la url de nuestro navegador luego del 
		//puerto en este caso que nuestra URL Es "localhost:8080/" lo que tomar铆a
		//Ser铆a unicamente el "/" que esta enseguida del 8080
		//El metodo split separa en un array los elementos cada vez que encuentra el caracter
		//Que le pasemos, en este caso "/" lo cual nos generar铆a un array
		//De dos espacios, lo que hab铆a antes y despues del "/" de esta manera
		// ["",""] 
    const pathNameSplit = window.location.pathname.split('/');

		//En esta parte lo unico que hace el eliminar el indice cero de nuestro array 
		//con el metodo slice, al indicarle un "1" le decimos que tomaremos desde el 
		//indice 1, recordemos que los arrays comienzan su indice desde el 0
    const pathSegs = pathNameSplit.length > 1 ? pathNameSplit.slice(1) : '';

		//Por ultimo mandamos a llamar la funci贸n loadRoute y le pasamos nuestro arreglo con
		//un "spread operator", que transforma nuestro arreglo en elementos individuales, en este
		//caso un string por lo que en lugar de mandar [""] mandaremos solamente ""
    this.loadRoute(...pathSegs);
    }

 //Cuando tenemos los tres puntitos "..." como argumento de una funci贸n ya no estamos 
//Hablando de un "spread operator" si no de un "rest operator" que hace todo lo contrario
//Pues en lugar de sacar nuestros elementos del array, los envuelve dentro de uno
//por ejemplo si llamaramos "loadRoute(hola, comunidad, de, platzi)" el valor de 
//"urlSegs" ser铆a igual a [hola, comunidad, de, platzi]
 loadRoute(...urlSegs){

		//Comprobamos si nuestro urlSegs tiene coincidencias con nuestras rutas
    const matchedRoute = this._matchUrlToRoute(urlSegs);

		//Aqui armamos nuestra url diciendo que nos agregue un "/" al principio.
		//A su vez tambi茅n agregaremos un "/" por cada elemenot del 
		// Array, eso es lo que hace join.
		//Por ejemplo si "urlSegs" fuera [hola, comunidad, de, platzi] el resultado seria
		// url = /hola/comunidad/de/platzi 
    const url = `/${urlSegs.join('/')}`;

		//Luego de eso pasamos la url al navegador 
    history.pushState({},'this works', url);

		//Con querySelectorAll obtenemos un array de todos los elementos que tengan la 
		//propiedad ['data-router'] en este caso solo tenemos un div con esa propiedad,
		//por lo que el indice 0 ser谩 el que buscamos.
    const routerOutElm = document.querySelectorAll('[data-router]')[0];

		//Por ultimo agregamos el contenido de nuestro template al div
    routerOutElm.innerHTML = matchedRoute.template;

 }

//En esta parte si estamos recibiendo un array de datos 
	_matchUrlToRoute(urlSegs){
		//Al ser un array tenemos el met贸do find que va a recorrer cada
		//objeto de nuestro array routes.js y va a regresar el primer 
		//objeto que coincida con lo que le indiquemos dentro de la funci贸n 
    const matchedRoute = this.routes.find(route => {
			  //route.path va a tomar un valor distinto de path en cada iteracion
				// hasta encontrar coincidencias 
				//Ejemplo:
				//path: '/',
				//path: '/contacto',
				//path: '/about',

				//Con esta linea de codigo le quitamos el "/"
        const routePathSegs = route.path.split('/').slice(1)

				//Aqui comprobamos si coincide el tama帽o de lo que mandamos con alguna de nuestras
				//  rutas, si no coincide, pasamos a la siguiente iteracion retornando false
        if (routePathSegs.length !== urlSegs.length){
            return false;
        }

				//Una vez tenemos una coincidencia con el tama帽o, comrpobar谩 letra por letra si
				//son iguales, si es el caso, regresar谩 ahora si la ruta que coincidi贸 al 
				//metodo find
        return routePathSegs
            .every((routePathSeg, i) => routePathSeg === urlSegs[i]);
    });
		//Aqui regresamos el valor de la funci贸n
    return matchedRoute;
	}

}

鈥pread operator and rest operator - Beau teaches JavaScript

Documentaci贸n del m茅todo .every

Gracias Ricardo es bueno haciendo algoritmos como este curso reitera los pasos a seguir y recomendaciones para avanzar let go!!

Gran curso maestro, me abri贸 mucho la mente!

Muy bueno este tipo de cursos enfocados. Aportan mucha claridad 馃槂 Gracias

Buen curso 鈥淪uanfonson鈥 馃槃
.
A los compa帽eros les recomiendo leer y comprender la l贸gica detr谩s del c贸digo, no se queden solo con lo que da el profesor. Si entran en la consola del navegador y van probando por ejemplo el c贸digo window.location.pathname.split("/") pueden ver literalmente lo que se obtiene y aclarar muchas dudas.
.
Lo otro que recomiendo es utilizar la metodolog铆a de depuraci贸n del patito de goma, parece tonter铆a, pero funciona de maravilla xD

Buenas tardes chicos y profesor , implemente la soluci贸n de colocar en la ruta index.html, y me carga perfectamente juntamente con los templates de contacto y about... pero cuando me coloco en una de estas dos 煤ltimas me aparece el error cannot GET contacto/ y tambi茅n en cannot GET /about... el codigo est谩 igual al del profesor a excepci贸n de ms modificaci贸n que describ铆 al principio alguno pudo solucionar???

No me gusto para nada la pedagogia que tuvo este curso. La forma de dar ir programando fue muy mala. No puede ser que tenes que esperar hasta la ultima clase para ejecutar el codigo y ver si anda. No puede ser que no se les ocurrio como crear el proyecto de forma iterativa e incremental. Todo el curso invocando metodos que no existen.

Me gust贸 mucho este curso, solo se pudo probar el c贸digo hasta el final, pero todo fue muy bien explicado. Gracias Ricardo.

Excelente curso Ricardo, me gusta saber siempre el 驴Por qu茅? de las cosas, y esto nos da una idea b谩sica de c贸mo funcionan algunos frameworks o librer铆as por detr谩s.

Me gustar铆a ver una comparativa de Programaci贸n Orientada a Objetos VS Programaci贸n funcional, ambas en Javascript por supuesto.

Saludos.

Me gusto mucho el curso, la tem谩tica de desglosar el funcionamiento de algo que ya usamos pero desconocemos como funciona. Pero agregar铆a mas desglose como imprimir en consola lo que esta haciendo cada funci贸n nueva que se crea para ir entendiendo mejor y no esperar hasta que el proyecto este finalizado para mostrarlo.

Excelente explicaci贸n sobre como funciona el SPA Routing y como implementarlo.

Si saben ingl茅s, les ULTRA recomiendo este curso de SPA en youtube.
El autor tiene buena oratoria, prolijo en el paso a paso y el producto final bastante profundo, pulido y avanzado.
https://www.youtube.com/watch?v=6BozpmSjk-Y