En este artículo, vamos a aprender cómo podemos agregar Star Rating 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.
Enfoque: Para agregar nuestras calificaciones, vamos a usar el paquete react-stars. El paquete react-stars nos ayuda a integrar diferentes tipos de calificaciones. Primero, instalaremos el paquete react-stars y luego agregaremos calificaciones de estrellas 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-stars usando el siguiente comando:
npm i react-stars
Estructura del proyecto: Se verá así.
Agregar calificaciones de estrellas: después de instalar el paquete, podemos agregar fácilmente calificaciones en nuestra aplicación. Para este ejemplo, vamos a agregar calificaciones de estrellas a nuestra página de inicio.
index.js
import React from 'react';
import ReactStars from 'react-stars'
export default function SkeletonLoading(){
return (
<div>
<h2>NextJs Star Ratings - GeeksforGeeks</h2>
<ReactStars
count={5}
size={24}
color2={'#ffd700'} />
</div>
)
}
Explicación: en el ejemplo anterior primero, estamos importando nuestro componente ReactStars desde el paquete instalado. Después de eso, estamos usando el componente y configurando el conteo, el tamaño y el color. Luego estamos mostrando las clasificaciones de estrellas.
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