Al igual que con cualquier actividad común como lo sería aprender español o aprender a escalar, cuando nos enfrentamos a una nueva herramienta de programación, con una sintaxis y lógica novedosas, deberemos mezclar la teoría con la práctica. Si ya sabes un poco de React, pero ahora quieres entender cómo se usa, continúa leyendo. En este post, te enseñaremos cómo crear un reloj con botón en React para que puedas practicar tus conocimientos básicos.
Antes de empezar a crear un reloj con botón en React
En nuestro post sobre crear un reloj en React hemos aprendido cómo podemos utilizar el código JavaScript dentro de un documento HTML para crear un reloj muy precario. Este reloj lo hemos hecho a partir de una función tick y un método setInterval, líneas de código que, aunque complejas, funcionan gracias al Virtual DOM de React. Para aprender más sobre cómo esta herramienta simplifica las actualizaciones, te invitamos a leer nuestro post sobre cómo funciona el Virtual DOM de React.
Luego, en nuestro post sobre los estados en React, hemos empezado a transformar este código JavaScript en código React que simplifica el reloj. En este proceso, hemos reemplazado la función tick por el componente Clock, y la constante now por un estado. Estas líneas de código se ven de la siguiente manera:
<html>
<script type = "text/babel">
const rootElement =document.getElementById ('root')
const Clock = () => {
const [now, setNow] = React.useState (new Date ().toLocaleTimeString()
return
<div className = "container">
<span className = "clock"> {now} </span>
</div>
}
ReactDOM.render (<Clock/>, rootElement);
</script>
</html>En las líneas de código anteriores, tenemos un estado estático que guarda la hora actual. Ahora, lo que debemos hacer es crear una función con la que el estado now se modifique cada segundo. Para ello, vamos a imaginar que nuestro reloj es “de mirar”, es decir, que va a estar detenido todo el tiempo, pero cuando lo “miremos” nos dirá la hora actual. Para ello, a continuación, te enseñaremos cómo crear un reloj con botón en React.
¿Cómo crear un reloj con botón en React?
Lo primero que debemos hacer para crear un reloj con botón en React es, obviamente, crear un botón. Ya que React usa una sintaxis muy similar a HTML, podemos usar las etiquetas button para crear este elemento. Entonces, deberemos insertar la siguiente línea de código dentro de nuestro componente Clock:
<button> Give me the time </button>Ahora que hemos creado nuestro elemento botón, lo veremos pintado al lado de la hora. El siguiente paso para crear un reloj con botón en React es darle una función a este botón. En nuestro caso, esta función será que, cuando pinchemos el botón, veamos la hora actualizada. Una de las ventajas de React es que asociar una acción al clic de un botón es muy sencillo. Para ello, basta con utilizar la propiedad onClick en nuestro botón.
Para utilizar la propiedad onClick deberemos pasarle una función que defina la acción a ejecutar con pinchar el botón. Esta función definirá y manipulará un evento. En nuestro caso, el evento es que la función setNow de nuestro estado es la nueva hora. Entonces, en la propiedad onClick deberemos insertar nuestra función setNow y pasarle el valor que queremos almacenar, que es la hora actualizada. A continuación, puedes ver las líneas de código que crean este botón:
<button
onClick = {() => {
setNow (new Date ().toLocaleTimeString());
}
>
Give me the time
</button>Como puedes ver, el texto del botón es lo último que insertamos, pues va entre las etiquetas <button> y </button>, mientras que la propiedad onClick va dentro de la primera etiqueta. Este elemento se inserta dentro de nuestro código script, justo después del span className = “clock”. Las líneas de código finales quedaría así:
<html>
<script type = "text/babel">
const rootElement =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>
}
ReactDOM.render (<Clock/>, rootElement);
</script>
</html>Ahora que sabes cómo crear un reloj con botón en React, ¡es momento de empezar a jugar con más aplicaciones en esta herramienta! Para ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un programa teórico-práctico donde aprenderás a desarrollar proyectos con lenguajes como JavaScript, JSX, CSS y HTML. Así, te convertirás en un experto del desarrollo web en pocos meses y podrás abrirte paso en el mundo IT, un sector de alta empleabilidad. ¿A qué esperas para dar el siguiente paso en tu aprendizaje? ¡Matricúlate ya!
