A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Abstrayendo React Router, creando history y haciendo initialState m谩s accesible

9/22
Recursos

Aportes 24

Preguntas 6

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

Tocan muchas configuraciones pero no quedan claros los conceptos鈥

<h1>Abstrayendo React Router, creando history y haciendo initialState mas accesible</h1>

Primero debes abstraer React Router. Para ello, instalamos las siguientes dependencias

npm install history react-router-config react-router

history permite mantener un historial mediante sesiones

react-router permite manejar rutas dentro de react

react-router-config permite a帽adir configuracion extra al enrutador, en esta caso React Router

Despu茅s de instalar nuestras dependencias, debemos proceder a agregar las siguientes l铆neas al archivo index.js de nuestro frontend (src/frontend/index.js)

import { createBrowserHistory } from 'history';

const history = createBrowserHistory();

Con esto, creamos una historia en nuestro frontend logrando que la SPA sea la misma al momento de ir movi茅ndonos entre rutas.

Luego debemos agregar las siguientes l铆neas y modificar el ReactDOM.render justo como se muestra

import { Router } from 'react-router'

ReactDOM.render(
  <Provider store={store}>
		<Router history={history}>
	    <App />
		</Router>
  </Provider>,
  document.getElementById('app')
);

Con esto, agregamos un router a toda nuestra app de React que cuenta con una history. Con esto podemos persistir datos a lo largo de las diferentes rutas

Ahora debemos crear el archivo de configuraci贸n de rutas que ocupar谩 Express, este archivo lo creamos en la ruta src/frontend/routes y lo llamaremos serverRoutes.js

Dentro de este archivo, colocaremos lo siguiente:

import Home from '../containers/Home';
import Login from '../containers/Login';
import Register from '../containers/Register';
import NotFound from '../containers/NotFound';
import Player from '../containers/Player';

const routes = [
  {
    exact: true,
    path: '/',
    component: Home,
  },
  {
    exact: true,
    path: '/login',
    component: Login,
  },
  {
    exact: true,
    path: '/register',
    component: Register,
  },
  {
    exact: true,
    path: '/player:id',
    component: Player,
  },
  {
    name: 'NotFound',
    component: NotFound,
  },
];

export default routes;

B谩sicamente estamos reescribiendo el sistema de rutas pero en este caso, para que Express pueda interpretarlas correctamente.

Por 煤ltimo, pero no menos importante, vamos a colocar el initialState en un archivo individual pues mas adelante accederemos a el en varias partes de nuestro c贸digo.

Para esto simplemente movemos el initialState que se encuentra en src/frontend/index.js a un nuevo archivo en esta misma ruta, lo llamaremos initialState.js

Ya para finalizar, exportamos el archivo y lo importamos en el index.js ya que es requerido aqu铆:

import initialState from './initialState';

Creo que se deberia explicar mas el por que del refactor para definir las rutas asi, imagino que tiene ventajas para SSR el poder definir las rutas declarativamente, sin embargo no es obvio asumir dichos beneficios 馃槂, noto como todos los demas intentan entender 鈥渜ue hizo鈥 el profesor, pero ninguno tenemos claro el 鈥渆l profesor hizo esto porque nos permite X cosa鈥 lo mismo ocurrio en la clase anterior cuando se elimino el plugin de html de webpack sin explicar que ventajas trae esto para el SSR

npm install history react-router-config

no es necesario instalar react router ya que ya esta instalado react router dom el cual usa el core de react router, ismplemente en vez de poner react-router pongan react-router-dom

estuviera bien un poco mas de contexto, entiendo que son todas las configuraciones. Al principio todo un video para explicar una diapositiva simple (csr vs ssr) y con los conceptos clave de configuraci贸n solo como es el c贸digo. En lo personal prefiero aprender que el porque de las cosas y no solo poner c贸digo porque asi esta en el video.

no me quedo claro鈥 驴Por que un historial?

react-router

react-router-config

history

npm i react-router-config history react-router

Se supone que en cursos anteriores todo el C贸digo de las rutas ya estaba bien, funcionaba al 100% y ahora lo modifica y agrega mas cosas para solucionar nose que.

Lo mismo me paso con lo del webpack, se supone que ya estaba bien y despu茅s lo modific贸 馃槙

I don鈥檛 understand why

no he podido solucionar este warning

<webpack building...
[nodemon] restarting due to changes...
[nodemon] starting `node src/server/index.js`
Development Config
Server listen on port http://localhost:3000
鈩 锝dm锝: wait until bundle finished: /__webpack_hmr
webpack built 1282ad497ac354caeaa0 in 2011ms
鈿 锝dm锝: Hash: 1282ad497ac354caeaa0
Version: webpack 4.44.1
Time: 2011ms
Built at: 08/10/2020 5:28:06 PM
                                      Asset      Size  Chunks             Chunk Names
assets/2350f838c49a0870ffa4ba40c596fc61.png  3.02 KiB          [emitted]
assets/435b1bef96c79093c441f263d42d8c23.png  30.5 KiB          [emitted]
assets/5098340d72749e7128672e8254567de2.png  1.45 KiB          [emitted]
assets/51bc5f1098eea99c0e1ebacf59f30499.png  2.52 KiB          [emitted]
assets/6267a3128371b34505e8445f89af9cbd.png  1.56 KiB          [emitted]
assets/928696d759a2cd3b2a6533fcfbb0f4d5.png  4.07 KiB          [emitted]
                             assets/app.css  15.9 KiB    main  [emitted]  main
                              assets/app.js   1.5 MiB    main  [emitted]  main
assets/cd9d3d9444872d3e59a14f27ba862b5a.png  3.28 KiB          [emitted]
Entrypoint main = assets/app.css assets/app.js
[0] multi ./src/frontend/index.js webpack-hot-middleware/client?path=/__webpack_hmr&timeout=2000&reload=true 40 bytes {main} [built]
[./node_modules/history/index.js] 7.07 KiB {main} [built]
[./node_modules/querystring-es3/index.js] 127 bytes {main} [built]
[./node_modules/react-dom/index.js] 1.33 KiB {main} [built]
[./node_modules/react-redux/es/index.js] 776 bytes {main} [built]
[./node_modules/react-router/esm/react-router.js] 24.9 KiB {main} [built]
[./node_modules/react/index.js] 190 bytes {main} [built]
[./node_modules/redux/es/redux.js] 23.6 KiB {main} [built]
[./node_modules/strip-ansi/index.js] 161 bytes {main} [built]
[./node_modules/webpack-hot-middleware/client-overlay.js] (webpack)-hot-middleware/client-overlay.js 2.17 KiB {main} [built]
[./node_modules/webpack-hot-middleware/client.js?path=/__webpack_hmr&timeout=2000&reload=true] (webpack)-hot-middleware/client.js?path=/__webpack_hmr&timeout=2000&reload=true 7.68 KiB {main} [built]
[./node_modules/webpack-hot-middleware/process-update.js] (webpack)-hot-middleware/process-update.js 4.35 KiB {main} [built]
[./node_modules/webpack/buildin/harmony-module.js] (webpack)/buildin/harmony-module.js 573 bytes {main} [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {main} [built]
[./src/frontend/index.js] 7.13 KiB {main} [built]
    + 113 hidden modules

WARNING in ./node_modules/react-router/esm/react-router.js 294:19-33
"export 'createLocation' was not found in 'history'
 @ ./src/frontend/index.js
 @ multi ./src/frontend/index.js webpack-hot-middleware/client?path=/__webpack_hmr&timeout=2000&reload=true

WARNING in ./node_modules/react-router/esm/react-router.js 309:27-41
"export 'createLocation' was not found in 'history'
 @ ./src/frontend/index.js
 @ multi ./src/frontend/index.js webpack-hot-middleware/client?path=/__webpack_hmr&timeout=2000&reload=true

WARNING in ./node_modules/react-router/esm/react-router.js 577:45-59
"export 'createLocation' was not found in 'history'
 @ ./src/frontend/index.js
 @ multi ./src/frontend/index.js webpack-hot-middleware/client?path=/__webpack_hmr&timeout=2000&reload=true

WARNING in ./node_modules/react-router/esm/react-router.js 596:40-54
"export 'createLocation' was not found in 'history'
 @ ./src/frontend/index.js
 @ multi ./src/frontend/index.js webpack-hot-middleware/client?path=/__webpack_hmr&timeout=2000&reload=true

WARNING in ./node_modules/react-router/esm/react-router.js 311:13-30
"export 'locationsAreEqual' was not found in 'history'
 @ ./src/frontend/index.js
 @ multi ./src/frontend/index.js webpack-hot-middleware/client?path=/__webpack_hmr&timeout=2000&reload=true
Child mini-css-extract-plugin ../../../../Alejandro Morales S谩nchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/node_modules/css-loader/dist/cjs.js!../../../../Alejandro Morales S谩nchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/node_modules/sass-loader/dist/cjs.js!../../../../Alejandro Morales S谩nchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/src/frontend/assets/styles/App.scss:
    Entrypoint mini-css-extract-plugin = *
    [./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/frontend/assets/styles/App.scss] 1.46 KiB {mini-css-extract-plugin} [built]
    [./node_modules/css-loader/dist/runtime/api.js] 2.46 KiB {mini-css-extract-plugin} [built]
Child mini-css-extract-plugin ../../../../Alejandro Morales S谩nchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/node_modules/css-loader/dist/cjs.js!../../../../Alejandro Morales S谩nchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/node_modules/sass-loader/dist/cjs.js!../../../../Alejandro Morales S谩nchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/src/frontend/assets/styles/components/Carousel.scss:
    Entrypoint mini-css-extract-plugin = *
    [./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/frontend/assets/styles/components/Carousel.scss] 722 bytes {mini-css-extract-plugin} [built]
    [./node_modules/css-loader/dist/runtime/api.js] 2.46 KiB {mini-css-extract-plugin} [built]
Child mini-css-extract-plugin ../../../../Alejandro Morales S谩nchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/node_modules/css-loader/dist/cjs.js!../../../../Alejandro Morales S谩nchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/node_modules/sass-loader/dist/cjs.js!../../../../Alejandro Morales S谩nchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/src/frontend/assets/styles/components/CarouselItem.scss:
    Entrypoint mini-css-extract-plugin = *
    [./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/frontend/assets/styles/components/CarouselItem.scss] 2.05 KiB {mini-css-extract-plugin} [built]
    [./node_modules/css-loader/dist/runtime/api.js] 2.46 KiB {mini-css-extract-plugin} [built]
Child mini-css-extract-plugin ../../../../Alejandro Morales S谩nchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/node_modules/css-loader/dist/cjs.js!../../../../Alejandro Morales S谩nchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/node_modules/sass-loader/dist/cjs.js!../../../../Alejandro Morales S谩nchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/src/frontend/assets/styles/components/Categories.scss:
    Entrypoint mini-css-extract-plugin = *
    [./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/frontend/assets/styles/components/Categories.scss] 439 bytes {mini-css-extract-plugin} [built]
    [./node_modules/css-loader/dist/runtime/api.js] 2.46 KiB {mini-css-extract-plugin} [built]
Child mini-css-extract-plugin ../../../../Alejandro Morales S谩nchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/node_modules/css-loader/dist/cjs.js!../../../../Alejandro Morales S谩nchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/node_modules/sass-loader/dist/cjs.js!../../../../Alejandro Morales S谩nchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/src/frontend/assets/styles/components/Footer.scss:
    Entrypoint mini-css-extract-plugin = *
    [./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/frontend/assets/styles/components/Footer.scss] 620 bytes {mini-css-extract-plugin} [built]
    [./node_modules/css-loader/dist/runtime/api.js] 2.46 KiB {mini-css-extract-plugin} [built]
Child mini-css-extract-plugin ../../../../Alejandro Morales S谩nchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/node_modules/css-loader/dist/cjs.js!../../../../Alejandro Morales S谩nchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/node_modules/sass-loader/dist/cjs.js!../../../../Alejandro Morales S谩nchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/src/frontend/assets/styles/components/Header.scss:
    Entrypoint mini-css-extract-plugin = *
    [./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/frontend/assets/styles/components/Header.scss] 1.58 KiB {mini-css-extract-plugin} [built]
    [./node_modules/css-loader/dist/runtime/api.js] 2.46 KiB {mini-css-extract-plugin} [built]
Child mini-css-extract-plugin ../../../../Alejandro Morales S谩nchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/node_modules/css-loader/dist/cjs.js!../../../../Alejandro Morales S谩nchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/node_modules/sass-loader/dist/cjs.js!../../../../Alejandro Morales S谩nchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/src/frontend/assets/styles/components/Login.scss:
    Entrypoint mini-css-extract-plugin = *
    [./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/frontend/assets/styles/components/Login.scss] 3.25 KiB {mini-css-extract-plugin} [built]
    [./node_modules/css-loader/dist/runtime/api.js] 2.46 KiB {mini-css-extract-plugin} [built]
Child mini-css-extract-plugin ../../../../Alejandro Morales S谩nchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/node_modules/css-loader/dist/cjs.js!../../../../Alejandro Morales S谩nchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/node_modules/sass-loader/dist/cjs.js!../../../../Alejandro Morales S谩nchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/src/frontend/assets/styles/components/NotFound.scss:
    Entrypoint mini-css-extract-plugin = *
    [./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/frontend/assets/styles/components/NotFound.scss] 5.15 KiB {mini-css-extract-plugin} [built]
    [./node_modules/css-loader/dist/runtime/api.js] 2.46 KiB {mini-css-extract-plugin} [built]
Child mini-css-extract-plugin ../../../../Alejandro Morales S谩nchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/node_modules/css-loader/dist/cjs.js!../../../../Alejandro Morales S谩nchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/node_modules/sass-loader/dist/cjs.js!../../../../Alejandro Morales S谩nchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/src/frontend/assets/styles/components/Player.scss:
    Entrypoint mini-css-extract-plugin = *
    [./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/frontend/assets/styles/components/Player.scss] 730 bytes {mini-css-extract-plugin} [built]
    [./node_modules/css-loader/dist/runtime/api.js] 2.46 KiB {mini-css-extract-plugin} [built]
Child mini-css-extract-plugin ../../../../Alejandro Morales S谩nchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/node_modules/css-loader/dist/cjs.js!../../../../Alejandro Morales S谩nchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/node_modules/sass-loader/dist/cjs.js!../../../../Alejandro Morales S谩nchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/src/frontend/assets/styles/components/Register.scss:
    Entrypoint mini-css-extract-plugin = *
    [./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/frontend/assets/styles/components/Register.scss] 2.21 KiB {mini-css-extract-plugin} [built]
    [./node_modules/css-loader/dist/runtime/api.js] 2.46 KiB {mini-css-extract-plugin} [built]
Child mini-css-extract-plugin ../../../../Alejandro Morales S谩nchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/node_modules/css-loader/dist/cjs.js!../../../../Alejandro Morales S谩nchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/node_modules/sass-loader/dist/cjs.js!../../../../Alejandro Morales S谩nchez/Documentos Universidad/Curso de Server Side Render con Express - Platzi/PlatziVideo2.0/src/frontend/assets/styles/components/Search.scss:
    Entrypoint mini-css-extract-plugin = *
    [./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/frontend/assets/styles/components/Search.scss] 1.16 KiB {mini-css-extract-plugin} [built]
    [./node_modules/css-loader/dist/runtime/api.js] 2.46 KiB {mini-css-extract-plugin} [built]
鈩 锝dm锝: Compiled with warnings.>

he seguid todos los paso busaco en la red y sigue saliendo ese warning desde este punto del curso鈥

Alguien sabe de donde el profesor saca la referencia para hacer todos estos cambios? Creo que eso deberia ser agregado a este curso y no estar copiando y pegando solo codigo.

驴Alguien sabr谩 en que parte del c贸digo se utilizan las routes creadas para funcionar desde el servidor?, por que el instructor crea un array con las routes con las mismas caracter铆sticas que las rutas del lado del cliente, incluso tambi茅n las llega exportar, pero no se llegan a utilizar el ning煤n lado del c贸digo. Creo que esas rutas quedan en el aire.

En esta clase hemos establecido las rutas tanto para el cliente(frontend) y server (backend). Las segundas no se han implementado todavia
馃殌

隆Gracias!

Wao, ya adoro este curso

me ha funcionado perfecto, aunque en consola me aparece

EventSource's response has a MIME type ("text/html") that is not "text/event-stream". Aborting the connection.```

No me reconoce los archivos de sass

a alguien mas le aparece en la consola del navegador esto?

DevTools failed to load SourceMap: Could not load content for webpack:///node_modules/react-router/esm/react-router.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

por lo que le铆, no es muy importante, pero de todas maneras quiero sacarme las dudas

porque entrelaza palabras en ingles???, no se entiende nada si mezcla dos idiomas

Para todos los que est谩n teniendo el problema de React.createElement: type is invalid, al parecer es un bug en alguna librer铆a. Yo lo solucione cambiando el nombre al archivo Home.jsx a Homee.jsx y funciono.

Algo esta muy raro pero espero les funcione.

PD: Me tarde dos d铆as en encontrar el funcionamiento.

amigos buen d铆a, alguien me puede ayudar es que no me esta funcionado el linter no me muestra errores ni nada de eso 馃槮, la verdad es primer vez que uso ese tipo de cosas en este mundo del desarrollo

Muy confusa la clase