Skip to content

Commit 9199d87

Browse files
mortalYoungmortalYoung
authored
docs: improve getting-started doc (#332)
* docs: improve getting-started doc * docs: remove local development for getting-start doc
1 parent 9001d57 commit 9199d87

File tree

5 files changed

+110
-261
lines changed

5 files changed

+110
-261
lines changed

‎.dumi/theme/slots/Footer/index.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
@import '../../style/const.scss';
22

33
.dtc-footer {
4+
margin-top: 16px;
45
background: rgb(250, 250, 252);
56

67
.dtc-footer-links {

‎README-zh_CN.md‎

Lines changed: 39 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
1-
# dt-react-component
1+
<h1 align="center">dt-react-component</h1>
2+
3+
<div align="center">
4+
5+
基于 [Ant Design](https://github.com/ant-design/ant-design) 的 React UI 组件库
26

37
[![NPM version][npm-image]][npm-url] [![NPM downloads][download-img]][download-url]
48

@@ -7,129 +11,86 @@
711
[download-img]: https://img.shields.io/npm/dm/dt-react-component.svg?style=flat
812
[download-url]: https://www.npmjs.com/package/dt-react-component
913

14+
</div>
15+
1016
[English](./README.md) | 简体中文
1117

1218
## 文档
1319

20+
查看[**在线文档**](https://dtstack.github.io/dt-react-component/)
21+
22+
或者查看老版本：
23+
1424
- [v3.x](https://dtstack.github.io/dt-react-component/)
1525
- [v2.x](https://liuxy0551.github.io/dt-react-component/)
1626

17-
基于 [ant-design](https://github.com/ant-design/ant-design) 的 React UI 组件库。 主要用于中，后台产品。我们的目标是**满足更具体的业务场景组件**。 当然，我们也有基于原生 javascript 实现的业务组件，例如**ContextMenu**，**KeyEventListener**等。
27+
基于 [Ant Design](https://github.com/ant-design/ant-design) 的 React UI 组件库。 主要用于中，后台产品。我们的目标是**满足更具体的业务场景组件**。 当然，我们也有基于原生 javascript 实现的业务组件，例如**ContextMenu**，**KeyEventListener**等。
1828

1929
## 何时使用
2030

2131
- 当发现其他组件库提供的基本组件不符合当前的业务场景，并且需要基于这些基本组件实现功能时，可以考虑使用 dt-react-component 解决问题。
2232
- 当业务复杂时，将沉淀越来越多的业务组件。 为了更好地管理组件并减少代码的冗余，可以使用 dt-react-component。 当然，我们欢迎 PR。 我们也将及时审查和合并常见的业务场景组件。
2333

24-
## 如何贡献
25-
26-
[贡献指南](./CONTRIBUTING.md)
27-
2834
## 安装
2935

30-
```js
31-
// use npm
36+
```shell
37+
# use npm
3238
npm install dt-react-component
3339

34-
// use yarn
40+
# use yarn
3541
yarn add dt-react-component
36-
```
37-
38-
## 使用
3942

40-
```js
41-
import { StatusTag, GoBack } from 'dt-react-component';
42-
const App = () => (
43-
<>
44-
<StatusTag type="success">已完成</StatusTag>
45-
<GoBack url="/api/manage" />
46-
</>
47-
);
43+
# use pnpm
44+
pnpm install dt-react-component
4845
```
4946

50-
并手动导入样式：
51-
52-
```js
53-
import 'dt-react-component/lib/style/index.css';
47+
## 使用
5448

55-
// or
56-
import 'dt-react-component/lib/style/index.scss';
49+
```jsx
50+
import React from 'react';
51+
import { BlockHeader } from 'dt-react-component';
52+
const App = () => <BlockHeader title="分类标题" showBackground />;
5753
```
5854

5955
### 按需加载
6056

61-
下面两种方式都可以只加载用到的组件。
62-
63-
- 我们强烈建议您使用 [babel-plugin-treasure](https://github.com/DTStack/babel-plugin-treasure) 完全适配 dt-react-component 的插件。
64-
65-
```js
66-
// .babelrc or babel-loader option
67-
"plugins": [
68-
[
69-
"treasure",
70-
{
71-
"libraryName": "dt-react-component",
72-
"libraryDirectory": "lib",
73-
"style": "css" // `style: true` Will load the scss file
74-
}
75-
]
76-
]
77-
78-
```
79-
80-
然后只需从 dt-react-component 引入模块即可，无需单独引入样式。等同于下面手动引入的方式。
81-
82-
```js
83-
// babel-plugin-treasure will help you load JS and CSS
84-
import { ContextMenu } from 'dt-react-component';
85-
```
86-
87-
更多请见 [babel-plugin-treasure](https://github.com/DTStack/babel-plugin-treasure).
88-
89-
- 手动引入
90-
91-
```js
92-
import MarkdownRender from 'dt-react-component/lib/markdownRender'; // Load JS
93-
import 'dt-react-component/lib/markdownRender/style/css'; // Load CSS
94-
// import 'dt-react-component/lib/markdownRender/style'; // Load SCSS
95-
```
57+
我们默认支持基于 ES modules 的 tree shaking，对于 js 部分，直接引入 `import { BlockHeader } from 'dt-react-component';` 就会有按需加载的效果。
9658

9759
### TypeScript
9860

9961
dt-react-component 完全基于 TypeScript 编写，具有完整的类型定义，因此您将拥有更好的体验。
10062

101-
### 预览地址
102-
103-
您可以在此地址查看最新的组件和文档。
63+
## 如何贡献
10464

105-
[https://dtstack.github.io/dt-react-component/](https://dtstack.github.io/dt-react-component/)
65+
[贡献指南](./CONTRIBUTING.md)
10666

10767
## 开发
10868

10969
本地克隆:
11070

111-
```js
112-
$ git clone git@github.com:DTStack/dt-react-component.git
113-
$ cd dt-react-component
114-
$ npm install
115-
$ npm run storybook
71+
```bash
72+
git clone [email protected]:DTStack/dt-react-component.git
73+
cd dt-react-component
74+
pnpm install
75+
pnpm run dev
11676
```
11777

118-
打开浏览器并访问 [http://127.0.0.1:9001](http://127.0.0.1:9001)，我们基于 storybook 管理组件。 更多信息请访问 [Storybook](https://storybook.js.org/).
78+
打开浏览器并访问 [http://127.0.0.1:8000](http://127.0.0.1:8000)，我们基于 dumi 管理组件。 更多信息请访问 [dumi](https://d.umijs.org/).
11979

12080
## 发布
12181

12282
```bash
123-
yarn compile
124-
yarn release -r 3.0.1
125-
npm publish --registry https://registry.npmjs.org/
83+
pnpm build
84+
pnpm release -r 3.0.1
85+
pnpm publish --registry https://registry.npmjs.org/
12686
```
12787

128-
## 路线图
88+
### 发布站点
12989

130-
- 支持和改进更多组件
131-
- 国际化语言支持
132-
- 支持主题定制
90+
```bash
91+
pnpm docs:build
92+
pnpm deploy
93+
```
13394

13495
## 贡献
13596

‎README.md‎

Lines changed: 37 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
1-
# dt-react-component
1+
<h1 align="center">dt-react-component</h1>
2+
3+
<div align="center">
4+
5+
React UI component library based on [Ant Design](https://github.com/ant-design/ant-design)
26

37
[![NPM version][npm-image]][npm-url] [![NPM downloads][download-img]][download-url]
48

@@ -7,129 +11,86 @@
711
[download-img]: https://img.shields.io/npm/dm/dt-react-component.svg?style=flat
812
[download-url]: https://www.npmjs.com/package/dt-react-component
913

14+
</div>
15+
1016
English | [简体中文](./README-zh_CN.md)
1117

1218
## Docs
1319

20+
You can view [**online document**](https://dtstack.github.io/dt-react-component/)
21+
22+
or view legacy documents following:
23+
1424
- [v3.x](https://dtstack.github.io/dt-react-component/)
1525
- [v2.x](https://liuxy0551.github.io/dt-react-component/)
1626

17-
React UI component library based on [ant-design](https://github.com/ant-design/ant-design). Mainly used for middle and back-end products. Our goal is to **meet more specific and more specific business scenario components**. Of course, we also have excellent business components based on native javascript, such as **ContextMenu**, **KeyEventListener** and so on.
27+
React UI component library based on [Ant Design](https://github.com/ant-design/ant-design). Mainly used for middle and back-end products. Our goal is to **meet more specific and more specific business scenario components**. Of course, we also have excellent business components based on native javascript, such as **ContextMenu**, **KeyEventListener** and so on.
1828

1929
## When to use
2030

2131
- When you find that the basic components provided by other component libraries do not meet the current business scenario, and you need to implement functions based on the basic components, you can use dt-react-component to solve the problem.
2232
- When the business is complex, more and more business components are deposited. In order to better manage the components and reduce the redundancy of the code, you can use dt-react-component. Of course, we welcome PR. We will review and merge common business scenario components in a timely manner.
2333

24-
## How to contribute
25-
26-
[CONTRIBUTING](./CONTRIBUTING.md)
27-
2834
## Install
2935

30-
```js
31-
// use npm
36+
```shell
37+
# use npm
3238
npm install dt-react-component
3339

34-
// use yarn
40+
# use yarn
3541
yarn add dt-react-component
36-
```
37-
38-
## Usage
3942

40-
```js
41-
import { StatusTag, GoBack } from 'dt-react-component';
42-
const App = () => (
43-
<>
44-
<StatusTag type="success">已完成</StatusTag>
45-
<GoBack url="/api/manage" />
46-
</>
47-
);
43+
# use pnpm
44+
pnpm install dt-react-component
4845
```
4946

50-
And import style manually:
51-
52-
```js
53-
import 'dt-react-component/lib/style/index.css';
47+
## Usage
5448

55-
// or
56-
import 'dt-react-component/lib/style/index.scss';
49+
```jsx
50+
import React from 'react';
51+
import { BlockHeader } from 'dt-react-component';
52+
const App = () => <BlockHeader title="分类标题" showBackground />;
5753
```
5854

5955
### Load on demand
6056

61-
The following two methods can only load the components used.
62-
63-
- We strongly recommend using the [babel-plugin-treasure](https://github.com/DTStack/babel-plugin-treasure) plugin that perfectly adapts to dt-react-component.
64-
65-
```js
66-
// .babelrc or babel-loader option
67-
"plugins": [
68-
[
69-
"treasure",
70-
{
71-
"libraryName": "dt-react-component",
72-
"libraryDirectory": "lib",
73-
"style": "css" // `style: true` Will load the scss file
74-
}
75-
]
76-
]
77-
78-
```
79-
80-
Then just import the module from dt-react-component, no need to import style separately. It is equivalent to the manual introduction below.
81-
82-
```js
83-
// babel-plugin-treasure will help you load JS and CSS
84-
import { ContextMenu } from 'dt-react-component';
85-
```
86-
87-
See more [babel-plugin-treasure](https://github.com/DTStack/babel-plugin-treasure).
88-
89-
- Manual introduction
90-
91-
```js
92-
import MarkdownRender from 'dt-react-component/lib/markdownRender'; // Load JS
93-
import 'dt-react-component/lib/markdownRender/style/css'; // Load CSS
94-
// import 'dt-react-component/lib/markdownRender/style'; // Load SCSS
95-
```
57+
We supports tree shaking of ES modules, so using `import { BlockHeader } from 'dt-react-component';` would drop js code you didn't use.
9658

9759
### TypeScript
9860

9961
dt-react-component is written in TypeScript with complete definitions, So you will have a better smart reminder experience.
10062

101-
### Preview address
102-
103-
You can view the latest components and documents at this address
63+
## How to contribute
10464

105-
[https://dtstack.github.io/dt-react-component/](https://dtstack.github.io/dt-react-component/)
65+
[CONTRIBUTING](./CONTRIBUTING.md)
10666

10767
## Development
10868

10969
clone locally:
11070

111-
```js
71+
```bash
11272
$ git clone [email protected]:DTStack/dt-react-component.git
11373
$ cd dt-react-component
114-
$ npm install
115-
$ npm run storybook
74+
$ pnpm install
75+
$ pnpm run dev
11676
```
11777

118-
Open your browser and visit [http://127.0.0.1:9001](http://127.0.0.1:9001)，We manage components based on storybook. see more at [Storybook](https://storybook.js.org/).
78+
Open your browser and visit [http://127.0.0.1:8000](http://127.0.0.1:8000)，We manage components based on dumi. see more at [dumi](https://d.umijs.org/).
11979

12080
## Publish
12181

12282
```bash
123-
yarn compile
124-
yarn release -r 3.0.1
125-
npm publish --registry https://registry.npmjs.org/
83+
pnpm build
84+
pnpm release -r 3.0.1
85+
pnpm publish --registry https://registry.npmjs.org/
12686
```
12787

128-
## Roadmap
88+
### Publish website
12989

130-
- We will support and improve more components
131-
- Internationalized language support
132-
- Support theme customization
90+
```bash
91+
pnpm docs:build
92+
pnpm deploy
93+
```
13394

13495
## Contributing
13596

‎docs/guide/CONTRIBUTING.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,9 +42,9 @@ order: 5
4242

4343
## 如何生成自己的文档地址
4444

45-
本地查看文档效果：`npm run storybook`
45+
本地查看文档效果：`npm run dev`
4646

47-
代码修改完毕后在本地执行 `npm run deploy-storybook`，等待执行完成后，访问 `https://github-username.github.io/dt-react-component/`，提 PR 需要附上文档预览地址。
47+
代码修改完毕后在本地执行 `npm run deploy`，等待执行完成后，访问 `https://github-username.github.io/dt-react-component/`，提 PR 需要附上文档预览地址。
4848

4949
## 第一次贡献
5050

0 commit comments

Comments
 (0)