Share
React es una biblioteca de JavaScript creada por Facebook para crear interfaces de usuario. Si eres nuevo en React, te recomendaría que leas uno de nuestros tutoriales anteriores para comenzar a utilizar React. En este tutorial, analizaremos cómo manejar el enrutamiento anidado en una aplicación web React.
Comenzaremos configurando nuestra aplicación web React. Vamos a crear una carpeta de proyecto llamada ReactRouting. Dentro ReactRouting, crear un archivo llamado app.html. abajo esta el app.html expediente:
TutsPlus - Reaccionar enrutamiento anidado
Dentro de ReactRouting carpeta, inicialice el proyecto utilizando Node Package Manager (npm).
npm init
Ingrese los detalles específicos del proyecto o presione Entrar por defecto, y deberías tener el paquete.json archivo dentro de la ReactRouting carpeta.
"name": "reactroutingapp", "version": "1.0.0", "description": "," main ":" app.js "," scripts ": " test ":" echo \ "Error : no se especificó la prueba \ "&& exit 1", "autor": "", "licencia": "ISC"
Instala el reaccionar y reaccionar dependencias usando npm.
npm instalar reaccionar reaccionar-dom --save
Instala el Babel paquete usando npm y guárdalo en el paquete.json expediente.
npm install --save-dev webpack-dev-server webpack babel-core babel-loader babel-preset-reaccion babel-preset-es2015
Babel Se requieren paquetes para transformar el código JSX en JavaScript. Cree un archivo de configuración de paquete web para manejar las configuraciones de paquete web. Aquí es cómo el webpack.config.js archivo se vería:
module.exports = entry: './app.js', output: filename: 'bundle.js',, module: loaders: [exclude: / node_modules /, loader: 'babel-loader? presets [ ] = es2015 y ajustes preestablecidos [] = reaccionar
app.js es el archivo donde residiría nuestro código React. Crear un archivo llamado app.js dentro de ReactRouting carpeta. Importar las bibliotecas de reacción requeridas en app.js. Crear un componente llamado Aplicación Tener un div con algún texto. Renderiza el componente utilizando el método de renderizado. Aquí es cómo el básico app.js archivo se vería:
importar Reaccionar desde 'reaccionar' importar render desde 'react-dom' const App = () => return ('TutsPlus - Bienvenido a la aplicación React Nested Routing'
); ; hacer((), document.getElementById ('app'))
Reiniciar el webpack servidor de desarrollo.
webpack-dev-server
Una vez que se haya reiniciado el servidor, debería poder ver la aplicación React ejecutándose en http: // localhost: 8080 /.
Estaremos haciendo uso de enrutador de reacción Implementar enrutamiento y enrutamiento anidado. Primero, instale enrutador de reacción en nuestro proyecto.
npm instalar reaccion-router --save
Ahora tenemos enrutador de reacción Instalado en nuestro proyecto. Vamos a crear un par de vistas para implementar el enrutamiento. Dentro de app.js archivo, crear dos componentes llamados vista1 y vista2. Aquí es cómo se vería el código:
const View1 = () => return ('Bienvenido a View1'
); ; const View2 = () => return ('Bienvenido a View2'
); ;
Crear un Menú componente para mostrar Vista1 y View2 al hacer clic. Aquí está cómo se ve:
Menú const = () => return ();
- 'Casa'
- 'View1'
- 'View2'
Usemos el enrutador de reacción para mostrar la ruta predeterminada para nuestra aplicación. Hacer el Menú componente de la ruta por defecto. También define la ruta para el Vista1 y View2 componentes Aquí está cómo se ve:
hacer(, document.getElementById ('app'));
Guarde los cambios anteriores y reinicie el webpack servidor. Debe mostrar el menú de navegación vertical en http: // localhost: 8080 / webpack-dev-server /.
Intenta hacer clic en el Vista1 y View2 enlaces, y debe navegar a los componentes apropiados.
Ya tenemos un Aplicación componente que muestra el texto del encabezado. Supongamos que queremos que el menú haga clic para mostrar la vista apropiada, pero queremos que se represente dentro de la Aplicación componente.
Queremos que el menú de navegación esté disponible en todas las páginas. Para lograr esto, trataremos de anidar nuestros componentes de reacción. Vista1 y View2 dentro de Aplicación componente. Así que siempre que Vista1 se renderiza, se muestra dentro de la Aplicación componente.
Ahora modifique la configuración del router y coloque el Vista1 y View2 configuración de ruta dentro de la Aplicación ruta componente.
hacer(, document.getElementById ('app'));
Modificar el Aplicación componente para anidar el Menú componente dentro de ella.
const App = () => return (); ;'TutsPlus - Bienvenido a la aplicación React Nested Routing'
Para renderizar las rutas anidadas dentro del Aplicación componente, vamos a añadir props.children al Aplicación componente. Aconteció en accesorios como argumento de la función a la Aplicación componente.
const App = (props) => return (); ;'TutsPlus - Bienvenido a la aplicación React Nested Routing'
props.children
También agreguemos uno Casa componente a nuestra aplicación.
const Home = () => return (); ;'Bienvenido a casa !!'
Incluir la Casa componente en la lista de rutas anidadas.
hacer(, document.getElementById ('app'));
Guarde los cambios anteriores y reinicie el servidor, y debería poder ver la aplicación. Haga clic en los elementos del menú que aparecen en la lista, y cada vez que se haga clic se anidará dentro Aplicación componente.
En este tutorial, vio cómo implementar el enrutamiento anidado en una aplicación React usando enrutador de reacción. Puede desarrollar pequeños componentes independientes y luego usar los componentes para crear aplicaciones más grandes. Hacer posible unir componentes pequeños en aplicaciones grandes es lo que hace que React sea realmente poderoso.
React se está convirtiendo en una de las plataformas de facto para trabajar en la web. No deja de tener sus curvas de aprendizaje, y también hay muchos recursos para mantenerlo ocupado. Si está buscando recursos adicionales para estudiar o usar en su trabajo, vea lo que tenemos disponible en el mercado de Envato.
El código fuente de este tutorial está disponible en GitHub. Háganos saber sus sugerencias y pensamientos en los comentarios a continuación..
Accentsconagua