En este artículo, aprenderemos cómo mostrar simplemente la hora actual en nuestra aplicación ReactJs. Usaremos el método Date(). Crearemos un nuevo objeto con Date(), que viene junto con algunos métodos predefinidos como getMonth() que muestra el mes, getHour() muestra la hora actual, getTime() que muestra en milisegundos el tiempo calculado desde 1970 en caso de getTime() y hay muchos más.
Requisito previo: Introducción e instalación reaccionar
Creando la aplicación React:
Paso 1: cree la carpeta del proyecto de reacción, para eso abra la terminal y escriba el comando npm create-react-app nombre de la carpeta, si ya ha instalado create-react-app globalmente. Si no lo ha hecho, instale create-react -app globalmente usando el comando npm -g create-react-app o puede instalarlo localmente con npm i create-react-app .
npm create-react-app project
Paso 2: después de crear la carpeta de su proyecto (es decir, proyecto), muévase a ella usando el siguiente comando.
cd project
Estructura del archivo: Se verá así.
Ejemplo: en App.js vamos a crear un objeto de fecha, a partir del objeto de fecha obtenemos métodos predefinidos getHours(), getMinutes() y getSeconds() que indican la hora, los minutos y los segundos actuales.
App.js
function App() {
const date = new Date();
const showTime = date.getHours()
+ ':' + date.getMinutes()
+ ":" + date.getSeconds();
return (
<div className="App">
<h1 align="center">Current Time</h1>
<h2 align="center"> {showTime}</h2>
</div>
);
}
export default App;
Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto.
npm start
Producción:
El resultado muestra la hora exacta en la que se procesa el componente, aquí muestra 21 horas, 44 minutos y 43 segundos que logramos a través de date.getHours(), date.getMinutes() y date.getSeconds() respectivamente, donde la fecha es el objeto que hemos creado.
Referencia: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date