如何在 ReactJS 中添加模拟时钟？

在本文中，我们将学习如何在 ReactJs 中添加模拟时钟。 React 是一个免费的开源前端 JavaScript 库，用于构建用户界面或 UI 组件。它由 Facebook 和一个由个人开发者和公司组成的社区维护。

方法：要添加我们的模拟时钟，我们将使用模拟时钟反应包，因为它功能强大、轻量级且完全可定制。之后，我们将使用已安装的软件包在我们的主页上添加我们的时钟。

创建 ReactJs 应用程序：您可以使用以下命令创建一个新的 ReactJs 项目：

npx create-react-app gfg

安装所需的包：现在我们将使用以下命令安装模拟时钟反应包：

npm i analog-clock-react

项目结构：它看起来像这样。

添加时钟：在这个例子中，我们将使用我们安装的包在应用程序的主页上添加时钟。为此，在 App.js 文件中添加以下内容。

App.js

import AnalogClock from 'analog-clock-react';
   
export default function ReactClock() {
  let options = {
    width: "300px",
    border: true,
    borderColor: "#2e2e2e",
    baseColor: "#17a2b8",
    centerColor: "#459cff",
    centerBorderColor: "#ffffff",
    handColors: {
      second: "#d81c7a",
      minute: "#ffffff",
      hour: "#ffffff"
    }
  };
   
  return (
    

      
React Clock - GeeksforGeeks
      
    
  )
}

说明：在上面的例子中，我们首先从模拟时钟反应包中导入模拟时钟组件。之后，我们将创建一个选项变量并将设置存储在此变量中。然后我们使用我们的 AnalogClock 组件来显示时钟。

运行应用程序的步骤：在终端中运行以下命令来运行应用程序。

npm start

输出：