Last active
November 25, 2016 02:28
-
-
Save sergiodxa/66baea2082a03edef17b to your computer and use it in GitHub Desktop.
Usando react-engine con react-router para el ruteo.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import express from 'express'; | |
import engine from 'react-engine'; | |
import path from 'path'; | |
const app = express(); | |
// acá indicamos la ubicación de nuestro archivo con las rutas | |
app.engine('.jsx', engine.server.create({ | |
reactRoutes: path.join(__dirname, 'routes.jsx') | |
})); | |
app.set('views', path.join(__dirname, 'views')); | |
app.set('view engine', 'jsx'); | |
app.set('view', engine.expressView); | |
// definimos nuestra ruta en el servidor, al pasar req.url como primer | |
// parámetro de res.render react-engine usa react-route para | |
// renderizar la ruta que corresponda, como segundo parámetro podríamos | |
// pasar un objeto con los datos (props) que queramos pasar a nuestra vista. | |
app.get('/', (req, res) => { | |
res.render(req.url, { | |
title: 'Titulo' | |
}); | |
}); | |
app.listen(3000); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
import Router from 'react-router'; | |
// componentes | |
import App from './views/app'; | |
import Home from './views/home'; | |
// configuramos nuestras rutas | |
const routes = ( | |
<Router.Route path='/' handler={ App }> | |
<Router.DefaultRoute name='home' handler={ Home } /> | |
</Router.Route> | |
); | |
export default routes; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// importamos nuestro archivo de rutas | |
import routes from './routes.jsx'; | |
// importamos la librería para el navegador de react-engine | |
import Client from 'react-engine/lib/client'; | |
// por último una vez es listo el DOM iniciamos nuestra aplicación en el navegador | |
// usando react-engine el cual va a usar react-routes para las rutas en el navegador | |
document.addEventListener('DOMContentLoaded', function onLoad() { | |
// iniciamos el cliente de react-engine pasandole como parámetro un objeto con | |
// una propiedad routes igual a las rutas que cargamos de nuestro archivo de rutas | |
Client.boot({ routes }); | |
}); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
import Layout from './layout.jsx'; | |
import { RouteHandler } from 'react-router'; | |
const App = React.createClass({ | |
render() { | |
return ( | |
<Layout { ...this.props }> | |
<main role="application" className="App" id="app"> | |
{/* Esta es la parte más importante, acá react-router va inicilizarse | |
y a cargar las vistas de cada ruta */} | |
<Router.RouteHandler { ...this.props } /> | |
</main> | |
</Layout> | |
); | |
} | |
}); | |
export default App; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import Header from '../components/header.jsx'; | |
import React from 'react'; | |
import { Link } from 'react-router'; | |
const Home = React.createClass({ | |
render() { | |
return ( | |
<header> | |
<h1>{ this.props.title }</h1> | |
{/* este link es para que react-router funcione como una SPA */} | |
<Link to="home">Home</Link> | |
</header> | |
); | |
} | |
}); | |
export default Home; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment