¿Qué es React Router y cómo instalarlo?

Les comparto mi proyecto como Plus tiene instalado StoryBook como una guía de los componentes:
LINK REPOSITORIO: https://github.com/GinnioSarabia/primerReact
.

Estimados indico los pasos para implementar desde 0

1. descargar el proyecto :git clone https://github.com/platzi/PlatziVideo.git
2. entrar a carpeta
   3.crear nueva rama : git checkout -b feature/router-redux
   //Aqui me arrojaba un error de certificados cuando intentaba instalar react router
3. npm config set strict-ssl false
   5.instalar router : npm install react-router-dom --save
   //aqui aparecieron 180 vulnerabilidades y 1 critica así que ejecute el comando sugerido
4. npm audit fix
   //ya con todo configurado hay que hacer una prueba. para eso debemos instalar el serv. de json
5. npm install json--server -g
6. ejecutar nuestra api :json-server initialState.json
7. ejecutar el programa : npm run start
   //y finalmente para que no se vea el scroll en el sitio recomiendo agregar en App.scss lo siguiente.
   10 ::-webkit-scrollbar{ dispaly:none; }

espero sea de ayuda.

(17/12/2020) npm run start no funciona

El detalle es que este curso es del 2019.
El último commit que se le hizo a la rama feature/react es del 11 de julio del 2019, por lo que algunas de sus dependencias se encuentran desactualizadas.

Esto lo puedes ver al entrar a la carpeta PlatziVideo desde la terminal y ejecutar

    npm outdate

Al día de hoy (17/12/2020) la lista nos aparece así

Para actualizar las dependencias a la version Wanted vamos a ejecutar

    npm update

Al terminar las actualizaciones nos aparecerá que tenemos vulnerabilidades

Para parcharlas ejecutamos el comando que nos sugieren

    npm audit fix

Enseguida, por temas de compatibilidad, cambiamos la version de nuestras dependencias webpack, webpack-cli y webpack-dev-server. Esto con el siguiente comando:

npm install webpack@4.41.5 && npm install webpack-cli@4.2.0 && npm install webpack-dev-server@3.11.0

Volvemos a ejecutar npm audit fix para parchar posibles vulnerabilidades

Ahora abrimos nuestro editor con el comando code . y editamos el script “start” de nuestro package.json

Lo reemplazmos por:

"start": "webpack serve --mode development"

Guardamos cambios y en una segunda terminal ejecutamos nuestro json-server:

json-server --watch initialState.json

Creamos nuestra rama para el feature curso

git checkout -b feature/router-redux

Instalamos React Router

npm install react-router-dom --save

Y por último iniciamos nuestra app con

npm run start

Que es React Router?

La posibilidad de movernos entre las diferentes partes de nuestra aplicación, bien sea cuando le damos clic a un botón, una imagen, un menu, etc o cuando colocamos un link.

Creo que es algo muy basico, pero es bueno tenerlo en mente para no estancarse mas adelante en el curso (me paso a mi)

Para instalar esa funcion tan chula de abrir el VSCode desde la terminal con “code .” seguir los siguientes pasos:
Open Visual Studio Code and press Command + Shift + P then type Shell in command palette now you are able to find this option like Shell Command : Install code in PATH from suggested list in command palette. Select that options.

Buenas! Dejo un enlace por si quieren setear una nueva url al repositorio remoto que creen para este curso.
Exitos!
https://help.github.com/en/articles/changing-a-remotes-url

Me metí a esta clase que dice “¿Qué es React Router…” para saber qué es y no dicen que es :v

QUÉ ES REACT-ROUTER?
react-router es una librería para crear rutas en nuestra aplicación de React, cuenta con una versión para Web y otra para desarrollo mobile con React Native, pero en el curso veremos la versión Web.
Usa enrutamiento dinámico, A diferencia de el enrutamiento estático, que define las rutas cuando nuestra aplicación es iniciada, este toma lugar en el momento en que nuestra aplicación se está renderizando. Esto gracias a que react-router hace uso de componentes para definir sus rutas.
react-router nos provee todos los componentes necesarios para hacer que nuestra SPA (single page application) se mantenga en sincronía con nuestra locación actual. Y tranquilo, los verás a lo largo del curso 😉
Los componentes más conocidos que usa son

• BrowserRouter
• Route
• Switch
• Redirect
• Link

Al hacer el clone y el install me encontró 181 vulnerabilidades, las que arreglé con

npm audit fix

Para todos los que tienen problemas clonando el repositorio e instalando los paquetes, yo lo solucioné de la siguiente manera:

1. instalar de forma global el paquete “npm check-updates” que sirve para actualizar las dependencias del package.json

npm install -g npm-check-updates

ncu -u

npm install

1. Cambiar el script “start” por:

webpack serve --open --mode development

https://app.gitbook.com/@fernan942/s/react-router-and-redux/
Chicos, les dejo este link donde están mis apuntes del curso, espero y les sirva. No son perfectos, pero sirven de guía. Saludos!

con solo poner
git branch NOMBREDELARAMA
te la crea
y si queires cambiarte y tienes la ultima version de git
solo tienes que hacer
git switch NOMBREDELARAMA

Siento que es mas facil porque el checkout sirve para muchas otras cosas mas ,Git lo que ha estado tratando de hacer delegar estas funciones que tiene checkout

Les comparto mi repositorio https://github.com/AndresCaro189/ProyectoDePLatzyVideo

ya empece con errores, me pueden ayudar porfis

Después de clonarlo, quizá quieras probar si funciona…
además del

npm run start

no olvidemos

json-server <file.json>

Tengo el siguiente problema

> [email protected] install /mnt/d/mateo/profesional/Platzi/escuela-webdesign/intermedio/react-router/PlatziVideo/node_modules/node-sass
> node scripts/install.js

Downloading binary from https://github.com/sass/node-sass/releases/download/v4.12.0/linux-x64-83_binding.node
Cannot download "https://github.com/sass/node-sass/releases/download/v4.12.0/linux-x64-83_binding.node":

HTTP error 404 Not Found

Hint: If github.com is not accessible in your location
      try setting a proxy via HTTP_PROXY, e.g.

      export HTTP_PROXY=http://example.com:1234

or configure npm proxy via

      npm config set proxy http://example.com:8080

> [email protected] postinstall /mnt/d/mateo/profesional/Platzi/escuela-webdesign/intermedio/react-router/PlatziVideo/node_modules/node-sass
> node scripts/build.js

Building: /usr/bin/node /mnt/d/mateo/profesional/Platzi/escuela-webdesign/intermedio/react-router/PlatziVideo/node_modules/node-gyp/bin/node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
gyp info it worked if it ends with ok
gyp verb cli [
gyp verb cli   '/usr/bin/node',
gyp verb cli   '/mnt/d/mateo/profesional/Platzi/escuela-webdesign/intermedio/react-router/PlatziVideo/node_modules/node-gyp/bin/node-gyp.js',
gyp verb cli   'rebuild',
gyp verb cli   '--verbose',
gyp verb cli   '--libsass_ext=',
gyp verb cli   '--libsass_cflags=',
gyp verb cli   '--libsass_ldflags=',
gyp verb cli   '--libsass_library='
gyp verb cli ]
gyp info using [email protected]
gyp info using [email protected] | linux | x64
gyp verb command rebuild []
gyp verb command clean []
gyp verb clean removing "build" directory
gyp verb command configure []
gyp verb check python checking for Python executable "python2" in the PATH
gyp verb `which` failed Error: not found: python2
gyp verb `which` failed     at getNotFoundError (/mnt/d/mateo/profesional/Platzi/escuela-webdesign/intermedio/react-router/PlatziVideo/node_modules/which/which.js:13:12)
gyp verb `which` failed     at F (/mnt/d/mateo/profesional/Platzi/escuela-webdesign/intermedio/react-router/PlatziVideo/node_modules/which/which.js:68:19)
gyp verb `which` failed     at E (/mnt/d/mateo/profesional/Platzi/escuela-webdesign/intermedio/react-router/PlatziVideo/node_modules/which/which.js:80:29)
gyp verb `which` failed     at /mnt/d/mateo/profesional/Platzi/escuela-webdesign/intermedio/react-router/PlatziVideo/node_modules/which/which.js:89:16
gyp verb `which` failed     at /mnt/d/mateo/profesional/Platzi/escuela-webdesign/intermedio/react-router/PlatziVideo/node_modules/isexe/index.js:42:5
gyp verb `which` failed     at /mnt/d/mateo/profesional/Platzi/escuela-webdesign/intermedio/react-router/PlatziVideo/node_modules/isexe/mode.js:8:5
gyp verb `which` failed     at FSReqCallback.oncomplete (fs.js:183:21)
gyp verb `which` failed  python2 Error: not found: python2
gyp verb `which` failed     at getNotFoundError (/mnt/d/mateo/profesional/Platzi/escuela-webdesign/intermedio/react-router/PlatziVideo/node_modules/which/which.js:13:12)
gyp verb `which` failed     at F (/mnt/d/mateo/profesional/Platzi/escuela-webdesign/intermedio/react-router/PlatziVideo/node_modules/which/which.js:68:19)
gyp verb `which` failed     at E (/mnt/d/mateo/profesional/Platzi/escuela-webdesign/intermedio/react-router/PlatziVideo/node_modules/which/which.js:80:29)
gyp verb `which` failed     at /mnt/d/mateo/profesional/Platzi/escuela-webdesign/intermedio/react-router/PlatziVideo/node_modules/which/which.js:89:16
gyp verb `which` failed     at /mnt/d/mateo/profesional/Platzi/escuela-webdesign/intermedio/react-router/PlatziVideo/node_modules/isexe/index.js:42:5
gyp verb `which` failed     at /mnt/d/mateo/profesional/Platzi/escuela-webdesign/intermedio/react-router/PlatziVideo/node_modules/isexe/mode.js:8:5
gyp verb `which` failed     at FSReqCallback.oncomplete (fs.js:183:21) {
gyp verb `which` failed   code: 'ENOENT'
gyp verb `which` failed }
gyp verb check python checking for Python executable "python" in the PATH
gyp verb `which` failed Error: not found: python
gyp verb `which` failed     at getNotFoundError (/mnt/d/mateo/profesional/Platzi/escuela-webdesign/intermedio/react-router/PlatziVideo/node_modules/which/which.js:13:12)
gyp verb `which` failed     at F (/mnt/d/mateo/profesional/Platzi/escuela-webdesign/intermedio/react-router/PlatziVideo/node_modules/which/which.js:68:19)
gyp verb `which` failed     at E (/mnt/d/mateo/profesional/Platzi/escuela-webdesign/intermedio/react-router/PlatziVideo/node_modules/which/which.js:80:29)
gyp verb `which` failed     at /mnt/d/mateo/profesional/Platzi/escuela-webdesign/intermedio/react-router/PlatziVideo/node_modules/which/which.js:89:16
gyp verb `which` failed     at /mnt/d/mateo/profesional/Platzi/escuela-webdesign/intermedio/react-router/PlatziVideo/node_modules/isexe/index.js:42:5
gyp verb `which` failed     at /mnt/d/mateo/profesional/Platzi/escuela-webdesign/intermedio/react-router/PlatziVideo/node_modules/isexe/mode.js:8:5
gyp verb `which` failed     at FSReqCallback.oncomplete (fs.js:183:21)
gyp verb `which` failed  python Error: not found: python
gyp verb `which` failed     at getNotFoundError (/mnt/d/mateo/profesional/Platzi/escuela-webdesign/intermedio/react-router/PlatziVideo/node_modules/which/which.js:13:12)
gyp verb `which` failed     at F (/mnt/d/mateo/profesional/Platzi/escuela-webdesign/intermedio/react-router/PlatziVideo/node_modules/which/which.js:68:19)
gyp verb `which` failed     at E (/mnt/d/mateo/profesional/Platzi/escuela-webdesign/intermedio/react-router/PlatziVideo/node_modules/which/which.js:80:29)
gyp verb `which` failed     at /mnt/d/mateo/profesional/Platzi/escuela-webdesign/intermedio/react-router/PlatziVideo/node_modules/which/which.js:89:16
gyp verb `which` failed     at /mnt/d/mateo/profesional/Platzi/escuela-webdesign/intermedio/react-router/PlatziVideo/node_modules/isexe/index.js:42:5
gyp verb `which` failed     at /mnt/d/mateo/profesional/Platzi/escuela-webdesign/intermedio/react-router/PlatziVideo/node_modules/isexe/mode.js:8:5
gyp verb `which` failed     at FSReqCallback.oncomplete (fs.js:183:21) {
gyp verb `which` failed   code: 'ENOENT'
gyp verb `which` failed }
gyp ERR! configure error
gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable.
gyp ERR! stack     at PythonFinder.failNoPython (/mnt/d/mateo/profesional/Platzi/escuela-webdesign/intermedio/react-router/PlatziVideo/node_modules/node-gyp/lib/configure.js:484:19)
gyp ERR! stack     at PythonFinder.<anonymous> (/mnt/d/mateo/profesional/Platzi/escuela-webdesign/intermedio/react-router/PlatziVideo/node_modules/node-gyp/lib/configure.js:406:16)
gyp ERR! stack     at F (/mnt/d/mateo/profesional/Platzi/escuela-webdesign/intermedio/react-router/PlatziVideo/node_modules/which/which.js:68:16)
gyp ERR! stack     at E (/mnt/d/mateo/profesional/Platzi/escuela-webdesign/intermedio/react-router/PlatziVideo/node_modules/which/which.js:80:29)
gyp ERR! stack     at /mnt/d/mateo/profesional/Platzi/escuela-webdesign/intermedio/react-router/PlatziVideo/node_modules/which/which.js:89:16
gyp ERR! stack     at /mnt/d/mateo/profesional/Platzi/escuela-webdesign/intermedio/react-router/PlatziVideo/node_modules/isexe/index.js:42:5
gyp ERR! stack     at /mnt/d/mateo/profesional/Platzi/escuela-webdesign/intermedio/react-router/PlatziVideo/node_modules/isexe/mode.js:8:5
gyp ERR! stack     at FSReqCallback.oncomplete (fs.js:183:21)
gyp ERR! System Linux 4.19.128-microsoft-standard
gyp ERR! command "/usr/bin/node" "/mnt/d/mateo/profesional/Platzi/escuela-webdesign/intermedio/react-router/PlatziVideo/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd /mnt/d/mateo/profesional/Platzi/escuela-webdesign/intermedio/react-router/PlatziVideo/node_modules/node-sass
gyp ERR! node -v v14.15.0
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok
Build failed with error code: 1
npm WARN [email protected] requires a peer of [email protected]^4.19.1 || ^5.3.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected]^4.19.1 || ^5.3.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] No description
npm WARN [email protected] No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postinstall: `node scripts/build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/matespinosa09/.npm/_logs/2020-11-16T14_49_21_959Z-debug.log```

yo lo que hice fue crear una rama para dejar lo que hice anterior mente en ella y continue trabajando en master

Listo para aprender de este gran curso.

¿Qué es React Route?

Es un declarador de rutas; muy similar a expressjs.

Hacemos git clone [email protected]:platzi/PlatziVideo.git; entramos cd PlatziVideo.

Con git checkout -b feature/router-redux para la nueva rama.

Con npm install react-router-dom --save tenemos las librerías necesarias.

Con code . o subl . abrimos nuestro editor.

super, que emoción*.*

ME saliron muchas vulnerabilidades, es recomendable que use el comando que me recomienda “npm audit fix” o podria causar poblemas en el desarrollo del curso?

Espero aprender mucho en este curso, es un buen profesor el que lo da.

Excelente Profe!!!

Repositorio del curso
https://github.com/platzi/PlatziVideo/tree/feature/router-redux

React-Router es una librería para gestionar rutas en aplicaciones que utilicen React JS.

Excelente clase

que buen inicio…

Recomiendo mucho esta lectura sobre React Router: Click Aqui

Ahora si a empezar, motivacion al 100%

listo!

Alguien mas esta teniendo problemas par instalar json-server??

JAJAJA oye viejo jamás mencionas ¿Qué es React Router? y está en el título…

Espero poder utilizar los conocimientos que se adquieren en este curso para un proyecto que realizo en base a lo aprendidi en los curso de React y Practico 💪💪

Tuve algunos inconveniente al momento de correr la aplicación, así que me fije con que versión estaba trabajando Oscar y le instale la misma.

npm install [email protected] --save

Bien ahi va para los que les gusta respuestas resumidas:

React Router es una librería que nos permite crear rutas en nuestra aplicación.
Para implementarlo a nuestra aplicación necesitamos instalarla con:

npm i react-router-dom

[email protected] start C:\Users\Toshiba\Desktop\React Proyects\PlatziVideo-feature-react
webpack-dev-server --open --mode development

internal/modules/cjs/loader.js:968
throw err;
^

Error: Cannot find module ‘C:\Users\Toshiba\Desktop\React Proyects\PlatziVideo-feature-react\node_modules\webpack-dev-server\bin\webpack-dev-server.js’ at Function.Module._resolveFilename (internal/modules/cjs/loader.js:965:15)
at Function.Module._load (internal/modules/cjs/loader.js:841:27)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
at internal/main/run_main_module.js:17:47 {
code: ‘MODULE_NOT_FOUND’,
requireStack: []
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: webpack-dev-server --open --mode development
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Toshiba\AppData\Roaming\npm-cache_logs\2020-10-01T04_27_32_840Z-debug.log

Si a alguien le da un hermoso error cuando ejecutan el comando

npm install react-router-dom --save

Hermoso error:

gyp ERR! build error
gyp ERR! stack Error: not found: make
gyp ERR! stack     at getNotFoundError (/home/usuario/escuela-javascript/react-router-redux/platzivideo/node_modules/which/which.js:13:12)
gyp ERR! stack     at F (/home/usuario/escuela-javascript/react-router-redux/platzivideo/node_modules/which/which.js:68:19)
gyp ERR! stack     at E (/home/usuario/escuela-javascript/react-router-redux/platzivideo/node_modules/which/which.js:80:29)
gyp ERR! stack     at /home/usuario/escuela-javascript/react-router-redux/platzivideo/node_modules/which/which.js:89:16
gyp ERR! stack     at /home/usuario/escuela-javascript/react-router-redux/platzivideo/node_modules/isexe/index.js:42:5
gyp ERR! stack     at /home/usuario/escuela-javascript/react-router-redux/platzivideo/node_modules/isexe/mode.js:8:5
gyp ERR! stack     at FSReqCallback.oncomplete (fs.js:176:21)
gyp ERR! System Linux 4.4.0-19041-Microsoft
gyp ERR! command "/usr/bin/node" "/home/usuario/escuela-javascript/react-router-redux/platzivideo/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd /home/usuario/escuela-javascript/react-router-redux/platzivideo/node_modules/node-sass
gyp ERR! node -v v14.5.0
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok
Build failed with error code: 1
npm WARN [email protected] requires a peer of [email protected]^4.19.1 || ^5.3.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected]^4.19.1 || ^5.3.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] No description
npm WARN [email protected] No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postinstall: `node scripts/build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/usuario/.npm/_logs/2020-08-16T22_52_48_707Z-debug.log

Lo pueden solucionar así:

sudo apt-get update   
sudo apt-get install build-essential

Luego ya pueden hacer tranquilamente:

npm install react-router-dom --save

Al instalar react-router-dom la consola me arroja unos errores al final del proceso. Ayuda

<gyp ERR! build error 
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack     at ChildProcess.onExit (/home/vidad/platzi/curso-router-redux/PlatziVideo/node_modules/node-gyp/lib/build.js:262:23)
gyp ERR! stack     at ChildProcess.emit (events.js:315:20)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:276:12)
gyp ERR! System Linux 5.4.0-26-generic
gyp ERR! command "/usr/bin/node" "/home/vidad/platzi/curso-router-redux/PlatziVideo/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd /home/vidad/platzi/curso-router-redux/PlatziVideo/node_modules/node-sass
gyp ERR! node -v v14.4.0
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok 
>

hey! como esta? al tratar de instalar react router me lanza este error

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected]4.12.0 postinstall: `node scripts/build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected]4.12.0 postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Daniel\AppData\Roaming\npm-cache\_logs\2019-10-31T15_12_46_971Z-debug.log```

me pueden ayudar??

les recomiendo correr el comando npx npm-check-updates -u y luego npm install
luego de haber clonado el repositorio,
trate de hacerlo de la forma sugerida aca abajo en los comentarios pero me seguia retornando el mismo error una y otra vez al momento de instalar el router, esta en cambio me funciono

con muchas expectativas.

¿Que es React Router?
React Router es la biblioteca de enrutamiento estándar para React. “React Router mantiene su interfaz de usuario sincronizada con la URL. Tiene una API simple con funciones poderosas como carga diferida de código, coincidencia dinámica de rutas y manejo de transición de ubicación integrado. Haga de la URL su primer pensamiento, no un pensamiento posterior ".

React Router

Les comparto el link de Uso con React Router de la web principal de REDUX

React Router es una librería para gestionar rutas en aplicaciones que utilicen React JS.

Tengo una pregunta, para la configuración del entorno que se hizo en el curso de React Practico, es necesario hacerla de nuevo si se utiliza esta nueva carpeta en una nueva ubicación? O se puede hacer sin configurar el entorno con react, webpack y demás?

Súper, muy práctico. 😉

Súper, muy práctico. 😃