diff --git a/README-zh_CN.md b/README-zh_CN.md index 9e40e5de57..e8d118ad5f 100644 --- a/README-zh_CN.md +++ b/README-zh_CN.md @@ -52,6 +52,10 @@ npm install antd --save ``` +```bash +yarn add antd +``` + ## 🔨 示例 ```jsx diff --git a/README.md b/README.md index e302548d07..accce8a610 100644 --- a/README.md +++ b/README.md @@ -52,6 +52,10 @@ English | [简体中文](./README-zh_CN.md) npm install antd --save ``` +```bash +yarn add antd +``` + ## 🔨 Usage ```jsx diff --git a/docs/react/getting-started.en-US.md b/docs/react/getting-started.en-US.md index f69247cfd3..ada4cd1698 100755 --- a/docs/react/getting-started.en-US.md +++ b/docs/react/getting-started.en-US.md @@ -5,155 +5,116 @@ title: Getting Started Ant Design React is dedicated to providing a **good development experience** for programmers. Make sure that you had installed [Node.js](https://nodejs.org/)(> 8.0.0) correctly. -> Before delving into Ant Design React, a good knowledge base of [React](http://facebook.github.io/react/) and [JavaScript ES2015](http://babeljs.io/docs/learn-es2015/) is needed. +> Before delving into Ant Design React, a good knowledge base of [React](https://reactjs.org) and [JavaScript ES2015](http://babeljs.io/docs/learn-es2015/) is needed. --- -## Playground +## First Example -The following CodeSandbox demo is the simplest use case, and it's also a good habit to fork this demo to provide a re-producible demo while reporting a bug. +There is the simplest example to show usage of Ant Design React. - + -## First Local Development +### 1. Create one codesandbox -During development, you may need to compile and debug JSX and ES2015 code, and even proxy some of the requests to mock data or other external services. All of these can be done with quick feedback provided through hot reloading of changes. +Visit http://u.ant.design/ to create a codesandbox, don't forget to press save button. -### 1. Installation - -[antd-init](https://github.com/ant-design/antd-init/) is a demo-only scaffold tool. If you want to create real world projects, [create-umi](https://github.com/umijs/create-umi) and [create-react-app](https://github.com/facebookincubator/create-react-app) is our recommendation. - -```bash -$ npm install antd-init -g -``` - -Read [the documentation of `antd-init`](https://github.com/ant-design/antd-init/) and [the documentation of `ant-tool`](http://ant-tool.github.io/) to explore more features. - -Also, you can try other scaffolds provided below: - -- [Ant Design Pro](http://pro.ant.design/) -- [antd-admin](https://github.com/zuiidea/antd-admin) -- [d2-admin](https://github.com/d2-projects/d2-admin) -- more scaffolds at [Scaffold Market](http://scaffold.ant.design/) - -### 2. Create a New Project - -A new project can be created using CLI tools. - -```bash -$ mkdir antd-demo && cd antd-demo -$ antd-init -``` - -`antd-init` will run `npm install` after a project is created. If it fails, you can run `npm install` by yourself. - -### 3. Use antd's Components - -By default, besides the scaffolding needed to start the development, a fully working Todo application is created. -You may study this example later. For now, just follow this guide in order to get some experience working with the result of `antd-init`. +### 2. Using antd component Replace the content of `index.js` with the following code. As you can see, there is no difference between antd's components and usual React components. ```jsx -import React from 'react'; -import ReactDOM from 'react-dom'; -import { LocaleProvider, DatePicker, message } from 'antd'; -// The default locale is en-US, but we can change it to other language -import frFR from 'antd/lib/locale-provider/fr_FR'; -import moment from 'moment'; -import 'moment/locale/fr'; - -moment.locale('fr'); +import React from "react"; +import ReactDOM from "react-dom"; +import { DatePicker, message } from "antd"; +import "antd/dist/antd.css"; +import "./index.css"; class App extends React.Component { - constructor(props) { - super(props); - this.state = { - date: '', - }; - } - handleChange(date) { - message.info('Selected Date: ' + (date ? date.toString() : '')); + state = { + date: null, + }; + + handleChange = date => { + message.info(`Selected Date: ${date.format("YYYY-MM-DD")}`); this.setState({ date }); - } + }; + render() { + const { date } = this.state; return ( - -
- this.handleChange(value)} /> -
Date: {this.state.date && this.state.date.toString()}
+
+ +
+ Selected Date: {date ? date.format("YYYY-MM-DD") : "None"}
- +
); } } -ReactDOM.render(, document.getElementById('root')); +ReactDOM.render(, document.getElementById("root")); ``` -> All the components in antd are listed in the sidebar. +### 3. Explore in more components -### 4. Development & Debugging +You can look up compnents in side menu, find one like [Alert](/components/alert). Plenty of examples are provided in component page, +API documentation too. -Run your project and visit http://127.0.0.1:8000 +Click the corner icon at first example, there are source codes to use out of box. Now you are try import `Alert` in previous codesandbox: -```bash -$ npm start +```diff +- import { DatePicker, message } from 'antd'; ++ import { DatePicker, message, Alert } from 'antd'; ``` -### 5. Building & Deployment +Add jsx part in `render` function. -```bash -$ npm run build +```diff + this.handleChange(value)} /> +
+- Selected Date: {date ? date.format('YYYY-MM-DD') : 'None'} ++ +
``` -Entry files will be built and generated in `dist` directory, where we can deploy it to different environments. +Then you can see the result at preview section. + +codesandbox screenshot + +OK! Now you know how to use antd components in a clear way, welcome to explore more usages in this codesandbox. +We also strongly recommend to use codesandbox to provide a reproducible demo while reporting a bug. + +### 4. Next Step -> This guide is designed to help you to understand how to use antd, so it may not be similar to what you do in the real world. -> But you can use those tools in your project, depending on your context and needs. +In real world you gonna need a whole package of `compile/build/deploy/lint/debug` development workflow +which you can read ariticles afterwards or try other scaffolds provided below: + +- [Ant Design Pro](http://pro.ant.design/) +- [antd-admin](https://github.com/zuiidea/antd-admin) +- [d2-admin](https://github.com/d2-projects/d2-admin) +- more scaffolds at [Scaffold Market](http://scaffold.ant.design/) ## Compatibility Ant Design React supports all the modern browsers and IE9+. -You need to provide [es5-shim](https://github.com/es-shims/es5-shim) and [es6-shim](https://github.com/paulmillr/es6-shim) and other polyfills for IE browsers. - -If you are using babel, we strongly recommend using [babel-polyfill](https://babeljs.io/docs/usage/polyfill/) and [babel-plugin-transform-runtime](https://babeljs.io/docs/plugins/transform-runtime/) instead of those two shims. - -> Please avoid using both the babel and shim methods at the same time. - -> If you run into problems with [startsWith ](https://github.com/ant-design/ant-design/issues/3400#issuecomment-253181445), you should import [es6-shim](https://github.com/paulmillr/es6-shim) or [babel-polyfill](https://babeljs.io/docs/usage/polyfill/) as a workaround. - -```html - - - - - - - - - - - - - - - - - -``` +| [IE / Edge](http://godban.github.io/browsers-support-badges/)
IE / Edge | [Firefox](http://godban.github.io/browsers-support-badges/)
Firefox | [Chrome](http://godban.github.io/browsers-support-badges/)
Chrome | [Safari](http://godban.github.io/browsers-support-badges/)
Safari | [Opera](http://godban.github.io/browsers-support-badges/)
Opera | [Electron](http://godban.github.io/browsers-support-badges/)
Electron | +| --------- | --------- | --------- | --------- | --------- | --------- | +| IE9, IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions -#### IE8 note +We offset very limit support for IE9/10, some styles and animation would be mininal under them, also we are using Flex layout in few components. -> We don't support IE8 after `antd@2.0`. +> Note, different with Ant Design, Ant Design Pro support to IE11+. + +Polyfills are needed for IE browsers, we recommend [babel-preset-env](https://babeljs.io/docs/en/babel-preset-env) for it. You can set `targets` config if you are using [umi](http://umijs.org/). + +Ant Design 3.0 support both React 15 and 16 now though, we strongly suggest React 16 for better performance and few bugs. -You may encounter problems like [#28](https://github.com/ant-tool/atool-build/issues/28) and [#858](https://github.com/ant-design/ant-design/issues/858), since `babel@6.x` doesn't support IE8. You can refer to this [webpack config](https://github.com/ant-design/antd-init/blob/f5fb9479ca973fade51fd6754e50f8b3fafbb1df/boilerplate/webpack.config.js#L4-L8). +#### IE8 note -> More about how to use React in IE8: https://github.com/xcatliu/react-ie8 +> We don't support IE8 after `antd@2.0`. ## Customized Work Flow @@ -165,7 +126,6 @@ If you are trying [parcel](https://parceljs.org), here is [a demo repository](ht There are some [scaffolds](http://scaffold.ant.design/) which have already integrated antd, so you can try and start with one of these, and even contribute. - ## Import on Demand If you see logs like below screenshot, you might be importing all components by writing `import { Button } from 'antd';`. This will affect your app's network performance. @@ -199,8 +159,3 @@ And this plugin can load styles too, read [usage](https://github.com/ant-design/ - [Customize Theme](/docs/react/customize-theme) - [Local Iconfont](https://github.com/ant-design/antd-init/tree/master/examples/local-iconfont) - -## Tips - -- You can use any `npm` modules. -- We recommend writing code in [ES2015](http://babeljs.io/blog/2015/06/07/react-on-es6-plus) as `babel` has been integrated into our work flow. diff --git a/docs/react/getting-started.zh-CN.md b/docs/react/getting-started.zh-CN.md index d024afd146..6e4ab0611c 100755 --- a/docs/react/getting-started.zh-CN.md +++ b/docs/react/getting-started.zh-CN.md @@ -5,55 +5,22 @@ title: 快速上手 Ant Design React 致力于提供给程序员**愉悦**的开发体验。 -> 在开始之前，推荐先学习 [React](http://facebook.github.io/react/) 和 [ES2015](http://babeljs.io/docs/learn-es2015/)，并正确安装和配置了 [Node.js](https://nodejs.org/) v8 或以上。 +> 在开始之前，推荐先学习 [React](http://reactjs.org) 和 [ES2015](http://babeljs.io/docs/learn-es2015/)，并正确安装和配置了 [Node.js](https://nodejs.org/) v8 或以上。 > 官方指南假设你已了解关于 HTML、CSS 和 JavaScript 的中级知识，并且已经完全掌握了 React 全家桶的正确开发方式。如果你刚开始学习前端或者 React，将 UI 框架作为你的第一步可能不是最好的主意。 --- -## 在线演示 +## 第一个例子 -最简单的使用方式参照以下 CodeSandbox 演示，也推荐 Fork 本例来进行 `Bug Report`。 +这是一个最简单的 Ant Design 组件的在线演示。 - + -## 第一个本地实例 +### 1. 创建一个 codesandbox -实际项目开发中，你会需要对 ES2015 和 JSX 代码的构建、调试、代理、打包部署等一系列工程化的需求。 -我们提供了一套 `npm` + `webpack` 的开发工具链来辅助开发，下面我们用一个简单的实例来说明。 +访问 http://u.ant.design/ 创建一个 codesandbox 的在线示例，别忘了保存以创建一个新的实例。 -### 1. 安装脚手架工具 - -[antd-init](https://github.com/ant-design/antd-init/) 是一个用于演示 antd 如何使用的脚手架工具，实际业务项目建议使用 [create-umi](https://github.com/umijs/create-umi) 或 [create-react-app](https://github.com/facebookincubator/create-react-app) 进行搭建。 - -```bash -$ npm install antd-init -g -``` - -更多功能请参考 [脚手架工具](https://github.com/ant-design/antd-init/) 和 [开发工具文档](http://ant-tool.github.io/)。 - -您也可以使用以下脚手架和范例： - -- [Ant Design Pro](http://pro.ant.design/) -- [antd-admin](https://github.com/zuiidea/antd-admin) -- [d2-admin](https://github.com/d2-projects/d2-admin) -- 更多脚手架可以查看 [脚手架市场](http://scaffold.ant.design/) - -### 2. 创建一个项目 - -使用命令行进行初始化。 - -```bash -$ mkdir antd-demo && cd antd-demo -$ antd-init -``` - -antd-init 会自动安装 npm 依赖，若有问题则可自行安装。 - -若安装缓慢报错，可尝试用 `cnpm` 或别的镜像源自行安装：`rm -rf node_modules && cnpm install`。 - -### 3. 使用组件 - -脚手架会生成一个 Todo 应用实例（一个很有参考价值的 React 上手示例），先不管它，我们用来测试组件。 +### 2. 使用组件 直接用下面的代码替换 `index.js` 的内容，用 React 的方式直接使用 antd 组件。 @@ -65,26 +32,29 @@ import { LocaleProvider, DatePicker, message } from 'antd'; import zhCN from 'antd/lib/locale-provider/zh_CN'; import moment from 'moment'; import 'moment/locale/zh-cn'; +import "antd/dist/antd.css"; +import "./index.css"; moment.locale('zh-cn'); class App extends React.Component { - constructor(props) { - super(props); - this.state = { - date: '', - }; - } - handleChange(date) { - message.info('您选择的日期是: ' + (date ? date.toString() : '')); + state = { + date: null, + }; + + handleChange = (date) => { + message.info(`您选择的日期是: ${date.format('YYYY-MM-DD')}`); this.setState({ date }); } render() { + const { date } = this.state; return (
- this.handleChange(value)} /> -
当前日期：{this.state.date && this.state.date.toString()}
+ +
+ 当前日期：{date ? date.format('YYYY-MM-DD') : '未选择'} +
); @@ -94,69 +64,63 @@ class App extends React.Component { ReactDOM.render(, document.getElementById('root')); ``` -> 你可以在左侧菜单选用更多组件。 +### 3. 探索更多组件用法 -### 4. 开发调试 +你可以在左侧菜单查看组件列表，比如 [Alert](/components/alert-cn) 组件，组件文档中提供了各类演示，最下方有组件 API 文档可以查阅。 +在代码演示部分找到第一个例子，点击右下角的图标展开代码。 -一键启动调试，访问 http://127.0.0.1:8000 查看效果。 +然后依照演示代码的写法，在之前的 codesandbox 里修改 `index.js`，首先在 `import` 内引入 Alert 组件： -```bash -$ npm start +```diff +- import { LocaleProvider, DatePicker, message } from 'antd'; ++ import { LocaleProvider, DatePicker, message, Alert } from 'antd'; ``` -### 5. 构建和部署 +然后在 `render` 内添加相应的 jsx 代码： -```bash -$ npm run build +```diff + this.handleChange(value)} /> +
+- 当前日期：{date ? date.format('YYYY-MM-DD') : '未选择'} ++ +
``` -入口文件会构建到 `dist` 目录中，你可以自由部署到不同环境中进行引用。 +在右侧预览区就可以看到如图的效果。 + +codesandbox screenshot + +好的，现在你已经会使用基本的 antd 组件了，你可以在这个例子中继续探索其他组件的用法。 +如果你遇到组件的 bug，也推荐建一个可重现的 codesandbox 来报告 bug。 + +### 4. 下一步 -> 上述例子用于帮助你理解 Ant Design React 的使用流程，并非真实的开发过程，你可以根据自己的项目开发流程进行接入。 +实际项目开发中，你会需要构建、调试、代理、打包部署等一系列工程化的需求。您可以阅读后面的文档或者使用以下脚手架和范例： + +- [Ant Design Pro](http://pro.ant.design/) +- [antd-admin](https://github.com/zuiidea/antd-admin) +- [d2-admin](https://github.com/d2-projects/d2-admin) +- 更多脚手架可以查看 [脚手架市场](http://scaffold.ant.design/) ## 兼容性 Ant Design React 支持所有的现代浏览器和 IE9+。 -对于 IE 系列浏览器，需要提供 [es5-shim](https://github.com/es-shims/es5-shim) 和 [es6-shim](https://github.com/paulmillr/es6-shim) 等 Polyfills 的支持。 - -如果你使用了 babel，强烈推荐使用 [babel-polyfill](https://babeljs.io/docs/usage/polyfill/) 和 [babel-plugin-transform-runtime](https://babeljs.io/docs/plugins/transform-runtime/) 来替代以上两个 shim。 - -> 避免同时使用 babel 和 shim 两种兼容方法，以规避 [#6512](https://github.com/ant-design/ant-design/issues/6512) 中所遇问题 - -> 如果在 IE 浏览器中遇到 `startsWith` 的[问题](https://github.com/ant-design/ant-design/issues/3400#issuecomment-253181445)，请引入 [es6-shim](https://github.com/paulmillr/es6-shim) 或 [babel-polyfill](https://babeljs.io/docs/usage/polyfill/)。 - -```html - - - - - - - - - - - - - - - - - -``` +| [IE / Edge](http://godban.github.io/browsers-support-badges/)
IE / Edge | [Firefox](http://godban.github.io/browsers-support-badges/)
Firefox | [Chrome](http://godban.github.io/browsers-support-badges/)
Chrome | [Safari](http://godban.github.io/browsers-support-badges/)
Safari | [Opera](http://godban.github.io/browsers-support-badges/)
Opera | [Electron](http://godban.github.io/browsers-support-badges/)
Electron | +| --------- | --------- | --------- | --------- | --------- | --------- | +| IE9, IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions -#### IE8 note +我们对 IE9/10 提供有限度的支持，部分样式和动画在 IE9/10 下的表现会比较裸。少数组件使用到了 Flex 布局，在 IE9/10 下也会有问题。 -> `antd@2.0` 之后将不再支持 IE8。 +> 注意，不同于 Ant Design，Ant Design Pro 是只支持到 IE11+ 的。 -IE8 需要配合使用 [react@0.14.x](https://facebook.github.io/react/blog/2016/01/12/discontinuing-ie8-support.html) 版本。 +对于 IE 系列浏览器，需要提供相应的 Polyfill 支持，建议使用 [babel-preset-env](https://babeljs.io/docs/en/babel-preset-env) 来解决浏览器兼容问题。如果你在使用 [umi](http://umijs.org/)，可以直接使用 [targets](https://umijs.org/zh/config/#targets) 配置。 -另外，由于 `babel@6.x` 对 IE8 的支持不佳，你可能会遇到类似 [#28](https://github.com/ant-tool/atool-build/issues/28) 和 [#858](https://github.com/ant-design/ant-design/issues/858) 的 default 报错的问题，你也可以参照这个 [webpack 配置](https://github.com/ant-design/antd-init/blob/f5fb9479ca973fade51fd6754e50f8b3fafbb1df/boilerplate/webpack.config.js#L4-L8) 来解决。 +Ant Design 3.0 对 React 15/16 两个版本提供支持，但是我们强烈建议你升级到 React 16，以便获得更好的性能和遇到更少的问题。 -> 更多 IE8 下使用 React 的相关问题可以参考：https://github.com/xcatliu/react-ie8 +#### IE8 note + +> `antd@2.0` 之后将不再支持 IE8。 ## 自行构建 @@ -199,8 +163,3 @@ import { Button } from 'antd'; - [改变主题](/docs/react/customize-theme) - [使用本地字体](https://github.com/ant-design/antd-init/tree/master/examples/local-iconfont) - -## 小贴士 - -- 你可以享用 `npm` 生态圈里的所有模块。 -- 我们使用了 `babel`，试试用 [ES2015+](http://babeljs.io/blog/2015/06/07/react-on-es6-plus) 的写法来提升编码的愉悦感。 diff --git a/docs/spec/download.en-US.md b/docs/spec/download.en-US.md index d3249a12e5..f567695943 100644 --- a/docs/spec/download.en-US.md +++ b/docs/spec/download.en-US.md @@ -79,15 +79,6 @@ Please find below some of the design resources and tools about Ant Design that w A series prototypes that help creating application structure and user flow
- -
- -
-
- Web Font - Icon font package for your local reference -
-
diff --git a/docs/spec/download.zh-CN.md b/docs/spec/download.zh-CN.md index 5c0c997dc1..1a8e273375 100644 --- a/docs/spec/download.zh-CN.md +++ b/docs/spec/download.zh-CN.md @@ -81,15 +81,6 @@ title: 设计资源 一套页面逻辑原型库，帮你梳理页面逻辑
- -
- -
-
- Web Font - 网络字体图标的本地文件包 -
-