Crear nuestro archivo de Rutas

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-domfuncionan 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

Crear nuestro archivo de Rutas

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:

1. Correr el comando

npm i react-router-dom --save

1. Cambiar el import de BrowserRoute y Route por

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

Hola estoy teniendo este error y no se porque si alguien me puede dar una mano
Uncaught (in promise) SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

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🤗

1. Clonar El repositorio

git clone https://github.com/platzi/PlatziVideo.git

1. Actualizar las dependencias e instalarlas

 npm install -g npm-check-updates

 ncu -u

 npm i

1. Crear la rama

git checkout -b feature/router-redux

1. Instalar el react-router-dom

npm i react-router-dom --save  

1. Crean su archivo App.js en routes (como lo indica el profe), pero el react router tiene una nueva version lo cual el archivo seria asi:

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

1. Luego de cambiar el nombre del archivo a Home (como indica el profe), ahora procedan a correrlo:

npm run start

1. Luego abren otra terminal y ejecutan esto :

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”.