En este artículo, vamos a aprender cómo podemos agregar cotizaciones de carga en NextJs. NextJS es un marco basado en React. Tiene el poder de desarrollar hermosas aplicaciones web para diferentes plataformas como Windows, Linux y Mac. La vinculación de rutas dinámicas ayuda a representar sus componentes NextJS de forma condicional.
Enfoque: para agregar cotizaciones de carga vamos a utilizar el paquete react-loader-quotes. El paquete react-loader-quotes nos ayuda a agregar cotizaciones de carga en cualquier parte de nuestra aplicación. Primero, instalaremos el paquete react-loader-quotes y luego agregaremos citas en nuestra página de inicio.
Crear aplicación NextJS: puede crear un nuevo proyecto NextJs usando el siguiente comando:
npx create-next-app gfg
Instale el paquete requerido: ahora instalaremos el paquete react-loader-quotes usando el siguiente comando:
npm i react-loader-quotes
Estructura del proyecto: Se verá así.
Agregar las comillas: podemos agregar fácilmente las comillas en nuestra aplicación después de instalar el paquete react-loader-quotes. Para este ejemplo, vamos a agregar citas a nuestra página de inicio.
Agregue el siguiente contenido en el archivo index.js :
Javascript
import React from "react";
import ReactLoaderQuotes from 'react-loader-quotes';
export default function MyQuotesSlider() {
return (
<div>
<h3>GeeksforGeeks Quotes</h3>
<ReactLoaderQuotes
loading={true}
quotes={[`GeeksforGeeks Quote 1`,
`GeeksforGeeks Quote 2`,
`GeeksforGeeks Quote 3`,
`GeeksforGeeks Quote 4`]}
/>
</div>
);
}
Explicación: en el ejemplo anterior primero, estamos importando el componente ReactLoaderQuotes del paquete instalado. Después de eso, agregaremos las comillas usando el parámetro de comillas de ReactLoaderQuotes.
Pasos para ejecutar la aplicación: Ejecute el siguiente comando en la terminal para ejecutar la aplicación.
npm run dev
Producción:
Publicación traducida automáticamente
Artículo escrito por imranalam21510 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA