Lo que aprenderás para crear Router para SPA

2/13
Recursos
Transcripción

Aportes 61

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

⚠ 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 “orquestador” 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?

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;
	}

}

…spread 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!!