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).
mkdir reactRoutingApp cd reactRoutingApp npm init
Instala las librerías react y react-dom requeridas en el proyecto.
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.
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.
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.
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.
const Navigation = () => {
return (
<section>
<App />
<ul>
<li>{'Home'}</li>
<li>{'Contact'}</li>
<li>{'About'}</li>
</ul>
</section>
);
};
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.
npm install react-router --save
Importa las librerías requeridas para react-router en app.js.
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.
const Navigation = () => {
return (
<section>
<App />
<ul>
<li>{'Home'}</li>
<li>
<Link to="/contact">{'Contact'}</Link>
</li>
<li>
<Link to="/about">{'About'}</Link>
</li>
</ul>
</section>
);
};
Guarda los cambios y reinicia el servidor webpack.
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.
