DEV Community

Douglas Lovera for Somos Devs

Posted on

Sistema de Star rating en ReactJS con FontAwesome

Al trabajar con React, eventualmente podemos encontrarnos con la necesidad de hacer un sistema de ranking con estrellas, ya sea que quieras usarlo para e-commerce, alguna tienda o algún sistema de calificación.

En un futuro blog enseñaré cómo aplicarlo a un proyecto más real con datos del backend para simular un sistema de rating real.

Recursos

Resultado

Al proyecto de Codesandbox le agregué un input para que puedas modificar el rating a tu gusto desde el 0 al 5 incluyendo decimales.

Explicación

1. create-react-app

Primero tenemos que crear la aplicación con npx create-react-app <Proyecto>. Luego elimina los archivos innecesarios.

2. Creación del componente y estructura

Dentro de src/, crea una carpeta donde estará el sistema de estrellas, en mi caso lo llamaré StarRating/, adentro agrega un index.js y styles.css.

El src/ quedaría de esta manera:

src
│
└───StarRating
│   │   index.js
│   │   styles.css
│   
└───App.js
│   
└───index.js
│   
└───styles.css
Enter fullscreen mode Exit fullscreen mode

3. App.js

Al principio del archivo App.js importamos el componente que ya creamos import StarRating from "./StarRating".

Y dentro del return lo pondré de la siguiente forma:

<div className="App">
    <h1>Star Rating</h1>    
    <StarRating stars="3.5" />
</div>
Enter fullscreen mode Exit fullscreen mode

4. Estilos de las estrellas

Antes de la funcionalidad, tenemos que estilizar las estrellas. Para eso importaremos FontAwesome a través de su CDN, y usaremos el ícono de estrella a partir de su id unicode (f005).

Crearemos dos clases, una representa las estrellas vacías y la otra las estrellas amarillas:

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css");

.stars-gray {
    position: relative;
    display: inline-block;
}

.stars-yellow {
    position: absolute;
    top: 0;
    left: 0;
    white-space: nowrap;
    overflow: hidden;
    width: 0;
}

.stars-gray::before {
    content: "\\f005 \\f005 \\f005 \\f005 \\f005";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #ccc;
}

.stars-yellow::before {
    content: "\\f005 \\f005 \\f005 \\f005 \\f005";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #f8ce0b;
}
Enter fullscreen mode Exit fullscreen mode

5. Estructura del StarRating

Con todo esto hecho, podemos empezar a hacer la estructura y funcionalidad.

Importamos los estilos y creamos la función del componente.

import './styles.css'

export default function StarRating({ stars }) {
// Código
}
Enter fullscreen mode Exit fullscreen mode

6. Contenido del StarRating

Voy a explicar el siguiente código con comentarios, ahí estará todo:

// Máxima cantidad de estrellas
const maxStars = 5;

// Obtenemos el valor completo
const starPercentage = (stars / maxStars) * 100;

// Redondeamos el resultado si es decimal
const starPercentageRounded = Math.round(starPercentage);

// Creamos el estilo para que las estrellas amarillas
// se vean según el número que recibimos.
const StarStyles = () => {
    return {
        width: starPercentageRounded + "%"
    };
};


return (
    <div className="stars-gray">
        <div className="stars-yellow" style={StarStyles()}></div>
    </div>
);
Enter fullscreen mode Exit fullscreen mode

Resultado final

Así te debería quedar el resultado:
![[star_rating.png]]

Final

Recuerda que crearemos un post en el futuro para simular un ejemplo más real donde podamos crear las estrellas a partir de datos del backend

Si te gustó este blog, recuerda dar like y save y seguirnos en nuestro perfil de DEV Community.

Instagram

¡Muchas gracias por leer!

Top comments (0)