7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. React

Como Manejar el Routing en React

Read Time: 4 mins

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).

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

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

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

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:

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

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

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.

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.

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.

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.

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

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.

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.

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

Guarda los cambios y reinicia el servidor webpack.

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.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.