【亲测免费】 React-Dates 项目教程

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

React-Dates 项目的目录结构如下：

react-dates/
├── scripts/
│   └── buildCSS.js
├── src/
│   ├── components/
│   ├── css/
│   ├── defaultPhrases.js
│   ├── index.js
│   ├── initialize.js
│   ├── styles/
│   └── util/
├── .gitignore
├── .npmignore
├── .prettierrc
├── .travis.yml
├── CHANGELOG.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── package.json
└── webpack.config.js

目录介绍

• scripts/: 包含构建 CSS 文件的脚本。
• src/: 项目的源代码目录，包含组件、样式、工具函数等。
  • components/: 包含日期选择器的各个组件。
  • css/: 包含日期选择器的 CSS 样式文件。
  • defaultPhrases.js: 默认的国际化文本。
  • index.js: 项目的入口文件。
  • initialize.js: 初始化文件，用于设置样式类名。
  • styles/: 包含样式相关的文件。
  • util/: 包含工具函数。
• .gitignore: Git 忽略文件配置。
• .npmignore: npm 忽略文件配置。
• .prettierrc: Prettier 代码格式化配置。
• .travis.yml: Travis CI 配置文件。
• CHANGELOG.md: 项目更新日志。
• CONTRIBUTING.md: 贡献指南。
• LICENSE: 项目许可证。
• README.md: 项目说明文档。
• package.json: 项目依赖和脚本配置。
• webpack.config.js: Webpack 配置文件。

2. 项目的启动文件介绍

项目的启动文件是 src/index.js，它是整个项目的入口文件。该文件导入了主要的组件和初始化设置：

import 'react-dates/initialize';
import 'react-dates/lib/css/_datepicker.css';

export { default as DateRangePicker } from './components/DateRangePicker';
export { default as SingleDatePicker } from './components/SingleDatePicker';
export { default as DayPickerRangeController } from './components/DayPickerRangeController';

启动文件功能

• import 'react-dates/initialize';: 初始化 React-Dates 组件的样式类名。
• import 'react-dates/lib/css/_datepicker.css';: 导入日期选择器的 CSS 样式文件。
• 导出主要的日期选择器组件：DateRangePicker、SingleDatePicker 和 DayPickerRangeController。

3. 项目的配置文件介绍

package.json

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

{
  "name": "react-dates",
  "version": "21.8.0",
  "description": "An easily internationalizable, mobile-friendly datepicker library for the web",
  "main": "lib/index.js",
  "scripts": {
    "build": "npm run build-lib && npm run build-css",
    "build-lib": "babel src --out-dir lib --ignore __tests__",
    "build-css": "node scripts/buildCSS.js",
    "storybook": "start-storybook -p 6006",
    "test": "jest"
  },
  "dependencies": {
    "moment": "^2.29.1",
    "react": "^16.14.0",
    "react-dom": "^16.14.0",
    "react-with-styles": "^4.1.0"
  },
  "peerDependencies": {
    "moment": "^2.18.1",
    "react": "^16.3.0",
    "react-dom": "^16.3.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.12.10",
    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.11