docs: translation of getting-started and introduce (ant-design#2627)

docs/react/getting-started.en-US.md

@@ -0,0 +1,176 @@
+---
+order: 1
+title: Getting Started
+---
+
+Ant Design React is dedicated to providing a **good development experience** for programmers.
+
+---
+
+Before delving into Ant Design React, a good knowledge of [React](http://facebook.github.io/react/) and [JavaScript ES2015](http://babeljs.io/docs/learn-es2015/) is needed.
+
+## First Example
+
+The following CodePen demo is the simplest usage case, and it's also a good habit to fork this demo to provide a re-producible demo while reporting a bug. Please don't use this demo as a scaffold in real world.
+
+- [antd CodePen](http://codepen.io/anon/pen/wGOWGW?editors=001)
+
+## Standard Development Flow
+
+During development, you may need to compile and debug JSX and ES2015 code, and even proxy some of the request to mocked data or some external services. And all of these to be done with a quick feedback provided through hot reloading of changes.
+
+Such features, together with packaging the production version are covered in this work flow.
+
+### 1. Installation
+
+> Please make sure that you had installed [Node.js](https://nodejs.org/en/)(> v4.x) before using `antd-init`.
+
+```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 use scaffold/demo which is provided by community:
+>
+>   - [react-redux-antd](https://github.com/okoala/react-redux-antd)
+>   - [react-antd-admin](https://github.com/fireyy/react-antd-admin)
+>   - [react-antd-redux-router-starter](https://github.com/yuzhouisme/react-antd-redux-router-starter)
+>   - [react-redux-antd-starter](https://github.com/BetaRabbit/react-redux-antd-starter)
+>   - [more](https://github.com/ant-design/ant-design/issues/129)
+
+### 2. Create a New Project
+
+A new project can be created using CLI tools.
+
+```bash
+$ mkdir antd-demo && cd antd-demo
+$ antd-init --type plain-react
+```
+
+`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`.
+
+Replace the content of `src/entries/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 { DatePicker, message } from 'antd';
+
+class App extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      date: '',
+    };
+  }
+  handleChange(date) {
+    message.info('Selected Date: ' + date.toString());
+    this.setState({ date });
+  }
+  render() {
+    return (
+      <div style={{ width: 400, margin: '100px auto' }}>
+        <DatePicker onChange={value => this.handleChange(value)} />
+        <div style={{ marginTop: 20 }}>Date: {this.state.date.toString()}</div>
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(<App />, document.getElementById('root'));
+```
+
+> All the components in antd are listed in the sidebar.
+
+### 4. Development & Debugging
+
+Run your project and visit http://127.0.0.1:8989
+
+```bash
+$ npm start
+```
+
+### 5. Building & Deployment
+
+```bash
+$ npm run build
+```
+
+Entry files will be built and generated in `dist` directory, then we can deploy it to different environments.
+
+> 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.
+
+## Compatibility
+
+Ant Design React supports all the modern browsers and IE8+.
+
+But we need to provide [es5-shim](https://facebook.github.io/react/docs/working-with-the-browser.html#browser-support) and other polyfills for IE8/9, and [babel-polyfill](https://babeljs.io/docs/usage/polyfill/) is a better choice. What's more, use [[email protected]](https://facebook.github.io/react/blog/2016/01/12/discontinuing-ie8-support.html) to support IE8.
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <!-- import stylesheet -->
+    <link rel="stylesheet" href="/index.css">
+    <!-- Polyfills -->
+    <!--[if lt IE 10]>
+    <script src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,es5-shim/4.5.7/es5-shim.min.js,es5-shim/4.5.7/es5-sham.min.js,html5shiv/3.7.2/html5shiv.min.js,media-match/2.0.2/media.match.min.js"></script>
+    <![endif]-->
+  </head>
+  <body>
+  </body>
+  <!-- import common dependencies -->
+  <script src="/common.js"></script>
+  <!-- import entry file -->
+  <script src="/index.js"></script>
+</html>
+```
+
+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 `[email protected]` doesn't support IE8.
+
+[antd-init](http://github.com/ant-design/antd-init) had solved those problems and you can refer to this [webpack config](https://github.com/ant-design/antd-init/blob/f5fb9479ca973fade51fd6754e50f8b3fafbb1df/boilerplate/webpack.config.js#L4-L8).
+
+> More about how to use React in IE8: https://github.com/xcatliu/react-ie8
+
+## Customized Work Flow
+
+If you want to customize your work flow, we recommend to use [webpack](http://webpack.github.io/) to build and debug code.
+
+Also, you can use any [scaffold](https://github.com/enaqx/awesome-react#boilerplates) available in React ecosystem. If you encounter problems, you can use our [webpack config](https://github.com/ant-tool/atool-build/blob/master/src/getWebpackCommonConfig.js) and [modify it](http://ant-tool.github.io/webpack-config.html).
+
+There are some [scaffolds](https://github.com/ant-design/ant-design/issues/129) which have already integrated antd, so you can try and start with one of these, and even contribute.
+
+## Import on Demand
+
+If we import a component like this `import { Button } from 'antd';`, then all the components of antd will be imported. But, we can import component on demand:
+
+```jsx
+import Button from 'antd/lib/button';
+```
+
+If you use `babel`, we recommend to use [babel-plugin-antd](https://github.com/ant-design/babel-plugin-antd). This plugin will convert the following code to the above form:
+
+```jsx
+import { Button } from 'antd';
+```
+
+And this plugin can also load styles on demand. See the [usage](https://github.com/ant-design/babel-plugin-antd#usage) for further details.
+
+## Customization
+
+- [Customize Theme](https://github.com/ant-design/antd-init/tree/master/examples/customize-antd-theme)
+- [Local Iconfont](https://github.com/ant-design/antd-init/tree/master/examples/local-iconfont)
+
+## Tips
+
+- You can use any `npm` modules.
+- We recommend to write code in [ES2015](http://babeljs.io/blog/2015/06/07/react-on-es6-plus) as `babel` has been integrated in our work flow.

docs/react/getting-started.md → docs/react/getting-started.zh-CN.md

@@ -1,6 +1,6 @@
 ---
 order: 1
-english: 快速上手
+title: 快速上手
 ---
 
 Ant Design React 致力于提供给程序员**愉悦**的开发体验。
@@ -11,7 +11,7 @@ Ant Design React 致力于提供给程序员**愉悦**的开发体验。
 
 ## 第一个例子
 
-最简单的试用方式参照以下 CodePen 演示，也推荐 Fork 本例来进行 `Bug Report`，注意不要在实际项目中这样使用。
+最简单的使用方式参照以下 CodePen 演示，也推荐 Fork 本例来进行 `Bug Report`，注意不要在实际项目中这样使用。
 
 - [antd CodePen](http://codepen.io/anon/pen/wGOWGW?editors=001)
 
@@ -112,19 +112,6 @@ Ant Design React 支持所有的现代浏览器和 IE8+。
 
 对于 IE8/9 等浏览器，需要提供 [es5-shim](https://facebook.github.io/react/docs/working-with-the-browser.html#browser-support) 等 Polyfills 的支持，推荐使用 [babel-polyfill](https://babeljs.io/docs/usage/polyfill/)。特别对于 IE8 需要配合使用 [[email protected]](https://facebook.github.io/react/blog/2016/01/12/discontinuing-ie8-support.html) 版本。
 
-<div class="code-line-highlight"></div>
-
-<style>
-.code-line-highlight {
-  box-shadow: 0px 248px 0px rgba(255, 162, 0, 0.1);
-  height: 88px;
-  margin-top: -88px;
-  position: relative;
-  z-index: 1;
-  pointer-events: none;
-}
-</style>
-
 ```html
 <!DOCTYPE html>
 <html>

docs/react/install.en-US.md

@@ -31,6 +31,27 @@ $ npm install antd@beta --save
 
 > **Past releases**：https://github.com/ant-design/ant-design/releases
 
+## Import in Browser
+
+We provide `antd.js` `antd.css` and `antd.min.js` `antd.min.css` under `antd/dist` in antd's npm package, in order to import all the components of antd directly. Also, you can use [npmcdn](https://npmcdn.com/).
+
+> It's not recommended to use the already built files, as you cannot get bugfixes from the dependencies of antd.
+
+#### stable
+
+- https://npmcdn.com/antd/dist/antd.js
+- https://npmcdn.com/antd/dist/antd.css
+- https://npmcdn.com/antd/dist/antd.min.js
+- https://npmcdn.com/antd/dist/antd.min.css
+
+#### beta
+
+- https://npmcdn.com/antd@beta/dist/antd.js
+- https://npmcdn.com/antd@beta/dist/antd.css
+- https://npmcdn.com/antd@beta/dist/antd.min.js
+- https://npmcdn.com/antd@beta/dist/antd.min.css
+
+> Here is an [example](https://github.com/ant-design/antd-init/tree/master/examples/build-antd-standalone) about how to build your own antd.js if you are using antd@<1.0.0.
 
 ## Development tool
 
@@ -42,4 +63,6 @@ $ npm install antd-init -g
 
 Inside an empty folder run `antd-init` to init.
 
+You can explore the latest structure of scaffold [there]((https://github.com/ant-design/antd-init/tree/master/boilerplates)), it is a good habit to watch this repo to get the latest features.
+
 > [More development tools](http://ant-tool.github.io/)。

docs/react/introduce.en-US.md

@@ -0,0 +1,100 @@
+---
+order: 0
+title: Ant Design of React
+---
+
+antd is a set of React components which follow the Ant Design specification. It is designed to help developing RIA such as dashboards or other enterprise-like complex UI needs.
+
+<div class="pic-plus">
+  <img width="150" src="https://t.alipayobjects.com/images/rmsweb/T11aVgXc4eXXXXXXXX.svg">
+  <span>+</span>
+  <img width="160" src="https://t.alipayobjects.com/images/rmsweb/T16xRhXkxbXXXXXXXX.svg">
+</div>
+
+<style>
+.pic-plus > * {
+  display: inline-block!important;
+  vertical-align: middle;
+}
+.pic-plus span {
+  font-size: 30px;
+  color: #aaa;
+  margin: 0 20px;
+}
+</style>
+
+---
+
+## Features
+
+- Using Ant Design, a design language for creating user friendly and beautiful websites.
+- It is a set of high quality UI components and based on [React Component](http://react-component.github.io/badgeboard/).
+- Provides a work flow which is based on npm, webpack, and babel, supporting ES2015 and TypeScript.
+
+## Installation
+
+```bash
+$ npm install antd
+```
+
+## Example
+
+```jsx
+import { DatePicker } from 'antd';
+ReactDOM.render(<DatePicker />, mountNode);
+```
+
+Import style:
+
+```jsx
+import 'antd/dist/antd.css';  // or 'antd/dist/antd.less'
+```
+
+You can use:
+
+- `import DatePicker from 'antd/lib/date-picker';`
+- `import { DatePicker } from 'antd';` when [babel-plugin-antd](https://github.com/ant-design/babel-plugin-antd) is also used.
+
+> babel-plugin-antd supports importing components and styles on demand.
+
+## Version
+
+- Stable: [![npm package](http://img.shields.io/npm/v/antd.svg?style=flat-square)](https://www.npmjs.org/package/antd)
+- Beta: [![](https://cnpmjs.org/badge/v/antd.svg?&tag=beta&subject=npm)](https://www.npmjs.org/package/antd)
+
+## Compatibility
+
+Modern browsers and IE8+.
+
+> [IE8 issues](https://github.com/xcatliu/react-ie8)
+
+## Useful Links
+
+- [Home Page](http://ant.design/)
+- [Change Log](/changelog)
+- [Scaffold](https://github.com/ant-design/antd-init/)
+- [Development Tools](http://ant-tool.github.io/)
+- [React Component](http://react-component.github.io/)
+- [Ant Design Mobile](http://mobile.ant.design)
+- [React Code Style](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-code-style.md)
+- [Component Design Principles](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-design.md)
+- [Design Handbook](https://os.alipayobjects.com/rmsportal/HTXUgPGkyyxEivE.png)
+- [Scaffold and Demo Supported by Community](https://github.com/ant-design/ant-design/issues/129)
+
+## Who is using antd
+
+- Ant Financial
+- Alibaba
+- Koubei
+- China Internet Plus
+- Didi
+
+> If your company or product uses Ant Design, you are welcome to comment in [this issue]((https://github.com/ant-design/ant-design/issues/477)). Thank you!
+
+## Contributing
+
+Please read our [CONTRIBUTING.md](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md) first.
+
+If you have any idea to improve antd, just create a [Pull Request](https://github.com/ant-design/ant-design/pulls). Also, you can also [issue](https://github.com/ant-design/ant-design/issues/new) bugs or [ask questions](https://github.com/ant-design/ant-design/issues).
+
+> Recommend to 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), a smart question will get right answer quickly.

docs/react/introduce.md → docs/react/introduce.zh-CN.md

@@ -1,6 +1,6 @@
 ---
 order: 0
-english: Ant Design of React
+title: Ant Design of React
 ---
 
 这里是 Ant Design 的 React 实现，开发和服务于企业级后台产品。
@@ -50,8 +50,12 @@ ReactDOM.render(<DatePicker />, mountNode);
 import 'antd/dist/antd.css';  // or 'antd/dist/antd.less'
 ```
 
-按需加载可通过此写法 `import DatePicker from 'antd/lib/date-picker'` 或使用插件 [babel-plugin-antd](https://github.com/ant-design/babel-plugin-antd)（此插件支持 js 和 css 同时按需加载）。
+以下两种方法都可以达到按需加载的目的：
 
+- `import DatePicker from 'antd/lib/date-picker'`
+- 配合插件 [babel-plugin-antd](https://github.com/ant-design/babel-plugin-antd) 使用 `import { DatePicker } from 'antd';`
+
+> babel-plugin-antd 支持 js 和 css 同时按需加载。
 
 ## 版本