Lo que aprender谩s para crear Router para SPA

2/13
Recursos
Transcripci贸n

Aportes 62

Preguntas 1

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

鈿 Hola a todos los que est谩n empezando este curso, les tengo un par de tips personales sobre el para que les sea m谩s fruct铆fero y puedan aprender m谩s! 鈿

馃挜 El profe es crack, no duden de sus capacidades, en una primera vista a cada clase probablemente entiendan poco pero es por la forma de encarar el c贸digo.
鈴 Se van a encontrar con m茅todos y/o funciones que se utilizan y luego se crean, no desesperen porque al final lo entender谩n.
馃У El curso es corto y creo que lo mejor es mirarlo dos veces. Una de corrido y siguiendo el hilo, la otra detenidamente a ver c贸mo hacer cada cosa.
馃殌 No van a utilizar esta forma de enrutar casi nunca, para eso est谩n los enrutadores, este curso explica bien como funcionan ellos.

Espero les sirvan los consejos porque a medida que pasaban las clases m谩s me frustraba, hasta el final cuando comprend铆 todo, si alguien m谩s que haya visto el curso quiere opinar creo ser铆a clave hacerlo aqu铆 al principio as铆 le transmitimos tranquilidad y ayudamos a los compa帽eros 馃挄

Por que ponen este curso al principio de la escuela de javascript si ya dice que se necesita saber js?

Regresando a este curso, ya con conocimientos necesarios para comprenderlo al 100% ya que la primera vez fue como estar vi茅ndolo en chino XD. Es incre铆ble la diferencia que se siente. En verdad estoy aprendiendo.

Solo he tomado el curso de Asincronismo en JavaScript contigo.

Perfecto me encanta! Justo para profundizar m谩s con Javascript Vanilla!! Por cierto es mi primer curso con usted Ricardo!

vengo del curso de java y c# voy a tomar la escuela de java script ya que deseo aprender angular o type script, tengo muchas espectativas para este curso @ricardocelis

Primer curso que terminar茅 de la escuela de JS

Grande Ricardo鈥 Pocos profesores se toman el tiempo a responder, o mejor dicho casi ninguno. La verdad que ya es mi tercer curso junto a vos. Hice el de algoritmos en la carrera de fundamentos y Fundamentos de electricidad y electr贸nica

Primer comentario del curso 馃槃

primer curso con ricardo!!

Me vine a este curso para luego hacer el de SPA con JS

Este curso me motiva mucho, todav铆a no manejo ning煤n frameWork o librer铆a de JS, pero estaba haciendo mi portfolio y empece a preguntarme como hac铆a justamente lo que vamos a aprender en este curso 馃榿馃槈馃憣

f

me parece excelente la iniciativa de hacer este tipo de curso鈥 Gracias!

Esto resolver铆a el problema de rutas 鈥渙rquestador鈥 de rutas por los micro front end.???

A comenzar la escuela de javascript, woooo

Vamos a darle con todo al curso.

se ve genial este curso, el de algoritmos es muy bueno

wow excelente!

Interesante vamos por el curso completo

Creo que en el Curso de Prework: Buenas Pr谩cticas y Entorno de Desarrollo tuve una clase con el profe y en el de computaci贸n b谩sica

Me alegra que, sigan agregando m谩s cursos a la escuela de javascript. Seguir aprendiendo m谩s, y m谩s.

Perfecto! Me gusta que se llegue al fondo del por qu茅 de las cosas.

Est谩 bien seguir por ac谩 despu茅s de la carrera de FRONTEND?

Comencemos!

esto es como un custom router?

Esta muy bien el curso y lo que mas me gusta es que despues de leer los comentarios, he visto que @ricardocelis, has contestado y has hablado con todos los alumnos y no como en otros cursos que no hacen caso. Pero tengo una duda. Nunca he escuchado esto de los: React router, Angular router鈥 y mi duda es鈥 驴Que es esto? 驴Como una manera de crear un aplicacion de 鈥淒esktop鈥 en una pagina web para que cada vez que se tenga que cambiar la pagina, no haga un full reloed?驴

Grupo de aprendizaje para temas relacionados a la Escuela de Javascript: https://chat.whatsapp.com/LsR1Zt77zIV2bUw30fMQ3M

Con todo

Cambiaron el intro, este me recuerda a intel por alguna raz贸n. jaja

Vengo apenas comenzando el curso veamos mi emprendimiento en el.

woow!! justo lo que necesito en este momento, gracias Platzi!!!

Hasta el momento he tomado el curso de computaci贸n basica.

Ready!!

Primer curso con Ricardo Celis.

This is my second course, the first is ECMAScript 6, I am still trying to pass it, I think that this and this are very difficult for me, but they are in the challenge to do them: D

Es la primera vez que voy a ver un curso con el profesor pero el contenido del curso se ve bueno 馃槂

Comencemos 馃尮

A darle!

Vamos pues

Vamos all谩!

Estoy siguiendo la ruta de frontes supongo que este curso deber铆a estar despu茅s de los frameworks.

el primer curso con ricardocelis, por comentarios se que son muy bueno

Mi primer curso contigo 馃槃 listo iniciemos

A Darle 馃挭馃檶 Primero curso con el profesor

Vamos con toda! 馃槃

Ricardo Celis es genial!

Yo tome el curso de algoritmos de ordenamiento, introducci贸n a electr贸nica y ahora este.

Hola!
Aqu铆 esta el proyecto terminado y funcionando, cuando tom茅 el curso estaba un poco confundido por el orden en que se estructuraron las clases, por lo que estoy seguro que si tienen los archivos completos desde el principio les va a hacer mas sentido el curso, ademas 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

index.html

<html>

<head>
    <title> Cliente de nuestro SPA Router</title>
</head>

<body>
    <header>
        <ul>
            <li><button onclick="router.loadRoute('')">home</button></li>
            <li><button onclick="router.loadRoute('contacto')">contacto</button></li>
            <li><button onclick="router.loadRoute('about')">about me</button></li>
        </ul>
    </header>

    <div data-router>

    </div>
<script src="../router.js"></script>
<script src="../routes.js"></script>
<script src="../index.js"></script>

</body>

</html>

index.js

const router = new Router(routes);

routes.js

const routes = [
    {
        path: '/',
        template: '<h1>Hola</h1>'
    },
    {
        path: '/contacto',
        template: '<h1>Contacto mi correo [email protected]</h1>'
    },
    {
        path: '/about',
        template: '<h1>About Me</h1>'
    },
];

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

Genial, muy interesante 鉂わ笍

La verdad que muy bueno el curso, me hizo entender bien la base del sistema, sino uno se lo empieza a acordar de memoria lo aplicas pero no lo entiendes, de esta forma se logra programar razonando.
Un curso aprovechable

lista para el curso, ya es mi segundo curso con Ricardo Celis

git init && npm init

Agarrar un problema y pensar cu谩les son los pasos a seguir para resolverlo, nuestro d铆a a d铆a como desarrolladores.

Ya he tomado otros cursos de Ricardo Celis y la verdad es bueno ense帽ando, me gusta su forma de ense帽ar y aprendo con el.

Incre铆ble, con muchas ganas de aprender

Me gusta este curso, ya tengo ganas de aprender mas hahha

Listo para comenzar despues del de SPA creo este es una buena continuacion

Sentimientos encontrados con vanilla JS !, miedo y emocion jeje

A darle 馃槃

Que raro, yo tambi茅n soy mecatr贸nico pero me dedique mas a la programaci贸n y a la electronica que a la mec谩nica, pero es muy bueno aprender de alguien que paso por el mismo camino.

Hace 1 semana vi esta clase y a pesar de haber hecho 3 cursos de js, fui e hice el de fundamentos con sacha y volvi para ahora si empezarlo

Cada vez falta menos para terminar con la carrera de arquitecto front. A DARLE!!