Excelente clase, Angular se me hace que tiene mejor manejo de rutas, pero cada framework tiene lo suyo!
Bienvenida al curso
Todo lo que aprenderás sobre React Router y Redux
¿Qué es React Router? y Aplicarlo en tus proyectos
¿Qué es React Router y cómo instalarlo?
Crear nuestro archivo de Rutas
Container: Login
Container: Register
Container: 404 Not Found
Componente: Layout
Manejando enlaces y configuraciones
¿Qué es Redux?
Qué es Redux
¿Qué es Redux? Profundizando en la herramienta
Instalación de Redux
Creando el Store de Redux
Aplicando Redux a nuestra aplicación
Creando los reducers
Finalizando reducers y eliminar favoritos
Debuggeando nuestro proyecto (agregando validaciones a nuestro componente card)
Crear Formulario de Login
Formulario de Login con Redux
Creando un Servicio para Gravatar
Uso de gravatar en nuestro proyecto
Validación para LogIn LogOut
Register
Register con Redux
Vista general del player
Arreglando la funcionalidad del player
Terminando de detallar nuestro player
Validaciones
Validaciones de UI
Debug con Redux Devtools
Cierre del curso
Cierre del Proyecto
Dentro de nuestro proyecto vamos a crear una carpeta llamada routes
donde vamos a ir añadiendo las rutas que necesitemos en la aplicación.
Las rutas que añadamos debemos definirlas con el componente Route
y estas deben estar encapsuladas dentro del componente BrowserRouter
del paquete de react-router-dom
. Para definir una ruta con el componente Route debemos pasarle las props de:
path
para indicar la url.exact
si queremos que funcione única y exactamente con la url que le digamos.component
para indicarle el componente que va a renderizar.Aportes 69
Preguntas 23
Excelente clase, Angular se me hace que tiene mejor manejo de rutas, pero cada framework tiene lo suyo!
Yo tuve un pequeño problema con el json-server porque no lo tenía instalado globalmente, ejecutando el siguiente comando sirvio perfecto todo lo demás.
npm install -g json-server
Tomado de: https://www.npmjs.com/package/json-server
De acuerdo a la documentación oficial de React Router en su version 5.1.2 queda de la siguiente forma:
import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import Home from '../components/Home/Home';
const App = () => (
<Router>
<Route exact path="/" component={Home}></Route>
</Router>
)
export default App;
Recien tuve un tipo en App.js
import React from "react";
import { BrowserRouter, Route } from "react-router-dom";
import Home from "../containers/Home";
const App = () => (
<BrowserRouter>
<Route exact path="/" component={Home} />
</BrowserRouter>)
export default App;
es con parentesis, no con llaves. Tarde 15 minutos en darme cuenta jaja!
Para que no tengan que iniciar el json server manualmente, les recomiendo usar la pagina jsonbin para que suban su initialState.json y lo consuman directamente desde un api real en internet.
Por si a alguien le gustaría personalizar el llamado de las funciones que importamos de react-router-dom, podemos crearle un alias de esta forma:
import {BrowserRouter as miAlias} from 'react-router-dom';
Podemos asignar el alias que deseamos, claro siendo siempre explícitos para no confundirnos despues con esos nombres.
El mejor profesor
Para quienes no vienen del Curso Práctico de React.
El json-server que ejecuta no es nada más que crear un servidor ficticio en nuestra computadora para que la aplicación de React empiece a consumir un archivo json que nosotros creamos y se llama initialState.json
Curso desactualizado: Las versiones actuales de react-router-dom
funcionan con una sintaxis diferente al momento de pasar las rutas y el componente a renderizar.
Tuve algunos inconveniente con la aplicación al momento de correrla y tuve que volver al vídeo anterior para ver que versión de react-router-dom le instalo, por suerte instale la misma y funciono
npm install [email protected] --save
Saludos
Al principio no me aparecia ningun componente hata que no me fije que tenia
const App = () => {
<BrowserRouter>
<Route path="/" component={Home} />
</BrowserRouter>
};```
y me di cuenta que hay que ponerlo tre parentesis y no entre llaves.
const App = () => (
<BrowserRouter>
<Route path="/" component={Home} />
</BrowserRouter>
);```
Para la version 6 de react-router-dom tenemos que hacer estos cambios
import React from 'react';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Home from '../containers/Home';
const App = () => (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
</Routes>
</BrowserRouter>
);
export default App;
Luego de probar las soluciones propuestas (que ninguna anduvo) estos pasos me terminaron funcionando en agosto2021:
CLONAR EL PROYECTO
git clone https://github.com/platzi/PlatziVideo.git
BORRAR EL PACKAGE-LOCK.JSON
EJECUTAR
npm install
npm install -g json-server
npx json-server --watch initialState.json
ESE ULTIMO COMANDO DEBERIA MOSTRAR ESTO EN CONSOLA
"{^_^}/ hi!
Loading initialState.json
Done
Resources
localhost:3000/initalState
Home
localhost:3000
Type s + enter at any time to create a snapshot of the database
Watching…
GET /initalState 200 34.649 ms - -"
EJECUTAR PARA CREAR OTRA RAMA
git checkout -b feature/router-redux
EJECUTAR
npm install react-router-dom --save
npm run start
SE VE LA CONSOLA EN localhost:8080/
Para el/la que no le este funcionando
Asegúrense de instalar json-server…
npm i json-server -g
excelente explicación, se entiende muy bien. Gracias
Se crea en una carpeta llamada routes
; en un archivo App.js
.
Se importa React
y import { BrowserRouter } from 'react-router-dom'
.
Creamos un componente básico y lo exportamos.
<BrowserRouter>
va a encapsular todas las rutas; traemos otro componente: { BrowserRouter, Route }
.
Lo usamos con <Route exact path="/" component={Home} />
; importando el componente antes de declarar esto.
Al intentar la instalación de react-router-dom
me aparecía un error.
¿La razón? React Router requiere de Sass, al paracer. Y este proyecto es de hace rato (supongo que 2019 y yo estoy haciéndolo en el 2021) y al instalar la versión de entonces de Sass se rompía porque me decía que necesitaba Python2 y no sé qué.
El fix fue poner en el package.json
la última versión de node-sass
"node-sass": "^6.0.0"
Correr
npm install
Y después de eso sí correr
npm install react-router-dom
Espero que lessirva. 😄
recuerden el comando npm install luego de descargar el proyecto del repositorio
¿en el curso pasado se toca el tema de inicializar el json?
Tengo todo correcto en código fuente no hay errores sin embargo al ejecutar
npm run start
Aparece el error descrito abajo, ya revise todo estoy haciendo bien las exportaciones
Investigando aplique la solución que aparece en esta URL
https://platzi.com/clases/1079-react-2016/6326-actualizando-a-la-ultima-version-de-react-router/
luego ejecuto nuevamente npm run start y me pedia instalar react-router
npm install --save react-router
pero al final regresa al mismo error
Check the render method of App.
in App
Para no tener que ejecutar manualmente la fake API, se puede instalar el siguiente paquete
npm install npm-run-all
Después en package.json crear los siguientes scripts.
"start": "npm-run-all -p local-dev server",
"local-dev": "webpack-dev-server --open --mode development",
"server": "json-server --port 3001 --watch initialState.json"
Con esto no es necesario correr cada comando por aparte
Tengo 2 días con el mismo error, alguien me podría pasar el node_modules y todas las configuraciones?
las he realizado una y otra vez y nada, no se si es mi paquete node_modules.
react.development.js:315 Warning: React.createElement: type is invalid – expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports.
Check the render method of App
.
in App
me genera el siguiente error… que puede estar pasando??
Me sale este error al correr el nom run start:
ERROR in ./src/assets/styles/components/Footer.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/lib/loader.js!./src/assets/styles/components/Footer.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
Error: Cannot find module 'node-sass'
Require stack:
- E:\Dropbox\Cursos Platzi\ReactRouter\PlatziVideo\node_modules\sass-loader\lib\loader.js
- E:\Dropbox\Cursos Platzi\ReactRouter\PlatziVideo\node_modules\loader-runner\lib\loadLoader.js
- E:\Dropbox\Cursos Platzi\ReactRouter\PlatziVideo\node_modules\loader-runner\lib\LoaderRunner.js
- E:\Dropbox\Cursos Platzi\ReactRouter\PlatziVideo\node_modules\webpack\lib\NormalModule.js
- E:\Dropbox\Cursos Platzi\ReactRouter\PlatziVideo\node_modules\webpack\lib\NormalModuleFactory.js
- E:\Dropbox\Cursos Platzi\ReactRouter\PlatziVideo\node_modules\webpack\lib\Compiler.js
- E:\Dropbox\Cursos Platzi\ReactRouter\PlatziVideo\node_modules\webpack\lib\webpack.js
- E:\Dropbox\Cursos Platzi\ReactRouter\PlatziVideo\node_modules\webpack-dev-server\bin\webpack-dev-server.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
at Function.Module._load (internal/modules/cjs/loader.js:725:27)
at Module.require (internal/modules/cjs/loader.js:952:19)
at require (internal/modules/cjs/helpers.js:88:18)
at Object.sassLoader (E:\Dropbox\Cursos Platzi\ReactRouter\PlatziVideo\node_modules\sass-loader\lib\loader.js:46:72)
Ya probe haciendo un npm rebuild node-sass y hasta reinstalandolo y nada… alguna idea de que puede ser?
para que no esten iniciando de manera manual el servidor les recomiendo usar scripts en el package.json
en el apartado “scripts”
“server”: “npx json-server --watch initialState.json”,
en una nueva terminal bastaria con escribir
npm run server
donde server es el nombre del script a ejecutar
Me quiero volver chango, pasé media hora buscando el error en el proyecto:
Lo leí varias veces y parecía bien…
Como se relaciona este manejo de rutas con el backend?
Para solucionar el problema cuando se cambia el nombre a ‘Home’ esto fue lo que hice:
npm i react-router-dom --save
import { BrowserRouter, Route } from 'react-router-dom';
Que guay, que chulis, en mis comienzos con react ya me andaba metiendo con next.js
npm install -g json-server es un opción pero si no quieres instalarlo global, puedes sacar el -g y después ocupar node_modules/.bin/json-server initialState.json
Bien explicado el tema de las rutas
//el parentesis significa que esta haciendo un return por default
const App = () => (
<BrowserRouter>
<Route exact path="/" component={Home} />
</BrowserRouter>
);
//también podemos dejarlo así con return explicito:
const App = () => {
return(
<BrowserRouter>
<Route exact path="/" component={Home} />
</BrowserRouter>
)};
quiero ver la pagina home en mi celular, solo lo puedo visualizar en mi escritorio, puse la ip de mi escritorio en mi celular y no puedo verlo, como puedo visualizar en mi celular el proyecto?
Me parece un muy buen curso.
Primera vez que le doy a npm run start y no se me rompe la app 🤣🤣
Chivisimo!
n
aprendiento el manejo de rutas
bien
Como Aporte, en lugar de renombrar el archivo “App” como “Home”, podríamos renombrarlo como “Layout”.
Es posible manejar rutas dinamicas?
Here we go baby!!! 😄
Las rutas que añadamos debemos definirlas con el componente Route y estas deben estar encapsuladas dentro del componente BrowserRouter del paquete de react-router-dom. Para definir una ruta con el componente Route debemos pasarle las props de:
path para indicar la url.
exact si queremos que funcione única y exactamente con la url que le digamos.
component para indicarle el componente que va a renderizar.
Excelente. Vamos avanzando.
Excelente clase explica muy bien oscar
Al día de hoy los links a las imágenes dentro del archivo JSON estan caidos 😦
Tenia problemas con el json-server pero luego lo instale globalmente con “npm i -g json-server” y todo perfecto
en qué casos se podría usar el route sin el exact?
react.development.js:167 Warning: React.createElement: type is invalid – expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports.
Check the render method of App
.
in App
corre sin problema
excelente muy buena clase, estoy en la practica 😄
excelente que bonito*.*
buenas tardes quein me puede colaborar, yo copie el proyecto pasado que tengo en mi computadora y comence el proceso con este nuevo curso ya que lo hice diferente, pero me sale un error y yo copie todo tal cual quedo del anterior espero me pueden ayudar llevo dos horas en ello y no se que hacer
Una cosa curiosa es que cuando importamos a BrowserRouter
se le cambia el nombre por Router
por convención. Esto se hace así:
import { BrowserRouter as Router } from 'react-router-dom'
Perdón, no se que hice mal pero al clonar el proyecto y crear la rama como indicabas en el vídeo, a mi no me aparece la carpeta containers
Por si necesitan cambiar el puerto de json-server:
json-server --watch initialState.json --port 3004
No puedo avanzar en el curso por este error que aparece cuando le cambio el nombre a home
react.development.js:188 Warning: React.createElement: type is invalid – expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports.
Check the render method of App
.
in App
(a los que nos les corre la instalación de dependencias con npm)
npm install -g yarn
yarn install
Hola, con npm install me está sacando muchos errores, les recomiendo usar Yarn (que es otro package manager pero más pro) , para eso vamos a la terminal e instalamos yarn (dicen que npm sólo sirve para instalar yarn jajajaj)
npm install -g yarn
una vez tengan Yarn instalado pueden instalar todas las dependencias del proyecto (más rápido que con npm y además funciona) con el comando en la terminal:
yarn install
Si por un casual instalan react-router-dom sin indicar una version se instalará la ultima versión, en el momento de escribir esto es 6.3.0, y el prop component de Route no funcionará y se tendría que cambiar por element y ya funcionaria.
import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from '../containers/Home';
const App = () => (
<Router>
<Routes>
<Route exact path="/" element={<Home />} />
</Routes>
</Router>
);
export default App;
Para los que tienen problemas 😥, aquí les dejo el paso a paso de como a mi me funciono🤗
git clone https://github.com/platzi/PlatziVideo.git
npm install -g npm-check-updates
ncu -u
npm i
git checkout -b feature/router-redux
npm i react-router-dom --save
import React from 'react'
import { BrowserRouter as Router,Routes, Route } from 'react-router-dom'
import Home from '../containers/Home'
const App = () => {
return (
<Router>
<Routes>
<Route
path="/"
element={<Home/>}
/>
</Routes>
</Router>
)
}
export default App
npm run start
json-server initialState.json
Espero les pueda ser de ayuda! 😀
Tuve un problema y es que la página solo me cargaba el fondo morado, intenté solucionarlo con las recomendaciones que encontré en internet, pero no funcionó, a ciencia cierta no sé si funcionó lo que yo hice utilizando mi poco conocimiento o si fue en conjunto con lo que hice por mi parte + comentarios de Platzi (creo que si fue una combinación)
instalé la dependencia map-loader
npm install -D source-map-loader
Luego de eso se debe agregar una nueva regla a nuestro webpack.config
{
test: /\.js$/,
enforce: 'pre',
use: [
{
loader:'source-map-loader'
}
]
}
Pero hasta ese momento no funcionaba… Sin embargo, me di cuenta que había un typo en ese mismo archivo, en esta regla el “loader” estaba entre comillas simples (No debería tener ninguna comilla)
test: /\.(png|gif|jpg)$/,
use: [
{
'loader': 'file-loader',
options: {
name: 'assets/[hash].[ext]'
}
}
]
}
Hice la corrección y seguía sin pasar del fondo morado, estaba a punto de rendirme, la app no me tiraba ningún error por consola y estaba que dejaba este curso tirado, pero se me dió por inspeccionar la página y ahí estaba todo, por la versión que estoy usando de react, las cosas han cambiado, por lo tanto los componentes no se cargan igual y me tocó hacerle modificaciones al archivo App.js y crear nuevos archivos.
Primero, creé una carpeta context y un archivo en esta llamada AppContext.js con el siguiente código
import React from "react";
const AppContext = React.createContext({});
export default AppContext;
Esto luego lo tendremos que importar a nuestro archivo App.js junto con el archivo UseInitialState.js en nuestra carpeta hooks. En total esto es lo que debemos importar hasta el momento para quedar al día con esta clase (y creo que me estoy adelantando algunas clases)
import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "../containers/Home.jsx";
import useInitialState from "../hooks/useInitialState.js";
import AppContext from "../context/AppContext.js";
Han habido cambios en react desde que se grabó este curso, me atrevo a afirmar que más adelante el profesor usará “Switch” en las rutas, actualmente hoy 4 de enero de 2021 se usa “Routes” tal como lo estoy importando.
Finalmente, en nuestra función App vamos a invocar nuestro initialState, vamos a usar nuestro AppContext y vamos a dejar el manejo de las rutas bien elegante para el resto de las clase, así:
const App = () => {
const InitialState = useInitialState();
return (
<AppContext.Provider value ={InitialState}>
<BrowserRouter>
<Routes>
<Route path="/" element={<Home/>} />
</Routes>
</BrowserRouter>
</AppContext.Provider>
)
};
Hasta aquí mi app funciona perfectamente, espero les sea de utilidad este post a alguno 😄
Tengo un problema, a mi no me sale nada cuando corro la app, solo fondo morado, y antes de esta clase al menos me salía el loading 😦
Para empezar a crear nuestro archivo de rutas, tenemos que ir agregando una carpeta de nombre routes, la cual estara a dentro de SRC. Dentro de routes crearemos un archivo que sera ‘app.js’ donde importaremos REACT y BrowserRouter del react-router-dom:
import React from 'react'
import { BrowserRouter} from 'react-router-dom'
Ahora crearemos una funcion que va a exponer BrowserRouter y los elementos que va a exponer para la construccion de rutas. Esta funcion sera presentacional ya que solo va a contener componentes para organizar las rutas que necesitamos. Quedaria asi:
import React from 'react'
import { BrowserRouter} from 'react-router-dom'
const App = () => (
<BrowserRouter>
</BrowserRouter>
);
export default App;
Ahora necesitamos traer el elemento Route que nos permitira agregar el elemento que necesitamos. Aqui los agregaremos de la siguiente forma:
<Route exact path="/" component={App} />
Donde exact le diremos que la ruta tiene que ser exacta, y path sera la ruta que manejaremos y en component le daremos el componente o la pagina que queremos que abra. En este caso tenemos que cambiar el nombre de App por Home para que no se repita. Al final nos quedaria:
import React from 'react'
import { BrowserRouter, Route} from 'react-router-dom'
import Home from '../containers/Home';
const App = () => (
<BrowserRouter>
<Route exact path="/" component={Home} />
</BrowserRouter>
);
export default App;
EN LA ACTUALIDAD PODEMOS CAMBIAR BROWSERROUTER SOLO POR BROWSER
Chicos si les sale este error, solo escriban lo siguiente: npm rebuild node-sass
Si quieren saber más acerca de react route : https://reactrouter.com/web/example/url-params
práctica:
Hola chicos, si no les gusta como se ven las barras de scroll pueden eliminarles en su archivo src/assets/styles/app.scss de la siguiente manera:
::-webkit-scrollbar {
display: none;
}
Esto es un aporte rescatado del curso de React Js Practico
Si alguien más no puede ejecutar el servidor de la API FAKE y les sale este error:
Lo que deben hacer es abrir PowerShell como administrador y ejecutar el siguiente comando: “Set-ExecutionPolicy Unrestricted”.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.