Sistema de Star rating en ReactJS con FontAwesome
Tags: react, tutorial, learning, spanish
Published: 2021-03-29 18:30:24

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
* [FontAwesome](https://fontawesome.com/).
* [CSS propio](https://gist.github.com/doulovera/eb116f8b505cd6311418cc605df5dcee).

### 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.

{% codesandbox 1wc76 module=/src/App.js %}

### 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
```

#### 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:
```jsx
<div className="App">
	<h1>Star Rating</h1>	
	<StarRating stars="3.5" />
</div>
```

#### 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:
```css
@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;
}
```


#### 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.
```jsx
import './styles.css'

export default function StarRating({ stars }) {
// Código
}
```

#### 6. Contenido del StarRating
Voy a explicar el siguiente código con comentarios, ahí estará todo:
```jsx
// 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>
);
```

### 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](https://instagram.com/somos.devs)

¡Muchas gracias por leer!