React Timekeeper 项目教程

React Timekeeper 项目教程

react-timekeeperGoogle Keep app inspired time picker for react :clock4:项目地址:https://gitcode.com/gh_mirrors/re/react-timekeeper

1. 项目的目录结构及介绍

React Timekeeper 项目的目录结构如下：

react-timekeeper/
├── dist/
│   ├── index.js
│   ├── index.js.map
│   ├── Timekeeper.js
│   └── Timekeeper.js.map
├── example/
│   ├── index.html
│   ├── index.js
│   ├── styles.css
│   └── webpack.config.js
├── src/
│   ├── components/
│   │   ├── ClockHand.js
│   │   ├── Timepicker.js
│   │   └── TimepickerDropdown.js
│   ├── index.js
│   ├── styles/
│   │   ├── _variables.scss
│   │   └── timekeeper.scss
│   └── utils/
│       ├── constants.js
│       ├── formatTime.js
│       └── getTimeParts.js
├── .babelrc
├── .gitignore
├── package.json
├── README.md
└── webpack.config.js

目录结构介绍

• dist/：编译后的文件，包含主要的 JavaScript 文件和映射文件。
• example/：示例项目的文件，包含 HTML、JavaScript、CSS 和 Webpack 配置文件。
• src/：源代码文件夹，包含组件、样式和工具函数。
  • components/：React 组件文件夹，包含时钟指针、时间选择器等组件。
  • styles/：样式文件夹，包含 SCSS 变量和主要样式文件。
  • utils/：工具函数文件夹，包含常量、时间格式化函数等。
• .babelrc：Babel 配置文件。
• .gitignore：Git 忽略文件配置。
• package.json：项目依赖和脚本配置。
• README.md：项目说明文档。
• webpack.config.js：Webpack 配置文件。

2. 项目的启动文件介绍

项目的启动文件是 example/index.js，该文件是示例项目的入口文件，用于启动和展示 React Timekeeper 组件。

import React from 'react';
import ReactDOM from 'react-dom';
import Timekeeper from 'react-timekeeper';

function App() {
  const [time, setTime] = React.useState('12:34pm');

  return (
    <div>
      <Timekeeper
        time={time}
        onChange={(newTime) => setTime(newTime.formatted)}
      />
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

启动文件介绍

• 导入 React 和 ReactDOM 库。
• 导入 react-timekeeper 组件。
• 定义 App 组件，使用 Timekeeper 组件并处理时间变化。
• 使用 ReactDOM.render 方法将 App 组件渲染到 DOM 中的 root 元素。

3. 项目的配置文件介绍

package.json

package.json 文件包含了项目的依赖、脚本和其他元数据。

{
  "name": "react-timekeeper",
  "version": "1.0.0",
  "description": "A React time picker",
  "main": "dist/index.js",
  "scripts": {
    "build": "webpack --config webpack.config.js",
    "start": "webpack-dev-server --config example/webpack.config.js --open"
  },
  "dependencies": {
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  },
  "devDependencies": {
    "@babel/core": "^7.10.2",
    "babel-loader": "^8.1.0",
    "css-loader": "^3.5.3",
    "style-loader": "^1.2.1",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.11.0"
  }
}

webpack.config.js

webpack.config.js

react-timekeeperGoogle Keep app inspired time picker for react :clock4:项目地址:https://gitcode.com/gh_mirrors/re/react-timekeeper