Como Manejar el Routing en React

Spanish (Español) translation by Marina Cardone (you can also view the original English article)

En uno de mis tutoriales anteriores, vimos como comenzar con React y JSX. En este tutorial, vamos a ver cómo empezar con la configuración y crear una app en React. Nos vamos a enfocar en como manejar el routing en una app de React utilizando react-router.

Comencemos

Vamos a comenzar iniciando nuestro proyecto utilizando el Node Package Manager (npm).

1	mkdir reactRoutingApp
2	cd reactRoutingApp
3	npm init

Instala las librerías react y react-dom requeridas en el proyecto.

1	npm install react react-dom --save

Vamos a utilizar el módulo de paquete webpack para este proyecto. Instala webpack y el server de desarrollo de webpack.

1	npm install webpack webpack-dev-server --save-dev

Haremos uso de Babel para convertir sintaxis JSX a JavaScript. Instala el siguiente paquete de babel en tu proyecto.

1	npm install --save-dev babel-core babel-loader babel-preset-react babel-preset-es2015

webpack-dev-server requiere un archivo de configuración en el que definiremos el archivo de entrada, el archivo de salida y el cargador de babel. Así es como se verá nuestro archivo webpack.config.js:

module.exports = {
    entry: './app.js',
    module: {
        loaders: [
            {
                exclude: /node_modules/,
                loader: 'babel-loader?presets[]=es2015&presets[]=react'
            }
        ]
    },
    output: {
        filename: 'bundle.js'
    }
};

A continuación vamos a crear app.html donde la aplicación de React se renderizará.

<html>
    <head>
        <title>TutsPlus - React Routing Basic</title>
    </head>
    <body>
        <div id="app"></div>
        <script src="bundle.js"></script>
    </body>
</html>

Vamos a crear el punto de entrada en el archivo app.js para nuestra aplicación de React.

import React from 'react';
import {render} from 'react-dom';

const App = () => {
    return (
        <h2>{'TutsPlus - Welcome to React Routing Basic!'}</h2>
    );
};

render(
    <App />,
    document.getElementById('app')
);

Como vimos en el código anterior, importamos react y react-dom. Creamos un componente sin estado llamado App que retorna un título. La función render renderiza el componente adentro de el elemento app en la página app.html.

Iniciemos el servidor webpack, y la aplicación debería estar corriendo y mostrando el mensaje del componente.

1	webpack-dev-server

Apunta tu browser a http://localhost:8080/app.html y tendrás la aplicación corriendo.

Creando Vistas de React

Ya tenemos la aplicación de React lista y corriendo. Empecemos por crear un par de vistas para nuestra aplicación de ruteo de React. Solo para mantenerlo simple, crearemos todos los componentes dentro del mismo archivo app.js

Vamos a crear un componente principal llamado navigation en app.js.

1	const Navigation = () => {
2	return (
3	<section>
4	<App />
5	<ul>
6	<li>{'Home'}</li>
7	<li>{'Contact'}</li>
8	<li>{'About'}</li>
9	</ul>
10	</section>
11	);
12	};

En el componente Navigation, tenemos el título de la aplicación y un menú de navegación recientemente creado para diferentes pantallas de la aplicación. El componente es bastante simple, con código HTML básico. Continuemos y creemos las pantallas para Contacto y Acerca de.

const About = () => {
    return (
        <section>
            <h2>{'Welcome to About!'}</h2>
        </section>
    );
};

const Contact = () => {
    return (
        <section>
            <h2>{'Welcome to Contact!'}</h2>
        </section>
    );
};

Recién creamos un componente para renderizar las pantallas de About y Contact.

Conectando las Vistas Utilizando react-router

Para poder conectar diferentes vistas haremos uso de react-router. Instala react-router utilizando npm.

1	npm install react-router --save

Importa las librerías requeridas para react-router en app.js.

1	import {Link, Route, Router} from 'react-router';

En lugar de especificar qué componente mostrar, definiremos diferentes rutas para nuestra aplicación. Para eso haremos uso de react-router.

Vamos a definir las rutas de las pantallas Home, Contact y About.

render(
    <Router>
        <Route
            component={Navigation}
            path="/"
        />
        <Route
            component={About}
            path="/about"
        />
        <Route
            component={Contact}
            path="/contact"
        />
    </Router>,
    document.getElementById('app')
);

Cuando el usuario visita la ruta /, el componente de Navigation se renderiza, cuando visita /about el componente About se renderiza, y /contact renderiza el componente Contact.

Modifica las pantallas About y Contact para incluir un link de regreso a la pantalla inicial. Para vincular pantallas, utilizamos Link, que funciona de manera similar a la etiqueta anchor de HTML.

const About = () => {
    return (
        <section>
            <h2>{'Welcome to About!'}</h2>
            <Link to="/">{'Back to Home'}</Link>
        </section>
    );
};

const Contact = () => {
    return (
        <section>
            <h2>{'Welcome to Contact!'}</h2>
            <Link to="/">{'Back to Home'}</Link>
        </section>
    );
};

Modifica el componente Navigation para incluir el link a las otras pantallas desde la pantalla inicial.

1	const Navigation = () => {
2	return (
3	<section>
4	<App />
5	<ul>
6	<li>{'Home'}</li>
7	<li>
8	<Link to="/contact">{'Contact'}</Link>
9	</li>
10	<li>
11	<Link to="/about">{'About'}</Link>
12	</li>
13	</ul>
14	</section>
15	);
16	};

Guarda los cambios y reinicia el servidor webpack.

1	webpack-dev-server

Apunta tu browser a http://localhost:8080/app.html, y deberías tener la aplicación corriendo con el routing básico implementado.

Cerrando

En este tutorial, vimos cómo comenzar creando una app de React y conectando diferentes componentes utilizando react-router. Aprendimos como definir diferentes rutas y vincularlas utilizando react-router.

Intentaste utilizar react-router o alguna otra librería de ruteo? Déjanos saber en los comentarios.

El código fuente para este tutorial está disponible en GitHub.