Skip to content

Instantly share code, notes, and snippets.

@sergiodxa
Last active November 25, 2016 02:28
Show Gist options
  • Save sergiodxa/66baea2082a03edef17b to your computer and use it in GitHub Desktop.
Save sergiodxa/66baea2082a03edef17b to your computer and use it in GitHub Desktop.
Usando react-engine con react-router para el ruteo.
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);
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;
// 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 });
});
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;
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