Manejo de rutas en el servidor con React Router

Clase 22 de 58 • Curso Profesional de React con Redux 2016

Resumen

Manejar las rutas con React Router

Instala la librería con npm i -S react-router@next

Para usarlo debes usar los componentes:

Match, para decirle que hacer cuando encuentre la ruta
Miss, para decirle que hacer cuando no encuentre la ruta
Link, para moverse entre rutas

webpack -w ejecuta el comando y deja escuchando los cambios.

Daniel Gonzalez Blanco

student•

En lugar del paquete http para crear el servidor, se podria utilizar express?

Miguel Ruiz Moreno

student•

Si quieres sí. Creo que usaron http solo para ahorrarse de instalar una dependencia ya que http viene con Node y porque necesitábamos algo muy chiquito.

Sergio Daniel Xalambrí

student•

@sukomost como dijo @MiguhRuiz sí podrías usar Express o cualquier otra librería o framework de Node.js. En este caso usamos http ya que no necesitamos más que lo este ofrece, las rutas las manejamos con React Router así que Express es innecesario.

Aunque si vas a montar un servidor HTTP más poderoso donde uses cookies, te traigas los datos antes de hacer render en el servidor, etc. seguramente Express te sirva más que usar http…

Juan Carlos Correa Herrera

student•

Deberían indicar que el router ya se hace de manera diferente y un link del tutorial donde viene cómo modificarlo a la versión actual de react pues hasta que lo leí en un comentario supe cómo buscar tal tutorial, que por cierto haciendo los cambios hago el webpack, luego corro con node y se queda el localhost en espera de una respuesta, no me genera error 😮 :p

Jaider Garcia

student•

@sergiodxa Al parecer la libreria de react-router se ha actualizado y la configuración actual genera error. En la nueva pagina web, es algo distinto, no aparecen dichos imports.

Sergio Daniel Xalambrí

student•

Sí el cambio de versión es nuevo, voy a agregar un material de texto para explicar los cambios a la última versión.

Sergio Daniel Xalambrí

student•

@jaider2523 el material ya está publicado en el curso.

https://platzi.com/clases/react/concepto/implementacion-de-redux/actualizando-a-la-ultima-version-de-react-router/material/

El material es para actualizar el proyecto del curso, podés seguir con la versión del curso y luego actualizar o ir viendo que cambia mientras tomas el curso.

Miguel Ruiz Moreno

student•

¿Cambió la manera de hacer rutas con respecto a la versión anterior o es que esta es otra manera? Siempre las he hecho en el ReactDOM.render y de esta manera:

`ReactDOM.render((
  <Router history={browserHistory}>
    <Route path="/" component={Base}>
      <IndexRoute component={ImageContainer} />
      <Route path="/new" component={ImageForm} />
    </Route>
  </Router>
), document.getElementsByClassName('react-app')[0])````

Sergio Daniel Xalambrí

student•

En la última versión de React Router cambiaron los componentes usados para definir rutas, además de eso definirlas al momento de hacer render no te permite que seas universales (que funcionen en cliente y servidor) o te tocaría duplicar todas tus rutas de nuevo en el servidor.

Miguel Ruiz Moreno

student•

Es lo que estoy teniendo que hacer. Consideraré actualizar a el nuevo React Router. ¡Muchas gracias!

Juan Castro

teacher•

Hey,si alguno tiene problemas cuando webpack va a compilar, muy probablemente el error es este:

Cannot resolve 'file' or 'directory' ./ruta-al-repo-etc-etc/

Bueno, el error es que cuando importan un componente (Home, About, NotFound) este tiene la extension .jsx, y cuando importan sin incluir la extension, webpack busca por defecto al archivo con la extension .js, asi que como no existe, manda el error…

Para solucionarlo,pueden cada vez que importen un componente incluir .jsx al final, o decirle a webpack que si no encuentra un los archivos con la extension .js busque con la extension .jsx:

resolve: {
    extensions: ['', '.js', '.jsx'],
}

Manuel Galindez

student•

Como decía JonHerre porque se debe hacer un nuev render cuando hacemos la validacion de 404? He probado y funciona perfectamente sin hacer el render, entiendo que se debe pasar el nuevo context como se dice en la clase pero quiero enterde porque sigue funcionando?

Sergio Daniel Xalambrí

student•

Debido a como funciona el componente Miss este requiere usar componentDidMount, pero ya que este método no se ejecuta en el servidor entonces hay que hacer el render dos veces.

Es para evitar un posible problema al luego hacer el render en el navegador donde React va a dar un warning en consola indicando que lo se renderiza en el cliente es diferente al HTML generado en el servidor.

Algunas veces pasa y para evitar este problema se recomienda el doble render en caso de un 404.

Manuel Galindez

student•

Perfecto con esta explicación me queda super claro.

Andrés Felipe Eslava Zuluaga

student•

Buenas tardes, cómo están?
Llevo ya un buen tiempo intentando de todo; he seguido el curso paso a paso y no sé porque, al ejecutar el comando

node built/server/index.js

Me arroja siempre éste error:

PS C:\Users\afeli\Documents\Projects\React Redux> node built/server/index.js
C:\Users\afeli\Documents\Projects\React Redux\built\server\index.js:68
          const context = (0, _reactRouter.createServerRenderContext)();
                                                                     ^

TypeError: (0 , _reactRouter.createServerRenderContext) is not a function
    at Server.requestHandler (C:\Users\afeli\Documents\Projects\React Redux\built\server\index.js:68:63)
    at emitTwo (events.js:106:13)
    at Server.emit (events.js:191:7)
    at HTTPParser.parserOnIncoming [as onIncoming] (_http_server.js:546:12)
    at HTTPParser.parserOnHeadersComplete (_http_common.js:99:23)
PS C:\Users\afeli\Documents\Projects\React Redux>

Ya no sé qué pueda ser, no sé si es por las actualizaciones de los paquetes o la versión de Node, no sé!! POR FAVOR AYUDA!

Sergio Daniel Xalambrí

student•

Revisa que la versión de React Router sea la misma que la que se usa en el curso (4.0.0-alpha.5). Si eso no es, subí tu código a un repo de Github y compartí el enlace para revisarlo.

Andrés Felipe Eslava Zuluaga

student•

Hola @sergiodxa. Efectivamente, la versión que descarga es incompatible a la estructura del proyecto (en ésta fecha). Se puede especificar que con la versión que descarga el comando npm i -S react-router@next (que resulta siendo 4.0.0-beta.3) no funciona nada.
Hice las pruebas y con las versiones react-router@4.0.0-alpha.5 o react-router@4.0.0-alpha.6, hace el bundle y ejecuta todo.
Aún así quiero decir algo muy puntual:
Platzi me gusta desde el primer día que los ví, pero deberían dejar un comentario como éste ( o como el profesor Xalambrí hizo con el articulo de Event handlers con parámetros personalizados ), para que los estudiantes que lleguen a ver los videos, sepan qué ha cambiado en el tiempo con respecto a lo que se hace en curso. NO me parece que debamos usar una versión vieja cuando react-router@4.0.0-beta.3 no tiene ni la mitad de archivos que se necesitan en éste punto del curso.
Espero que les ayude a quién llegue a tener un inconveniente en ésta sección del curso. Gracias.

Daniel Gonzalez Blanco

student•

Que paquetes tienes instalados en Atom?

Sergio Daniel Xalambrí

student•

Tengo instalados estos:

Stylus
atom-redux-duck-snippets
atom-ternjs
autocomplete-paths
autocomplete-python
docblockr
editorconfig
elm-snippets
emmet
file-icons
git-projects
highlight-selected
language-babel
language-docker
language-elm
language-elmx
linter
linter-docker
linter-elm-make
linter-eslint
linter-flow
pigments

Y el tema que utilizo es Nucleous Dark y coloreado de sintaxis es Monokai Seti.

Armando de jesus santiz lopez

student•

porque algunos import se ponen entre llaves y otros no ?
ejemplo:

Sergio Daniel Xalambrí

student•

Supongamos que estas importando una dependencias que exporta un objeto con las key foo y bar.

Si haces:

import module from 'module';

En ese caso module es un objeto con las key foo y bar.

Si hacemos:

import { foo } from 'module';

En ese caso solo importamos foo y no bar. Usar las llaves nos permiten importas ciertas key específicas del módulo.

Un ejemplo del curso:

import {
	Match,
	Miss,
	Link,
} from 'react-router';

Ahí lo que estamos haciendo es importar Match, Miss y Link de react-router, pero sin importar el resto de componentes que trae React Router, también podríamos haber hecho:

import ReactRouter from 'react-router';

Pero luego hubiésemos tenido que usar ReactRouter.Match, ReactRouter.Miss y ReactRouter.Link.

Camilo Ortegón

student•

Hay un tutorial para implementar React con Express?

Sergio Daniel Xalambrí

student•

En el curso no usamos Express, de hecho en muy raras ocasiones necesitas Express junto a React Router ya que este ya maneja tus rutas.

Pero básicamente sin React Router tendrías que tener un componente por vista y que en cada ruta de Express haga el render de React y mande el HTML generado. Con React Router lo que haces es definir una ruta '*' y que ahí renderices React y dejas que React Router decida que ruta renderizar.

Fabian Gutierrez

student•

Creo que Camilo pregunta es como integrar react con un servidor de express que responda las peticiones con json, yo tambien tengo la misma duda, para poder implementar todo sin perder el hot-reload y reseteando cada ves que hayan cambios en el server (como con nodemon)

La Opinión Digital

student•

Hola como están a quien le sale esta advertencia en la terminal al correr node.
Warning: Accessing PropTypes via the main React package is deprecated. Use the
prop-types package from npm instead.

Sergio Daniel Xalambrí

student•

Hola, la última versión de React que salió hace unos días agregó una advertencia al usar PropTypes directo desde el módulo de React ya que van a moverlo a otro módulo. No te preocupes por eso, es que React Router usa estos PropTypes internamente, mientras ellos (y otras librerías) actualizan va a seguir saliendo.

Albert Pedrola Martín

student•

Hola, he corregido los archivos siguiendo el articulo para actualizar a la ultima versión de React Router. Corro webpack y todo bien, pero al intentar levantar el servidor me sale este error:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in.
/Users/albertpedrola/Desktop/posts-list-in-react/build/server/index.js:124
    throw error;
    ^

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in.
    at invariant (/Users/albertpedrola/Desktop/posts-list-in-react/build/server/index.js:117:15)
    at ReactCompositeComponentWrapper.instantiateReactComponent [as _instantiateReactComponent] (/Users/albertpedrola/Desktop/posts-list-in-react/build/server/index.js:8764:55)
    at ReactCompositeComponentWrapper.performInitialMount (/Users/albertpedrola/Desktop/posts-list-in-react/build/server/index.js:14033:22)
    at ReactCompositeComponentWrapper.mountComponent (/Users/albertpedrola/Desktop/posts-list-in-react/build/server/index.js:13924:21)
    at Object.mountComponent (/Users/albertpedrola/Desktop/posts-list-in-react/build/server/index.js:3242:35)
    at ReactCompositeComponentWrapper.performInitialMount (/Users/albertpedrola/Desktop/posts-list-in-react/build/server/index.js:14037:34)
    at ReactCompositeComponentWrapper.mountComponent (/Users/albertpedrola/Desktop/posts-list-in-react/build/server/index.js:13924:21)
    at Object.mountComponent (/Users/albertpedrola/Desktop/posts-list-in-react/build/server/index.js:3242:35)
    at /Users/albertpedrola/Desktop/posts-list-in-react/build/server/index.js:18715:36
    at ReactServerRenderingTransaction.perform (/Users/albertpedrola/Desktop/posts-list-in-react/build/server/index.js:3710:20)

Alguna idea?

SEBASTIAN CEBALLOS ZAPATA

student•

Tengo el mismo problema. Ayuda 😭

Juan Guillermo Rivera Orozco

student•

Hola, buenas tardes a todos
Luego de realizar la actualización a ‘react-router-dom’, cuando estoy probando el server para ver si funciona de manera adecuada el enrutamiento básico (Home, About, Error404), estoy obteniendo el siguiente error a la hora de entrar al localhost:300 desde el navegador:

Server listening at port: 3000

/home/guillermo/Desktop/workspace/platzi/react-course/react-project/build/server/index.js:10595
    Provider,
    ^
ReferenceError: Provider is not defined
    at Server.requestHandler (/home/guillermo/Desktop/workspace/platzi/react-course/react-project/build/server/index.js:10595:5)
    at emitTwo (events.js:125:13)
    at Server.emit (events.js:213:7)
    at parserOnIncoming (_http_server.js:602:12)
    at HTTPParser.parserOnHeadersComplete (_http_common.js:116:23)
error Command failed with exit code 1.

Nota: aún no he llegado a la parte de implementación de redux

Luisa Gabriela Trejo Rosales

student•

Hola,
En la parte de renderToString no pongas el Provider, ni el IntlProvider

let html = renderToString(
    <StaticRouter location={request.url} context={context}>
      <Pages />
    </StaticRouter>
);

Alan Martín Revillagigedo Tulais

student•

Le di vueltas como loco y al final no pude echarlo a andar con las diferencias de versiones (tanto de react como de react-router). Les recomiendo que no utilicen versiones alpha cuando hagan vídeos y que, aunque pueda ser tedioso para los que no están relacionados con NPM, siempre indicar la versión al instalar el paquete. Igual descargué el proyecto, muchas gracias.

Jimmy Ibañez

student•

@alanmarth Te dejo el código actualmente funcionando con ReactRouter v4, React 16 y Webpack 3.6…

Source/server.js

import http from 'http';
import React from 'react';
import { renderToString } from 'react-dom/server';
import { StaticRouter  } from 'react-router-dom';

import Pages from './pages/containers/Page.jsx';


function requestHandler(request, response) {
	const context = {};
	let html = renderToString(<StaticRouter location={request.url} context={context}>
			<Pages />
		</StaticRouter>
		);
	
		response.setHeader('Content-Type', 'text/html');

		if (context.url) {
			response.writeHead(301, {
				Location: context.url,
			});
		response.end();
		}

		response.write(html);
		response.end();

}

const server = http.createServer(requestHandler);

server.listen(3000);

Page.jsx

import React from 'react';
import {
	Route, 
	Switch,
} from 'react-router-dom';

import Home from './Home.jsx';
import About from './About.jsx';
import Error404 from './Error404.jsx';

function Pages() {
	return (
		<main role="application">
			<Switch>
			<Route
				path="/"
				exact
				component={Home}
			/>
			<Route
				path="/about"
				exact
				component={About}
			/>
			<Route component={Error404} />
			</Switch>
		</main>
	)
}

export default Pages;

Home.jsx

import React, { Component } from 'react';
import { Link } from 'react-router-dom';

class Home extends Component {
	render() {
		return (
		<section name="Home">
			<h1>Home</h1>
			<Link to="/about">
			Go to about
			</Link>
		</section>
		);
	}
}

export default Home;

José Alejandro Muñoz Ruiz

student•

@sergiodxa, porque si genero el Link a about de la siguiente forma

<Link to="/about">
	Go to about
</Link>

me esta generando el elemento con doble ‘//’

<a href="//about" data-reactid="4">Go to about</a>

lo mismo para Home y random. cuando selecciono dicho link no re direcciona de la forma correcta.

José Alejandro Muñoz Ruiz

student•

Pages.jsx

import React from 'react';
import {
  Route,
  Switch,
} from 'react-router-dom';

import Home from './Home.jsx';
import About from './About.jsx';
import Error404 from './Error404.jsx'

function Pages() {
  return (
    <main role="application">

      <Switch>
        {/* Home */}
        <Route
          path="/"
          exact
          component={Home}
        />
        {/* About */}
        <Route
          path="/about"
          exact
          component={About}
        />
        {/* Page 404 */}
        <Route component={Error404} />
      </Switch>
    </main>
  )

}

export default Pages;

server.js

import http from 'http';
import React from 'react';
import { renderToString } from 'react-dom/server';
import { StaticRouter } from 'react-router-dom';
import Pages from './pages/containers/Pages.jsx'

function  requestHandler(request, response) {
  const context = {};

  let html = renderToString(
    <StaticRouter location={request.url} context={context}>
      <Pages />
    </StaticRouter>
  );

  response.setHeader('Content-type', 'text/html');
  
  if(context.url) {
    response.writeHead(301, {
      Location: context.url,
    });
    response.end();
  }

  response.write(html);
  response.end();

}

const server = http.createServer(requestHandler);

server.listen(8080);

Sergio Daniel Xalambrí

student•

Parece ser un error de React Router en ciertas versiones, la última versión lo arregla, en la versión usada en el curso (la que te recomiendo usar) funciona bien.

La versión usada en el curso es react-router@4.0.0-alpha.5

Jesus ibanez

student•

El curso está muy desactualizado y no puedo correr las cosas, no se supone que le de seguimiento así?

Alejandro Sanabria

student•

Algunas partes están desactualizadas pero puedes ir mirando la documentación de cada paquete para ver qué a cambiado y así actualizar el código, quizás lo veas cómo que no debería ser así, pero en un trabajo real te va a pasar y si aprendes como hacerlo es un plus para tu carrera como front end.

Markoz Peña Mendez

student•

Hola Sergio, he actualizado, pero me quedaron algunas dudas, debido a que tuve que hacer algo un poco distinto de lo que aparece en este tutorial y en

1) Las rutas no pueden empezar con “/”, debido a que me genera mal la ruta, simplemente lo coloqué así

<Linkto="about">About</Link>
2) El link a la raíz del proyecto no puede ser con “/”, lo tuve que colocar con “.”, ejemplo:

<Linkto=".">Go to home</Link>
Por lo que puedo inferir, mis problemas estaban al usar el slash (/), a que se debe esta diferencia?

Sergio Daniel Xalambrí

student•

Parece ser un error de React Router en ciertas versiones, la última versión lo arregla, en la versión usada en el curso (la que te recomiendo usar) funciona bien.

La versión usada en el curso es react-router@4.0.0-alpha.5

José Alejandro Muñoz Ruiz

student•

Al abrir desde el navegador, la consola me arroja lo siguiente, aun cuando he bajado el proyecto de archivos y copiado tal cual

const context = (0, _reactRouter.createServerRenderContext)();
                                                             ^

TypeError: (0 , _reactRouter.createServerRenderContext) is not a function
    at Server.requestHandler (/Users/josemunoz/Documents/Code/proyecto-react/built/server/index.js:22621:62)
    at emitTwo (events.js:106:13)
    at Server.emit (events.js:191:7)
    at HTTPParser.parserOnIncoming [as onIncoming] (_http_server.js:546:12)
    at HTTPParser.parserOnHeadersComplete (_http_common.js:99:23)

he probado tanto con

// recomendado en el video
"react-router": "^4.0.0-alpha.6"

// instalado con npm i -S react-router@next
"react-router": "^4.0.0-beta.6"

acá la mi server.js

import http from 'http';
import React from 'react';
import { renderToString } from 'react-dom/server'
import { ServerRouter, createServerRenderContext } from 'react-router'

import Pages from './pages/containers/Pages.jsx'

function requestHandler(request, response){
  const context = createServerRenderContext()
  let html = renderToString(
    <ServerRouter location={request.url} context={context}>
      <Pages />
    </ServerRouter>
  )

  const result = context.getResult();

  response.setHeader('Content-Type', 'text/html');

  if (result.redirect) {
    response.writeHead(301, {
      Location: result.redirect.pathname,
    });
  }

  if (result.missed) {
    response.writeHead(404);

    html = renderToString(
      <ServerRouter location={request.url} context={context}>
        <Pages />
      </ServerRouter>
    );
  }

  response.write(html);
  response.end();
}

const server = http.createServer(requestHandler);

server.listen(3000);

Sergio Daniel Xalambrí

student•

Revisa la versión de React Router que está en el package.json del proyecto en el sistema de archivos (arriba en el tab Archivos), en la última versión cambiaron cosas del API, te recomiendo seguir con la misma versión del curso y al final del curso vas a encontrar un material de texto explicando como actualizar desde la versión del curso a la nueva mostrando donde realizar todos los cambios necesarios.

La versión usada en el curso es react-router@4.0.0-alpha.5

José Alejandro Muñoz Ruiz

student•

sergiodxa.
Baje el proyecto completo que esta en la pestaña archivos. Ahi ya viene con los modulos instalados (node_modules) y con el server ya construido (build/server/index.js) si lo corres tal cual Funciona a la perfección. Pero si a eso le borras los modules y el index.js, corres npm install para que instale todas las dependencias de package.json y corres webpack. da el mimos error comentado anteriormente.
Aun cuando nos recomiendas seguir los archivos y versiones con las que se hizo la clave, la verdad que no correo. Que puede ser ?
Puedes hacer la prueba que te comento y verificar?

Saludos.

node built/server/index.js
/Users/josemunoz/Downloads/proyecto/built/server/index.js:68
	  const context = (0, _reactRouter.createServerRenderContext)();
	                                                             ^

TypeError: (0 , _reactRouter.createServerRenderContext) is not a function
    at Server.requestHandler (/Users/josemunoz/Downloads/proyecto/built/server/index.js:68:63)
    at emitTwo (events.js:106:13)
    at Server.emit (events.js:191:7)
    at HTTPParser.parserOnIncoming [as onIncoming] (_http_server.js:546:12)
    at HTTPParser.parserOnHeadersComplete (_http_common.js:99:23)

Néstor Fabián Gonzalez

student•

Esta es la versión de las librerías en mi archivo manifiesto.
“dependencies”: {
“react”: “^15.4.1”,
“react-dom”: “^15.4.1”,
“react-router”: “^4.0.0-alpha.5”
},
“devDependencies”: {
“babel-core”: “^6.20.0”,
“babel-loader”: “^6.2.9”,
“babel-preset-latest-minimal”: “^1.1.2”,
“babel-preset-react”: “^6.16.0”,
“json-loader”: “^0.5.4”,
“webpack”: “^1.14.0”
}

David Flores Medrano

student•

Hola, estuve actualizando de acuerdo al artículo que pusiste de "Actualizando a la última versión de React Router "
Pero me sale un error en consola y al parece es de esta parte del codigo… Atom creo que me esta señalando que tienes un error…

Sergio Daniel Xalambrí

student•

Faltan espacios en un montón de partes del código.

`ReactDOM.render((
  <Router history={browserHistory}>
    <Route path="/" component={Base}>
      <IndexRoute component={ImageContainer} />
      <Route path="/new" component={ImageForm} />
    </Route>
  </Router>
), document.getElementsByClassName('react-app')[0])````

PS C:\Users\afeli\Documents\Projects\React Redux> node built/server/index.js
C:\Users\afeli\Documents\Projects\React Redux\built\server\index.js:68
          const context = (0, _reactRouter.createServerRenderContext)();
                                                                     ^

TypeError: (0 , _reactRouter.createServerRenderContext) is not a function
    at Server.requestHandler (C:\Users\afeli\Documents\Projects\React Redux\built\server\index.js:68:63)
    at emitTwo (events.js:106:13)
    at Server.emit (events.js:191:7)
    at HTTPParser.parserOnIncoming [as onIncoming] (_http_server.js:546:12)
    at HTTPParser.parserOnHeadersComplete (_http_common.js:99:23)
PS C:\Users\afeli\Documents\Projects\React Redux>

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in.
/Users/albertpedrola/Desktop/posts-list-in-react/build/server/index.js:124
    throw error;
    ^

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in.
    at invariant (/Users/albertpedrola/Desktop/posts-list-in-react/build/server/index.js:117:15)
    at ReactCompositeComponentWrapper.instantiateReactComponent [as _instantiateReactComponent] (/Users/albertpedrola/Desktop/posts-list-in-react/build/server/index.js:8764:55)
    at ReactCompositeComponentWrapper.performInitialMount (/Users/albertpedrola/Desktop/posts-list-in-react/build/server/index.js:14033:22)
    at ReactCompositeComponentWrapper.mountComponent (/Users/albertpedrola/Desktop/posts-list-in-react/build/server/index.js:13924:21)
    at Object.mountComponent (/Users/albertpedrola/Desktop/posts-list-in-react/build/server/index.js:3242:35)
    at ReactCompositeComponentWrapper.performInitialMount (/Users/albertpedrola/Desktop/posts-list-in-react/build/server/index.js:14037:34)
    at ReactCompositeComponentWrapper.mountComponent (/Users/albertpedrola/Desktop/posts-list-in-react/build/server/index.js:13924:21)
    at Object.mountComponent (/Users/albertpedrola/Desktop/posts-list-in-react/build/server/index.js:3242:35)
    at /Users/albertpedrola/Desktop/posts-list-in-react/build/server/index.js:18715:36
    at ReactServerRenderingTransaction.perform (/Users/albertpedrola/Desktop/posts-list-in-react/build/server/index.js:3710:20)

Server listening at port: 3000

/home/guillermo/Desktop/workspace/platzi/react-course/react-project/build/server/index.js:10595
    Provider,
    ^
ReferenceError: Provider is not defined
    at Server.requestHandler (/home/guillermo/Desktop/workspace/platzi/react-course/react-project/build/server/index.js:10595:5)
    at emitTwo (events.js:125:13)
    at Server.emit (events.js:213:7)
    at parserOnIncoming (_http_server.js:602:12)
    at HTTPParser.parserOnHeadersComplete (_http_common.js:116:23)
error Command failed with exit code 1.

import http from 'http';
import React from 'react';
import { renderToString } from 'react-dom/server';
import { StaticRouter  } from 'react-router-dom';

import Pages from './pages/containers/Page.jsx';


function requestHandler(request, response) {
	const context = {};
	let html = renderToString(<StaticRouter location={request.url} context={context}>
			<Pages />
		</StaticRouter>
		);
	
		response.setHeader('Content-Type', 'text/html');

		if (context.url) {
			response.writeHead(301, {
				Location: context.url,
			});
		response.end();
		}

		response.write(html);
		response.end();

}

const server = http.createServer(requestHandler);

server.listen(3000);

import React from 'react';
import {
	Route, 
	Switch,
} from 'react-router-dom';

import Home from './Home.jsx';
import About from './About.jsx';
import Error404 from './Error404.jsx';

function Pages() {
	return (
		<main role="application">
			<Switch>
			<Route
				path="/"
				exact
				component={Home}
			/>
			<Route
				path="/about"
				exact
				component={About}
			/>
			<Route component={Error404} />
			</Switch>
		</main>
	)
}

export default Pages;

import React, { Component } from 'react';
import { Link } from 'react-router-dom';

class Home extends Component {
	render() {
		return (
		<section name="Home">
			<h1>Home</h1>
			<Link to="/about">
			Go to about
			</Link>
		</section>
		);
	}
}

export default Home;

import React from 'react';
import {
  Route,
  Switch,
} from 'react-router-dom';

import Home from './Home.jsx';
import About from './About.jsx';
import Error404 from './Error404.jsx'

function Pages() {
  return (
    <main role="application">

      <Switch>
        {/* Home */}
        <Route
          path="/"
          exact
          component={Home}
        />
        {/* About */}
        <Route
          path="/about"
          exact
          component={About}
        />
        {/* Page 404 */}
        <Route component={Error404} />
      </Switch>
    </main>
  )

}

export default Pages;

import http from 'http';
import React from 'react';
import { renderToString } from 'react-dom/server';
import { StaticRouter } from 'react-router-dom';
import Pages from './pages/containers/Pages.jsx'

function  requestHandler(request, response) {
  const context = {};

  let html = renderToString(
    <StaticRouter location={request.url} context={context}>
      <Pages />
    </StaticRouter>
  );

  response.setHeader('Content-type', 'text/html');
  
  if(context.url) {
    response.writeHead(301, {
      Location: context.url,
    });
    response.end();
  }

  response.write(html);
  response.end();

}

const server = http.createServer(requestHandler);

server.listen(8080);

const context = (0, _reactRouter.createServerRenderContext)();
                                                             ^

TypeError: (0 , _reactRouter.createServerRenderContext) is not a function
    at Server.requestHandler (/Users/josemunoz/Documents/Code/proyecto-react/built/server/index.js:22621:62)
    at emitTwo (events.js:106:13)
    at Server.emit (events.js:191:7)
    at HTTPParser.parserOnIncoming [as onIncoming] (_http_server.js:546:12)
    at HTTPParser.parserOnHeadersComplete (_http_common.js:99:23)

import http from 'http';
import React from 'react';
import { renderToString } from 'react-dom/server'
import { ServerRouter, createServerRenderContext } from 'react-router'

import Pages from './pages/containers/Pages.jsx'

function requestHandler(request, response){
  const context = createServerRenderContext()
  let html = renderToString(
    <ServerRouter location={request.url} context={context}>
      <Pages />
    </ServerRouter>
  )

  const result = context.getResult();

  response.setHeader('Content-Type', 'text/html');

  if (result.redirect) {
    response.writeHead(301, {
      Location: result.redirect.pathname,
    });
  }

  if (result.missed) {
    response.writeHead(404);

    html = renderToString(
      <ServerRouter location={request.url} context={context}>
        <Pages />
      </ServerRouter>
    );
  }

  response.write(html);
  response.end();
}

const server = http.createServer(requestHandler);

server.listen(3000);

node built/server/index.js
/Users/josemunoz/Downloads/proyecto/built/server/index.js:68
	  const context = (0, _reactRouter.createServerRenderContext)();
	                                                             ^

TypeError: (0 , _reactRouter.createServerRenderContext) is not a function
    at Server.requestHandler (/Users/josemunoz/Downloads/proyecto/built/server/index.js:68:63)
    at emitTwo (events.js:106:13)
    at Server.emit (events.js:191:7)
    at HTTPParser.parserOnIncoming [as onIncoming] (_http_server.js:546:12)
    at HTTPParser.parserOnHeadersComplete (_http_common.js:99:23)

Manejo de rutas en el servidor con React Router

Bienvenido al curso

Actualizaremos este curso pronto

Bienvenido al curso de React

Fundamentos

¿Qué es React?

Hola Mundo con React

¿Qué es y cómo funciona el Virtual DOM?

Introducción a JSX

Creación de componentes

Componentes Puros vs de Estado

Ciclo de vida de un componente

Ciclo de vida de componentes

Manejo de eventos del DOM

Event handlers con parámetros personalizados

Contexto de la aplicación

Componentes de Alto Orden (HOC) y Mixins

Creación del proyecto

Presentación del proyecto

Instalación de Node.js y usando npm

Estructura de archivos

Iniciar un servidor de render básico - Render en Server

Module bundlers en JavaScript

Configurar Webpack para el servidor de render

Crear una app con React y React Router

Manejo de rutas en el servidor con React Router

Crear cliente para consumir el API

Iniciar la app en el navegador y configurar Webpack para producción

Iniciar un servidor de estáticos con zeit/list

Herramientas de desarrollo de React

Consumir el API y mostrar datos en la home

Perfil de usuarios

Estado de cargando y detalle de post

Paginación de posts mediante scroll infinito

Mostrar listado de comentarios en cada post

Estilizar componentes con CSS Modules

Linter y buenas prácticas con ESLint

Internacionalización con React Intl

Deploy a producción

Implementación de Redux

Patrones de arquitectura de aplicaciones Frontend

Implementación inicial con Redux para los posts

Uso de middlewares

Acciones asíncronas

Dividir el reducer en funciones más pequeñas y combinarlas

Datos inmutables con Immutable.js

Herramientas de desarrollo

Conclusiones

Pruebas automatizadas de reducers

Pruebas de componentes de React

Actualizando a la última versión de React Router

Desafíos

Cambiar el título de la página dependiendo de la ruta (en el servidor y cliente)

Implementar Redux en perfíl de usuario y detalle de un post

Cargar datos iniciales en el servidor

Desafío especial

Contenido bonus

Glosario

Evitar que webpack genere el CSS durante el build del servidor

LazyLoad de imágenes

Animaciones con ReactCSSTransitionGroup

Server render con Next.js

Aplicaciones universales/isomórficas

Iniciar proyectos con create-react-app

Diplomado de desarrollo de aplicaciones con ReactJS