快速上手 · 前端開發手冊

# 在線演示最簡單的使用方式參照以下 CodeSandbox 演示，也推薦 Fork 本例來進行 Bug Report。 [antd CodeSandbox](https://u.ant.design/codesandbox-repro) # 第一個本地實例實際項目開發中，你會需要對 ES2015 和 JSX 代碼的構建、調試、代理、打包部署等一系列工程化的需求。我們提供了一套 **npm + webpack** 的開發工具鏈來輔助開發，下面我們用一個簡單的實例來說明。 ## 1. 安裝腳手架工具 **antd-init** 是一個用于演示 antd 如何使用的腳手架工具，實際業務項目建議使用 **dva-cli** 和 **create-react-app** 進行搭建。 `$ npm install antd-init -g` ## 2. 創建一個項目使用命令行進行初始化。 ~~~ $ mkdir antd-demo && cd antd-demo $ antd-init ~~~ antd-init 會自動安裝 npm 依賴，若有問題則可自行安裝。若安裝緩慢報錯，可嘗試用 `cnpm` 或別的鏡像源自行安裝：`rm -rf node_modules && cnpm install`。 ## 3. 使用組件腳手架會生成一個 Todo 應用實例（一個很有參考價值的 React 上手示例），先不管它，我們用來測試組件。直接用下面的代碼替換 index.js 的內容，用 React 的方式直接使用 antd 組件。 **點評： 1 document.getElementById('root') 是根元素 2 創建組件不用React.createClass,而是繼承React.Component** ~~~ import React from 'react'; import ReactDOM from 'react-dom'; import { LocaleProvider, DatePicker, message } from 'antd'; // 由于 antd 組件的默認文案是英文，所以需要修改為中文 import zhCN from 'antd/lib/locale-provider/zh_CN'; import moment from 'moment'; import 'moment/locale/zh-cn'; moment.locale('zh-cn'); class App extends React.Component { constructor(props) { super(props); this.state = { date: '', }; } handleChange(date) { message.info('您選擇的日期是: ' + date.toString()); this.setState({ date }); } render() { return ( <LocaleProvider locale={zhCN}> <div style={{ width: 400, margin: '100px auto' }}> <DatePicker onChange={value => this.handleChange(value)} /> <div style={{ marginTop: 20 }}>當前日期：{this.state.date.toString()}</div> </div> </LocaleProvider> ); } } ReactDOM.render(<App />, document.getElementById('root')); ~~~ 你可以在左側菜單選用更多組件。 ## 4. 開發調試一鍵啟動調試，訪問 http://127.0.0.1:8000 查看效果。 `$ npm start` ## 5. 構建和部署# `$ npm run build` 入口文件會構建到 dist 目錄中，你可以自由部署到不同環境中進行引用。 > 上述例子用于幫助你理解 Ant Design React 的使用流程，并非真實的開發過程，你可以根據自己的項目開發流程進行接入。 # 兼容性 Ant Design React 支持所有的現代瀏覽器和 IE9+。對于 IE 系列瀏覽器，需要提供 es5-shim 和 es6-shim 等 Polyfills 的支持。如果你使用了 babel，強烈推薦使用 babel-polyfill 和 babel-plugin-transform-runtime 來替代以上兩個 shim。避免同時使用 babel 和 shim 兩種兼容方法，以規避 #6512 中所遇問題如果在 IE 瀏覽器中遇到 startsWith 的問題，請引入 es6-shim 或 babel-polyfill。 ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8">  <link rel="stylesheet" href="/index.css">   <script src="https://as.alipayobjects.com/g/component/??es6-shim/0.35.1/es6-sham.min.js,es6-shim/0.35.1/es6-shim.min.js"></script> </head> <body> </body>  <script src="/common.js"></script>  <script src="/index.js"></script> </html> ~~~ ## IE8 note# > antd@2.0 之后將不再支持 IE8。 IE8 需要配合使用 react@0.14.x 版本。另外，由于 babel@6.x 對 IE8 的支持不佳，你可能會遇到類似 #28 和 #858 的 default 報錯的問題，你也可以參照這個 webpack 配置來解決。 > 更多 IE8 下使用 React 的相關問題可以參考：https://github.com/xcatliu/react-ie8 ## 自行構建如果想自己維護工作流，我們推薦使用 webpack 進行構建和調試。理論上你可以利用 React 生態圈中的各種腳手架進行開發，如果遇到問題可參考我們所使用的 webpack 配置進行定制。如果你使用 parcel，這里也有一個例子可以參考。目前社區也有很多基于 antd 定制的腳手架，歡迎進行試用和貢獻。 ## 按需加載如果你在開發環境的控制臺看到下面的提示，那么你可能使用了 import { Button } from 'antd'; 的寫法引入了 antd 下所有的模塊，這會影響應用的網絡性能。 `You are using a whole package of antd, please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size.` 可以通過以下的寫法來按需加載組件。 ~~~ import Button from 'antd/lib/button'; import 'antd/lib/button/style'; // 或者 antd/lib/button/style/css 加載 css 文件 ~~~ 如果你使用了 babel，那么可以使用 babel-plugin-import 來進行按需加載，加入這個插件后。你可以仍然這么寫： ~~~ import { Button } from 'antd'; ~~~ 插件會幫你轉換成 antd/lib/xxx 的寫法。另外此插件配合 style 屬性可以做到模塊樣式的按需自動加載。 > 注意，babel-plugin-import 的 style 屬性除了引入對應組件的樣式，也會引入一些必要的全局樣式。如果你不需要它們，建議不要使用此屬性。你可以 import 'antd/dist/antd.css 手動引入，并覆蓋全局樣式。