TDesign React 项目教程

2024-08-07 19:46:03作者：凤尚柏Louis

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

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

tdesign-react/
├── docs/
├── mock/
├── public/
├── src/
│   ├── components/
│   ├── styles/
│   ├── utils/
│   ├── App.js
│   ├── index.js
│   └── ...
├── .editorconfig
├── .env
├── .env.development
├── .env.site
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── .prettierrc.js
├── LICENSE
├── README-zh_CN.md
├── README.md
├── index.html
├── package.json
├── tsconfig.json
└── vite.config.js

目录介绍

docs/: 存放项目文档。
mock/: 存放模拟数据。
public/: 存放公共资源文件。
src/: 源代码目录。
- components/: 存放 React 组件。
- styles/: 存放样式文件。
- utils/: 存放工具函数。
- App.js: 主应用组件。
- index.js: 入口文件。
.editorconfig: 编辑器配置文件。
.env: 环境变量配置文件。
.env.development: 开发环境变量配置文件。
.env.site: 站点环境变量配置文件。
.eslintignore: ESLint 忽略配置文件。
.eslintrc.js: ESLint 配置文件。
.gitignore: Git 忽略配置文件。
.prettierrc.js: Prettier 配置文件。
LICENSE: 项目许可证。
README-zh_CN.md: 中文 README 文件。
README.md: 英文 README 文件。
index.html: 主 HTML 文件。
package.json: 项目依赖和脚本配置文件。
tsconfig.json: TypeScript 配置文件。
vite.config.js: Vite 配置文件。

2. 项目的启动文件介绍

入口文件

src/index.js 是项目的入口文件，负责初始化 React 应用并挂载到 DOM 中。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import 'tdesign-react/es/style/index.css';

ReactDOM.createRoot(document.getElementById('app')).render(<App />);

主应用组件

src/App.js 是主应用组件，负责组织和渲染其他组件。

import React from 'react';
import { Button } from 'tdesign-react';

function App() {
  return <Button>Hello TDesign</Button>;
}

export default App;

3. 项目的配置文件介绍

package.json

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

{
  "name": "tdesign-react",
  "version": "1.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "tdesign-react": "^1.0.0"
  },
  "devDependencies": {
    "vite": "^2.0.0"
  }
}

tsconfig.json

tsconfig.json 文件是 TypeScript 的配置文件，定义了编译选项。

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"]
  },
  "include": ["src"]
}