Gantt-Task-React 项目教程

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

Gantt-Task-React 项目的目录结构如下：

gantt-task-react/
├── example/
│   ├── src/
│   ├── package.json
│   └── ...
├── src/
│   ├── components/
│   ├── styles/
│   ├── index.tsx
│   └── ...
├── .editorconfig
├── .eslintignore
├── .eslintrc
├── .gitignore
├── .prettierrc
├── .travis.yml
├── LICENSE
├── README.md
├── package-lock.json
├── package.json
├── tsconfig.json
└── tsconfig.test.json

目录结构介绍

• example/: 包含项目的示例代码。
  • src/: 示例代码的源文件。
  • package.json: 示例项目的依赖配置文件。
• src/: 项目的主要源代码。
  • components/: 包含 React 组件。
  • styles/: 包含样式文件。
  • index.tsx: 项目的入口文件。
• .editorconfig, .eslintignore, .eslintrc, .gitignore, .prettierrc, .travis.yml: 配置文件，用于代码格式化、代码检查等。
• LICENSE: 项目的许可证文件。
• README.md: 项目的说明文档。
• package-lock.json, package.json: 项目的依赖配置文件。
• tsconfig.json, tsconfig.test.json: TypeScript 配置文件。

2. 项目的启动文件介绍

项目的启动文件是 src/index.tsx，它是整个项目的入口点。以下是 index.tsx 的基本结构：

import React from 'react';
import ReactDOM from 'react-dom';
import { Gantt, Task, EventOption, StylingOption, ViewMode, DisplayOption } from 'gantt-task-react';
import './index.css';

// 定义任务数据
let tasks: Task[] = [
  {
    start: new Date(2020, 1, 1),
    end: new Date(2020, 1, 2),
    name: 'Idea',
    id: 'Task 0',
    type: 'task',
    progress: 45,
    isDisabled: true,
    styles: {
      progressColor: '#ffbb54',
      progressSelectedColor: '#ff9e0d',
    },
  },
];

// 渲染 Gantt 图表
ReactDOM.render(
  <Gantt tasks={tasks} />,
  document.getElementById('root')
);

启动文件介绍

• import React from 'react'; 和 import ReactDOM from 'react-dom';: 导入 React 和 ReactDOM 库。
• import { Gantt, Task, EventOption, StylingOption, ViewMode, DisplayOption } from 'gantt-task-react';: 导入 Gantt 组件及相关类型。
• import './index.css';: 导入样式文件。
• let tasks: Task[] = [...]: 定义任务数据。
• ReactDOM.render(<Gantt tasks={tasks} />, document.getElementById('root'));: 渲染 Gantt 图表到 DOM 中。

3. 项目的配置文件介绍

package.json

package.json 文件包含了项目的依赖、脚本和其他元数据。以下是部分内容：

{
  "name": "gantt-task-react",
  "version": "1.0.0",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "gantt-task-react": "^1.0.0"
  },
  "devDependencies": {
    "@types/react": "^17.0.2",
    "@types/react-dom": "^17.0.