ant-design/docs/react/introduce.en-US.md

162 lines
6.4 KiB
Markdown
Raw Normal View History

---
order: 0
title: Ant Design of React
---
Following the Ant Design specification, we developed a React UI library `antd` that contains a set of high quality components and demos for building rich, interactive user interfaces.
<div class="pic-plus">
2017-11-28 11:17:38 +08:00
<img width="150" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg">
<span>+</span>
<img width="160" src="https://t.alipayobjects.com/images/rmsweb/T16xRhXkxbXXXXXXXX.svg">
</div>
<style>
.pic-plus > * {
2017-08-04 17:58:32 +08:00
display: inline-block !important;
vertical-align: middle;
}
.pic-plus span {
font-size: 30px;
color: #aaa;
margin: 0 20px;
}
</style>
---
## Features
2017-01-22 01:19:04 +08:00
- An enterprise-class UI design language for web applications.
2017-01-22 01:15:14 +08:00
- A set of high-quality React components out of the box.
- Written in TypeScript with complete defined types.
2017-01-22 01:15:14 +08:00
- A npm + webpack + [dva](https://github.com/dvajs/dva) front-end development workflow.
2017-03-13 15:55:21 +08:00
## Environment Support
2017-05-27 14:18:14 +08:00
* Modern browsers and Internet Explorer 9+ (with [polyfills](https://ant.design/docs/react/getting-started#Compatibility))
2017-03-13 15:55:21 +08:00
* Server-side Rendering
* [Electron](http://electron.atom.io/)
## Version
- Stable: [![npm package](https://img.shields.io/npm/v/antd.svg?style=flat-square)](https://www.npmjs.org/package/antd)
2017-11-22 14:18:09 +08:00
- Next [![npm (next)](https://img.shields.io/npm/v/antd/next.svg?style=flat-square)](https://www.npmjs.org/package/antd)
You can subscribe to this feed for new version notifications: https://github.com/ant-design/ant-design/releases.atom
## Installation
2017-03-02 11:24:44 +08:00
### Using npm or yarn
**We recommend using npm or yarn to install**it not only makes development easierbut also allow you to take advantage of the rich ecosystem of Javascript packages and tooling.
```bash
$ npm install antd --save
```
```bash
2017-03-02 11:24:44 +08:00
$ yarn add antd
```
2017-04-28 18:43:52 +08:00
If you are in a bad network environmentyou can try other registries and tools like [cnpm](https://github.com/cnpm/cnpm).
2017-03-02 11:24:44 +08:00
### Import in Browser
Add `script` and `link` tags in your browser and use the global variable `antd`.
We provide `antd.js` `antd.css` and `antd.min.js` `antd.min.css` under `antd/dist` in antd's npm package. You can also download these files directly from [![CDNJS](https://img.shields.io/cdnjs/v/antd.svg?style=flat-square)](https://cdnjs.com/libraries/antd) or [unpkg](https://unpkg.com/).
> **We strongly discourage loading the entire files** this will add bloat to your application and make it more difficult to receive bugfixes and updates. Antd is intended to be used in conjunction with a build tool, such as [webpack](https://webpack.github.io/), which will make it easy to import only the parts of antd that you are using.
## Usage
```jsx
import { DatePicker } from 'antd';
ReactDOM.render(<DatePicker />, mountNode);
```
And import stylesheets manually:
```jsx
import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
```
### Use modularized antd
- Use [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (Recommended)
```js
2017-02-07 17:20:59 +08:00
// .babelrc or babel-loader option
{
2017-03-02 00:34:18 +08:00
"plugins": [
2017-11-29 20:27:52 +08:00
["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }] // `style: true` for less
2017-03-02 00:34:18 +08:00
]
}
```
2017-11-29 20:27:52 +08:00
> Note: Don't set `libraryDirectory` if you are using webpack 1.
2017-03-28 15:58:41 +08:00
This allows you to import components from antd without having to manually import the corresponding stylesheet. The antd babel plugin will automatically import stylesheets.
```jsx
// import js and css modularly, parsed by babel-plugin-import
import { DatePicker } from 'antd';
```
- Manually import
```jsx
2017-03-02 00:34:18 +08:00
import DatePicker from 'antd/lib/date-picker'; // for js
import 'antd/lib/date-picker/style/css'; // for css
// import 'antd/lib/date-picker/style'; // that will import less
```
2017-03-13 15:49:15 +08:00
### TypeScript
- Don't use @types/antd, as antd provides a built-in ts definition already.
2017-03-12 15:20:25 +08:00
## Links
2017-03-12 15:20:25 +08:00
- [Home Page](http://ant.design/)
2017-11-01 10:50:27 +08:00
- [Components](/docs/react/introduce)
- [Ant Design Pro](http://pro.ant.design/)
2016-12-12 20:44:40 +08:00
- [Change Log](/changelog)
2017-05-13 16:12:35 +08:00
- [Scaffold Market](http://scaffold.ant.design)
2017-03-12 15:20:25 +08:00
- [rc-components](http://react-component.github.io/)
2016-11-14 11:08:26 +08:00
- [Mobile UI](http://mobile.ant.design)
- [Motion](https://motion.ant.design)
- [Developer Instruction](https://github.com/ant-design/ant-design/wiki/Development)
- [Versioning Release Note](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
- [FAQ](https://github.com/ant-design/ant-design/wiki/FAQ)
2017-11-29 20:27:52 +08:00
- [CodeSandbox template](https://u.ant.design/codesandbox-repro) for bug reports
2016-11-14 11:08:26 +08:00
- [Awesome Ant Design](https://github.com/websemantics/awesome-ant-design)
2016-12-12 20:44:40 +08:00
- [Customize Theme](/docs/react/customize-theme)
## Companies using antd
2017-11-29 20:27:52 +08:00
- [Ant Financial](http://www.antfin.com/index.htm?locale=en_US)
2016-10-07 21:10:05 +08:00
- [Alibaba](http://www.alibaba.com/)
- [Tencent](http://www.tencent.com)
- [Baidu](http://www.baidu.com)
2016-10-07 21:10:05 +08:00
- [Koubei](http://www.koubei.com/)
- [Meituan](http://www.meituan.com)
- [Didi](http://www.xiaojukeji.com/)
- [Eleme](https://www.ele.me/)
> If your company or product uses Ant Design, let us know [here](https://github.com/ant-design/ant-design/issues/477)!
## Contributing
Please read our [CONTRIBUTING.md](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md) first.
2017-04-02 14:03:42 +08:00
If you'd like to help us improve antd, just create a [Pull Request](https://github.com/ant-design/ant-design/pulls). Feel free to report bugs and issues [here](http://new-issue.ant.design/).
> If you're new to posting issues, we ask that you read [*How To Ask Questions The Smart Way*](http://www.catb.org/~esr/faqs/smart-questions.html) and [How to Ask a Question in Open Source Community](https://github.com/seajs/seajs/issues/545) and [How to Report Bugs Effectively](http://www.chiark.greenend.org.uk/~sgtatham/bugs.html) prior to posting. Well written bug reports help us help you!
## Need Help?
For questions on how to use antd, please post questions to [<img alt="Stack Overflow" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg?v=2bb144720a66" width="140" />](http://stackoverflow.com/questions/tagged/antd) using the `antd` tag. If you're not finding what you need on stackoverflow, you can find us on [![Gitter](https://badges.gitter.im/ant-design/ant-design-english.svg)](https://gitter.im/ant-design/ant-design-english?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) as well.
As always, we encourage experienced users to help those who are not familiar with `antd`!