Aprender a programar, al igual que cualquier otra actividad a la que nos enfrentamos por primera vez, puede ser un proceso largo y complejo. Sin embargo, cuando lo hacemos mezclando la teoría con la práctica, este proceso avanza mucho más rápido. Por ello, te recomendamos que sigas leyendo. En este post, te enseñaremos cómo crear un counter en React, un ejemplo práctico que te ayudará a afianzar tus conocimientos de esta librería JavaScript.
Conceptos antes de comenzar
En nuestros posts sobre crear un reloj en React y crear un reloj con botón en React has podido aprender cómo usar una mezcla del código JavaScript y el código HTML para crear este tipo de objetos. Además, en el proceso hemos utilizado los componentes y los estados de React. Estos dos conceptos serán de utilidad ahora que vamos a crear un counter en React. Por ello, te hacemos un breve repaso.
Un componente en React es una función que nos permite manipular el objeto de propiedades props. Es decir, este tipo de función utiliza props como parámetro para manipular alguna de las propiedades insertadas dentro de su objeto. Si un objeto props solo tiene una propiedad, podemos insertarla directamente. Para conocer más sobre este elemento, te invitamos a leer nuestro post sobre los componentes en React.
Un estado en React es el segundo tipo de dato que acepta esta librería JavaScript. Mientras los datos del objeto props son estáticos, los datos de un estado son dinámicos. Es decir, con un estado podemos definir un dato que se modifica a lo largo del tiempo. Te invitamos a leer nuestro post sobre estado en React para conocer más sobre el tema.
¿Cómo crear un counter en React?
Para crear un counter en React, utilizaremos el mismo componente de tipo función Clock que hemos usado en anteriores posts. Entonces, la diferencia se encontrará en el estado que implementemos. A continuación, te mostramos las líneas de código que tenemos en este momento, creadas para el reloj de botón:
<html>
<script type = «text/babel»>
const rootEllement = document.getElementById (‘root’);
const Clock = () => {
const [now, setNow] = React.useState (new Date ().toLocaleTimeString ());
return (
<div className = «container»>span className = «clock»>{now}</span>button
onClick = { () => {
setNow (new Date ().toLocaleTimeString());
}}
>
Give me the time
</button>
</div>
);
El primer paso para crear un counter en React es crear un estado. En React, podemos insertar el número de estados que queramos dentro de un componente. Entonces, crearemos un nuevo estado para nuestro counter dentro del componente anterior Clock. Para ello, crearemos una constante con las variables count y setCount. En esta constante, llamaremos a una función React.useState que inicializaremos con el valor 0:
const [count, setCount] = React.useState (0);
Después de insertar este estado, crearemos un elemento div o span para poner el valor de la variable count. Si quieres crear un counter en React que esté en una línea separada en tu pantalla, te recomendamos insertar un elemento p en vez de un elemento div o span.
Dentro de este elemento p, podemos insertar una función onClick que llame a setCount. En esta función podemos definir que, cada vez que pinchamos sobre el objeto count, sumemos una unidad al valor actual de count. Recuerda que, como lo hemos definido en React.useState, el valor inicial de count es de 0. A continuación, te presentamos las líneas de código del elemento p que hemos descrito:
<p
onClick = {() => {
setCount (count + 1);
}}
>
{count}
</p>
Con las líneas anteriores, React provocará un nuevo render cada vez que pinchamos sobre el número count. Este nuevo render tendrá el nuevo valor de count. Así de fácil, hemos podido crear un counter en React.
Por último, te mostramos las líneas de código finales para crear este objeto:
<html>
<script type = «text/babel»>
const rootEllement = document.getElementById (‘root’);
const Clock = () => {
const [now, setNow] = React.useState (new Date ().toLocaleTimeString ());
const [count, setCount] = React.useState (0);
return (
<div className = «container»>span className = «clock»>{now}</span>button
onClick = { () => {
setNow (new Date ().toLocaleTimeString());
}}
>
Give me the time
</button>
<p
onClick = {() => {
setCount (count + 1);
}}
>
{count}
</p>
</div>
);
¿Quieres seguir aprendiendo?
Ahora que sabes cómo crear un counter en React, ¡puedes aplicar los conocimientos de esta creación en otros proyectos! Si quieres seguir aprendiendo con nosotros sobre las distintas técnicas y elementos de React, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un programa de formación intensiva donde, además de React, aprenderás a dominar lenguajes de programación para la web como JavaScript, CSS y HTML. ¿Te animas a seguir aprendiendo? ¡Te esperamos!
