Share
Este tutorial lo guiará a través del uso de los módulos de enrutador de reacción y grupo de transición de reacción para crear aplicaciones React de varias páginas con animaciones de transición de página..
Si alguna vez has tenido la oportunidad de probar React, probablemente hayas oído hablar del crear-reaccionar-aplicación paquete, que hace que sea muy fácil comenzar con un entorno de desarrollo React.
En este tutorial, usaremos este paquete para iniciar nuestra aplicación React..
Entonces, en primer lugar, asegúrese de tener Node.js instalado en su computadora. También instalará npm para ti.
En tu terminal, corre npm install -g create-react-app. Esto se instalará globalmente crear-reaccionar-aplicación en tu ordenador.
Una vez hecho esto, puede verificar si está allí escribiendo crear-reaccionar-app -V.
Ahora es el momento de construir nuestro proyecto React. Solo corre crear-reaccionar-aplicación multi-página-aplicación. Usted puede, por supuesto, reemplazar aplicación de varias páginas con lo que quieras.
Ahora, crear-reaccionar-aplicación creará una carpeta llamada aplicación de varias páginas. Sólo tipo cd multi-page-app para cambiar el directorio, y ahora ejecuta npm start para inicializar un servidor local.
Eso es todo. Tiene una aplicación React ejecutándose en su servidor local.
Ahora es el momento de limpiar los archivos predeterminados y preparar nuestra aplicación.
En tus src carpeta, borrar todo pero App.js y index.js. Luego abrir index.js y reemplaza el contenido con el siguiente código.
importar reaccionar desde 'reaccionar'; importar ReactDOM desde 'react-dom'; Importar aplicación desde './App'; ReactDOM.render (, document.getElementById ('root'));
Básicamente eliminé el registroServicioTrabajador líneas relacionadas y también la importar './index.css'; línea.
Además, reemplace su App.js archivo con el código de abajo.
importar React, Componente desde 'reaccionar'; la aplicación de clase extiende el Componente render () return (); exportar la aplicación por defecto;
Ahora instalaremos los módulos necesarios..
En su terminal, escriba los siguientes comandos para instalar el enrutador de reacción y grupo de transición reactiva módulos respectivamente.
npm install react-router-dom --save
npm install [email protected] --save
Después de instalar los paquetes, puede comprobar la paquete.json archivo dentro de su directorio principal del proyecto para verificar que los módulos están incluidos en dependencias.
Hay básicamente dos opciones de enrutador diferentes: HashRouter y BrowserRouter.
Como su nombre indica, HashRouter utiliza hashes para realizar un seguimiento de sus enlaces, y es adecuado para servidores estáticos. Por otro lado, si tiene un servidor dinámico, es una mejor opción para usar BrowserRouter, Teniendo en cuenta el hecho de que tus URL serán más bonitas.
Una vez que decida cuál debe usar, simplemente continúe y agregue el componente a su index.js expediente.
importar HashRouter desde 'react-router-dom'
Lo siguiente es envolver nuestro
Así que tu final index.js el archivo debería verse así:
importar reaccionar desde 'reaccionar'; importar ReactDOM desde 'react-dom'; importar HashRouter desde la aplicación de importación 'react-router-dom' desde './App'; ReactDOM.render (, document.getElementById ('root'));
Si está utilizando un servidor dinámico y prefiere usar BrowserRouter, La única diferencia sería importar el BrowserRouter y usándolo para envolver el
Envolviendo nuestro
Dentro de nuestro y
Crea una carpeta llamada "componentes" en tus src directorio, y luego crear el Menu.js y Content.js archivos.
Vamos a completar nuestro Menu.js componente.
Será un componente funcional sin estado ya que no necesitamos estados ni ganchos de ciclo de vida.
importar Reaccionar desde 'reaccionar' const Menu = () => return (
Aquí tenemos un Etiquetas, que serán nuestros enlaces..
Ahora agregue la siguiente línea a su Menú componente.
importar enlace desde 'reaccion-router-dom'
Y luego envolver el contenido de la etiquetas con el componente.
los componente es esencialmente un enrutador de reacción componente actuando como un etiqueta, pero no vuelve a cargar su página con un nuevo enlace de destino.
Además, si tu estilo una etiqueta en CSS, te darás cuenta de que la componente obtiene el mismo estilo.
Tenga en cuenta que hay una versión más avanzada de la componente, que es
Ahora necesitamos definir dónde navegará cada enlace. Para este propósito, la componente tiene un a apuntalar.
importar Reaccionar desde 'reaccionar' importar Enlace desde 'reaccion-router-dom' const Menu = () => return (
Dentro de nuestro
Necesitamos el Cambiar y Ruta componentes de reaccionar-enrutador-dom. Así que, en primer lugar, importalos.
importar Switch, Route desde 'react-router-dom'
En segundo lugar, importe los componentes que queremos enrutar. Estos son los Casa, Trabajos y Acerca de Componentes para nuestro ejemplo. Suponiendo que ya ha creado esos componentes dentro de la componentes carpeta, también tenemos que importarlos.
Importar Inicio desde './Home'
Importar trabajos desde './Works'
importar desde './Acerca de'
Esos componentes pueden ser cualquier cosa. Los definí como componentes funcionales sin estado con un contenido mínimo. A continuación se muestra una plantilla de ejemplo. Puede usar esto para los tres componentes, pero no olvide cambiar los nombres en consecuencia.
importar Reaccionar desde 'reaccionar' const Inicio = () => return (Casa) exportar por defecto Inicio
Usamos el
Las rutas son componentes que llaman a su componente de destino si coincide con el camino apuntalar.
La versión final de nuestro Content.js archivo se ve así:
importar Reaccionar desde 'reaccionar' importar Cambiar, Ruta desde 'reaccion-router-dom' importar Inicio desde './Home' importar Funciona desde './Works' importar Acerca de './About' const Contenido = () = > return () exportar contenido predeterminado
Tenga en cuenta que el extra exacto se requiere apoyo para el Casa componente, que es el directorio principal. Utilizando exacto obliga al Ruta para que coincida con la ruta de acceso exacta. Si no se usa, otras rutas que comienzan con / también sería igualado por el Casa componente, y para cada enlace, solo mostraría el Casa componente.
Ahora, cuando hace clic en los enlaces del menú, su aplicación debería cambiar el contenido..
Hasta ahora, tenemos un sistema de enrutador en funcionamiento. Ahora vamos a animar las transiciones de ruta. Para lograr esto, utilizaremos el grupo de transición reactiva módulo.
Estaremos animando el montaje Estado de cada componente. Cuando encamina diferentes componentes con el Ruta componente interior Cambiar, eres esencialmente montaje y desmontar diferentes componentes en consecuencia.
Usaremos grupo de transición reactiva En cada componente queremos animar. Así que puedes tener una animación de montaje diferente para cada componente. Solo usaré una animación para todos ellos..
Como ejemplo, usemos el
Primero, necesitamos importar. CSSTransitionGroup.
importar CSSTransitionGroup desde 'react-transition-group'
Entonces necesitas envolver tu contenido con él.
Ya que estamos tratando con el estado de montaje del componente, habilitamos transiciónAparecer y establecer un tiempo de espera para ello. También deshabilitamos transiciónEntrar y transición dejar, ya que estos solo son validos una vez que el componente esta montado. Si planea animar a algún elemento secundario del componente, debe utilizarlos..
Por último, añadir el específico. nombre de transición Para que podamos referirnos dentro del archivo CSS..
importar Reaccionar desde 'reaccionar' importar CSSTransitionGroup desde 'reaccionar transition-group' importar '... /styles/homeStyle.css' const Home = () => return () exportar por defecto Inicio Casa
También importamos un archivo CSS, donde definimos las transiciones CSS..
.homeTransition-aparecen opacidad: 0; .homeTransition-seem.homeTransition-aparecen-activo opacity: 1; transición: todas las .5s de facilidad de entrada;
Si actualiza la página, debería ver el efecto de fundido de la Casa componente.
Si aplica el mismo procedimiento a todos los demás componentes enrutados, verá sus animaciones individuales cuando cambie el contenido con su Menú.
En este tutorial, cubrimos la reaccionar-enrutador-dom y grupo de transición reactiva módulos Sin embargo, hay más en ambos módulos de lo que cubrimos en este tutorial. Aquí hay un demo de trabajo de lo que estaba cubierto.
Entonces, para obtener más información sobre las funciones, siempre revise la documentación de los módulos que está utilizando..
En los últimos años, React ha crecido en popularidad. De hecho, tenemos una serie de artículos en el mercado que están disponibles para su compra, revisión, implementación, etc. Si busca recursos adicionales en React, no dude en consultarlos..
Accentsconagua