home/ant-design
2
0
Fork 0
mirror of https://github.com/wahyd4/ant-design.git synced 2026-08-17 00:36:17 +10:00
Code Issues Packages Projects Releases Wiki Activity
Files
340f90bafe29298dada13d431dadcd43c7e79865
ant-design/docs/react/use-with-create-react-app.html
T
afc163 340f90bafe Updates
2017-06-13 15:28:13 +08:00

252 lines
51 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="An enterprise-class UI design language and React-based implementation">
<meta name="description" content="A set of high-quality React components">
<meta name="description" content="One of best React UI library for enterprise background">
<title>Ant Design - A UI Design Language</title>
<script>
(function() {
function isLocalStorageNameSupported() {
var testKey = 'test';
var storage = window.localStorage;
try {
storage.setItem(testKey, '1');
storage.removeItem(testKey);
return true;
} catch (error) {
return false;
}
}
// 优先级提高到所有静态资源的前面，语言不对，加载其他静态资源没意义
var pathname = location.pathname;
function isZhCN(pathname) {
return /-cn\/?$/.test(pathname);
}
function getLocalizedPathname(path, zhCN) {
var pathname = path.startsWith('/') ? path : '/' + path;
if (!zhCN) { // to enUS
return /\/?index-cn/.test(pathname) ? '/' : pathname.replace('-cn', '');
} else if (pathname === '/') {
return '/index-cn';
} else if (pathname.endsWith('/')) {
return pathname.replace(/\/$/, '-cn/');
}
return pathname + '-cn';
}
// 兼容旧的 URL， `?locale=...`
var queryString = location.search;
if (queryString) {
var isZhCNConfig = queryString.indexOf('zh-CN') > -1;
if (isZhCNConfig && !isZhCN(pathname)) {
location.pathname = getLocalizedPathname(pathname, isZhCNConfig)
}
}
// 首页无视链接里面的语言设置 https://github.com/ant-design/ant-design/issues/4552
if (isLocalStorageNameSupported() && (pathname === '/' || pathname === '/index-cn')) {
var lang = (window.localStorage && localStorage.getItem('locale')) || (navigator.language.toLowerCase() === 'zh-cn' ? 'zh-CN' : 'en-US');
// safari is 'zh-cn', while other browser is 'zh-CN';
if ((lang === 'zh-CN') !== isZhCN(pathname)) {
location.pathname = getLocalizedPathname(pathname, lang === 'zh-CN');
}
}
document.documentElement.className += isZhCN(pathname) ? 'zh-cn' : 'en-us';
})()
</script>
<link rel="icon" href="https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.cnpmjs.org/css?family=Lato:400,700|Raleway"/>
<link rel="stylesheet" type="text/css" href="/index-1.css"/>
<link rel="stylesheet" type="text/css" href="/index-2.css"/>
<style id="nprogress-style">
#nprogress { display: none }
</style>
<!--[if lte IE 10]>
<script
src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,media-match/2.0.2/media.match.min.js"></script>
<![endif]-->
<script>
if (!window.Intl) {
document.writeln('<script src="https://as.alipayobjects.com/g/component/intl/1.0.1/??Intl.js,locale-data/jsonp/en.js,locale-data/jsonp/zh.js">' + '<' + '/script>');
}
if (!window.Promise) {
document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"' + '>' + '<' + '/' + 'script>');
}
// Enable Google Analytics
if (!location.port) {
/* eslint-disable */
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-72788897-1', 'auto');
ga('send', 'pageview');
/* eslint-enable */
}
</script>
<!-- Hotjar Tracking Code for ant.design -->
<script>
(function(h,o,t,j,a,r){
h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
h._hjSettings={hjid:473408,hjsv:5};
a=o.getElementsByTagName('head')[0];
r=o.createElement('script');r.async=1;
r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
a.appendChild(r);
})(window,document,'//static.hotjar.com/c/hotjar-','.js?sv=');
</script>
</head>
<body>
<div id="react-content">
<div class="page-wrapper" data-reactroot="" data-reactid="1" data-react-checksum="293050767"><header id="header" class="clearfix" data-reactid="2"><div class="ant-row" data-reactid="3"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-5 ant-col-lg-4" data-reactid="4"><a id="logo" href="/" data-reactid="5"><img alt="logo" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg" data-reactid="6"/><span data-reactid="7">Ant Design</span></a></div><div class="ant-col-xs-0 ant-col-sm-0 ant-col-md-19 ant-col-lg-20" data-reactid="8"><div id="search-box" data-reactid="9"><div class="ant-select ant-select-combobox ant-select-enabled" data-reactid="10"><div class="ant-select-selection
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" data-reactid="11"><div class="ant-select-selection__rendered" data-reactid="12"><div style="display:block;user-select:none;-webkit-user-select:none;" unselectable="unselectable" class="ant-select-selection__placeholder" data-reactid="13">Search Components...</div><ul data-reactid="14"><li class="ant-select-search ant-select-search--inline" data-reactid="15"><div class="ant-select-search__field__wrap" data-reactid="16"><input value="" class="ant-select-search__field" data-reactid="17"/><span class="ant-select-search__field__mirror" data-reactid="18"><!-- react-text: 19 --><!-- /react-text --><!-- react-text: 20 --> <!-- /react-text --></span></div></li></ul></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="21"><b data-reactid="22"></b></span></div></div></div><button type="button" class="ant-btn ant-btn-ghost ant-btn-sm lang" data-reactid="23"><span data-reactid="24">中文</span></button><div class="ant-select-sm version ant-select ant-select-enabled" data-reactid="25"><div class="ant-select-selection
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" data-reactid="26"><div class="ant-select-selection__rendered" data-reactid="27"><div class="ant-select-selection-selected-value" title="2.11.0" style="display:block;opacity:1;" data-reactid="28">2.11.0</div></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="29"><b data-reactid="30"></b></span></div></div><ul class="ant-menu ant-menu-horizontal ant-menu-light ant-menu-root" role="menu" aria-activedescendant="" id="nav" tabindex="0" data-reactid="31"><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="32"><a href="/" data-reactid="33"><span data-reactid="34">Home</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="35"><a href="/docs/spec/introduce" data-reactid="36"><span data-reactid="37">Guidelines</span></a></li><li class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="38"><a href="/docs/react/introduce" data-reactid="39"><span data-reactid="40">Components</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="41"><a href="/docs/pattern/navigation" data-reactid="42"><span data-reactid="43">Patterns</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="44"><a href="/docs/resource/download" data-reactid="45"><span data-reactid="46">Resources</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="47"><a href="//mobile.ant.design" data-reactid="48"><span data-reactid="49">Mobile</span></a></li></ul></div></div></header><div class="main-wrapper" data-reactid="50"><div class="ant-row" data-reactid="51"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6 ant-col-lg-4" data-reactid="52"><ul class="ant-menu ant-menu-inline aside-container ant-menu-light ant-menu-root" role="menu" aria-activedescendant="" tabindex="0" data-reactid="53"><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="54"><a href="/docs/react/introduce" data-reactid="55">Ant Design of React</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="56"><a href="/docs/react/getting-started" data-reactid="57">Getting Started</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="58"><a href="/docs/react/practical-projects" data-reactid="59">Real project with dva</a></li><li style="padding-left:24px;" class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="60"><a href="/docs/react/use-with-create-react-app" data-reactid="61">Use in create-react-app</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="62"><a href="/docs/react/customize-theme" data-reactid="63">Customize Theme</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="64"><a href="/changelog" data-reactid="65">Change Log</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="66"><a href="/docs/react/recommendation" data-reactid="67">Third-Party Libraries</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="68"><a href="/docs/react/i18n" data-reactid="69">Internationalization</a></li><li class="ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu" data-reactid="70"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-expanded="true" aria-owns="Components$Menu" aria-haspopup="true" data-reactid="71"><h4 data-reactid="72">Components</h4></div><ul class="ant-menu ant-menu-inline ant-menu-sub" role="menu" aria-activedescendant="" id="Components$Menu" data-reactid="73"><li class=" ant-menu-item-group" data-reactid="74"><div class="ant-menu-item-group-title" data-reactid="75">General</div><ul class="ant-menu-item-group-list" data-reactid="76"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="77"><a href="/components/button/" data-reactid="78"><span data-reactid="79">Button</span><span class="chinese" data-reactid="80"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="81"><a href="/components/icon/" data-reactid="82"><span data-reactid="83">Icon</span><span class="chinese" data-reactid="84"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="85"><div class="ant-menu-item-group-title" data-reactid="86">Layout</div><ul class="ant-menu-item-group-list" data-reactid="87"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="88"><a href="/components/grid/" data-reactid="89"><span data-reactid="90">Grid</span><span class="chinese" data-reactid="91"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="92"><a href="/components/layout/" data-reactid="93"><span data-reactid="94">Layout</span><span class="chinese" data-reactid="95"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="96"><div class="ant-menu-item-group-title" data-reactid="97">Navigation</div><ul class="ant-menu-item-group-list" data-reactid="98"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="99"><a href="/components/affix/" data-reactid="100"><span data-reactid="101">Affix</span><span class="chinese" data-reactid="102"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="103"><a href="/components/breadcrumb/" data-reactid="104"><span data-reactid="105">Breadcrumb</span><span class="chinese" data-reactid="106"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="107"><a href="/components/back-top/" data-reactid="108"><span data-reactid="109">BackTop</span><span class="chinese" data-reactid="110"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="111"><a href="/components/dropdown/" data-reactid="112"><span data-reactid="113">Dropdown</span><span class="chinese" data-reactid="114"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="115"><a href="/components/menu/" data-reactid="116"><span data-reactid="117">Menu</span><span class="chinese" data-reactid="118"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="119"><a href="/components/pagination/" data-reactid="120"><span data-reactid="121">Pagination</span><span class="chinese" data-reactid="122"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="123"><a href="/components/steps/" data-reactid="124"><span data-reactid="125">Steps</span><span class="chinese" data-reactid="126"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="127"><a href="/components/tabs/" data-reactid="128"><span data-reactid="129">Tabs</span><span class="chinese" data-reactid="130"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="131"><div class="ant-menu-item-group-title" data-reactid="132">Data Entry</div><ul class="ant-menu-item-group-list" data-reactid="133"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="134"><a href="/components/auto-complete/" data-reactid="135"><span data-reactid="136">AutoComplete</span><span class="chinese" data-reactid="137"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="138"><a href="/components/cascader/" data-reactid="139"><span data-reactid="140">Cascader</span><span class="chinese" data-reactid="141"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="142"><a href="/components/checkbox/" data-reactid="143"><span data-reactid="144">Checkbox</span><span class="chinese" data-reactid="145"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="146"><a href="/components/date-picker/" data-reactid="147"><span data-reactid="148">DatePicker</span><span class="chinese" data-reactid="149"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="150"><a href="/components/form/" data-reactid="151"><span data-reactid="152">Form</span><span class="chinese" data-reactid="153"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="154"><a href="/components/input-number/" data-reactid="155"><span data-reactid="156">InputNumber</span><span class="chinese" data-reactid="157"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="158"><a href="/components/input/" data-reactid="159"><span data-reactid="160">Input</span><span class="chinese" data-reactid="161"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="162"><a href="/components/mention/" data-reactid="163"><span data-reactid="164">Mention</span><span class="chinese" data-reactid="165"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="166"><a href="/components/rate/" data-reactid="167"><span data-reactid="168">Rate</span><span class="chinese" data-reactid="169"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="170"><a href="/components/radio/" data-reactid="171"><span data-reactid="172">Radio</span><span class="chinese" data-reactid="173"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="174"><a href="/components/select/" data-reactid="175"><span data-reactid="176">Select</span><span class="chinese" data-reactid="177"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="178"><a href="/components/slider/" data-reactid="179"><span data-reactid="180">Slider</span><span class="chinese" data-reactid="181"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="182"><a href="/components/switch/" data-reactid="183"><span data-reactid="184">Switch</span><span class="chinese" data-reactid="185"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="186"><a href="/components/tree-select/" data-reactid="187"><span data-reactid="188">TreeSelect</span><span class="chinese" data-reactid="189"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="190"><a href="/components/time-picker/" data-reactid="191"><span data-reactid="192">TimePicker</span><span class="chinese" data-reactid="193"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="194"><a href="/components/transfer/" data-reactid="195"><span data-reactid="196">Transfer</span><span class="chinese" data-reactid="197"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="198"><a href="/components/upload/" data-reactid="199"><span data-reactid="200">Upload</span><span class="chinese" data-reactid="201"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="202"><div class="ant-menu-item-group-title" data-reactid="203">Data Display</div><ul class="ant-menu-item-group-list" data-reactid="204"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="205"><a href="/components/avatar/" data-reactid="206"><span data-reactid="207">Avatar</span><span class="chinese" data-reactid="208"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="209"><a href="/components/badge/" data-reactid="210"><span data-reactid="211">Badge</span><span class="chinese" data-reactid="212"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="213"><a href="/components/collapse/" data-reactid="214"><span data-reactid="215">Collapse</span><span class="chinese" data-reactid="216"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="217"><a href="/components/calendar/" data-reactid="218"><span data-reactid="219">Calendar</span><span class="chinese" data-reactid="220"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="221"><a href="/components/card/" data-reactid="222"><span data-reactid="223">Card</span><span class="chinese" data-reactid="224"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="225"><a href="/components/carousel/" data-reactid="226"><span data-reactid="227">Carousel</span><span class="chinese" data-reactid="228"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="229"><a href="/components/popover/" data-reactid="230"><span data-reactid="231">Popover</span><span class="chinese" data-reactid="232"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="233"><a href="/components/tooltip/" data-reactid="234"><span data-reactid="235">Tooltip</span><span class="chinese" data-reactid="236"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="237"><a href="/components/table/" data-reactid="238"><span data-reactid="239">Table</span><span class="chinese" data-reactid="240"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="241"><a href="/components/tag/" data-reactid="242"><span data-reactid="243">Tag</span><span class="chinese" data-reactid="244"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="245"><a href="/components/timeline/" data-reactid="246"><span data-reactid="247">Timeline</span><span class="chinese" data-reactid="248"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="249"><a href="/components/tree/" data-reactid="250"><span data-reactid="251">Tree</span><span class="chinese" data-reactid="252"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="253"><div class="ant-menu-item-group-title" data-reactid="254">Feedback</div><ul class="ant-menu-item-group-list" data-reactid="255"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="256"><a href="/components/alert/" data-reactid="257"><span data-reactid="258">Alert</span><span class="chinese" data-reactid="259"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="260"><a href="/components/modal/" data-reactid="261"><span data-reactid="262">Modal</span><span class="chinese" data-reactid="263"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="264"><a href="/components/message/" data-reactid="265"><span data-reactid="266">Message</span><span class="chinese" data-reactid="267"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="268"><a href="/components/notification/" data-reactid="269"><span data-reactid="270">Notification</span><span class="chinese" data-reactid="271"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="272"><a href="/components/progress/" data-reactid="273"><span data-reactid="274">Progress</span><span class="chinese" data-reactid="275"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="276"><a href="/components/popconfirm/" data-reactid="277"><span data-reactid="278">Popconfirm</span><span class="chinese" data-reactid="279"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="280"><a href="/components/spin/" data-reactid="281"><span data-reactid="282">Spin</span><span class="chinese" data-reactid="283"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="284"><div class="ant-menu-item-group-title" data-reactid="285">Other</div><ul class="ant-menu-item-group-list" data-reactid="286"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="287"><a href="/components/anchor/" data-reactid="288"><span data-reactid="289">Anchor</span><span class="chinese" data-reactid="290"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="291"><a href="/components/locale-provider/" data-reactid="292"><span data-reactid="293">LocaleProvider</span><span class="chinese" data-reactid="294"></span></a></li></ul></li></ul></li></ul></div><div class="main-container ant-col-xs-24 ant-col-sm-24 ant-col-md-18 ant-col-lg-20" data-reactid="295"><article class="markdown" data-reactid="296"><h1 data-reactid="297"><!-- react-text: 298 -->Use in create-react-app<!-- /react-text --><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/docs/react/use-with-create-react-app.en-US.md" data-reactid="299"><i class="anticon anticon-edit" data-reactid="300"></i></a></h1><section class="markdown" data-reactid="301"><p data-reactid="302"><a href="https://github.com/facebookincubator/create-react-app" data-reactid="303"><!-- react-text: 304 -->create-react-app<!-- /react-text --></a><!-- react-text: 305 --> is one of best React application development tool, we are going to use <!-- /react-text --><code data-reactid="306"><!-- react-text: 307 -->antd<!-- /react-text --></code><!-- react-text: 308 --> within it and modify the webpack config for some customized needs.<!-- /react-text --></p></section><section class="toc" data-reactid="309"><ul data-reactid="310"><li data-reactid="311"><a class="bisheng-toc-h2" href="#Install-and-Initialization" title="Install and Initialization" data-reactid="312"><!-- react-text: 313 -->Install and Initialization<!-- /react-text --></a></li><li data-reactid="314"><a class="bisheng-toc-h2" href="#Import-antd" title="Import antd" data-reactid="315"><!-- react-text: 316 -->Import antd<!-- /react-text --></a></li><li data-reactid="317"><a class="bisheng-toc-h2" href="#Advanced-Guides" title="Advanced Guides" data-reactid="318"><!-- react-text: 319 -->Advanced Guides<!-- /react-text --></a></li><li data-reactid="320"><a class="bisheng-toc-h2" href="#Source-code-and-other-boilerplates" title="Source code and other boilerplates" data-reactid="321"><!-- react-text: 322 -->Source code and other boilerplates<!-- /react-text --></a></li></ul></section><section class="markdown" data-reactid="323"><h2 id="Install-and-Initialization" data-reactid="324"><span data-reactid="325"><!-- react-text: 326 -->Install and Initialization<!-- /react-text --></span><a href="#Install-and-Initialization" class="anchor" data-reactid="327">#</a></h2><p data-reactid="328"><!-- react-text: 329 -->We need to install <!-- /react-text --><code data-reactid="330"><!-- react-text: 331 -->create-react-app<!-- /react-text --></code><!-- react-text: 332 --> first, you may need install <!-- /react-text --><a href="https://github.com/yarnpkg/yarn/" data-reactid="333"><!-- react-text: 334 -->yarn<!-- /react-text --></a><!-- react-text: 335 --> too.<!-- /react-text --></p><pre class="language-bash" data-reactid="336"><code data-reactid="337">$ <span class="token function">npm</span> <span class="token function">install</span> -g create-react-app yarn</code></pre><p data-reactid="338"><!-- react-text: 339 -->Create a new project named <!-- /react-text --><code data-reactid="340"><!-- react-text: 341 -->antd-demo<!-- /react-text --></code><!-- react-text: 342 -->.<!-- /react-text --></p><pre class="language-bash" data-reactid="343"><code data-reactid="344">$ create-react-app antd-demo</code></pre><p data-reactid="345"><!-- react-text: 346 -->The tool will create and initialize environment and dependencies automaticly,
please try config your proxy setting or use other npm registry if any network errors happen during it.<!-- /react-text --></p><p data-reactid="347"><!-- react-text: 348 -->Then we go inside <!-- /react-text --><code data-reactid="349"><!-- react-text: 350 -->antd-demo<!-- /react-text --></code><!-- react-text: 351 --> and start it.<!-- /react-text --></p><pre class="language-bash" data-reactid="352"><code data-reactid="353">$ <span class="token function">cd</span> antd-demo
$ yarn start</code></pre><p data-reactid="354"><!-- react-text: 355 -->Open browser at <!-- /react-text --><a href="http://localhost:3000/" data-reactid="356"><!-- react-text: 357 -->http://localhost:3000/<!-- /react-text --></a><!-- react-text: 358 -->, it renders a header saying &quot;Welcome to React&quot; on the page.<!-- /react-text --></p><h2 id="Import-antd" data-reactid="359"><span data-reactid="360"><!-- react-text: 361 -->Import antd<!-- /react-text --></span><a href="#Import-antd" class="anchor" data-reactid="362">#</a></h2><p data-reactid="363"><!-- react-text: 364 -->It is the default directory structure below.<!-- /react-text --></p><pre class="language-null" data-reactid="365"><code data-reactid="366">├── README<span class="token punctuation">.</span>md
├── package<span class="token punctuation">.</span>json
├── public
│ ├── favicon<span class="token punctuation">.</span>ico
│ └── index<span class="token punctuation">.</span>html
├── src
│ ├── App<span class="token punctuation">.</span>css
│ ├── App<span class="token punctuation">.</span>js
│ ├── App<span class="token punctuation">.</span>test<span class="token punctuation">.</span>js
│ ├── index<span class="token punctuation">.</span>css
│ ├── index<span class="token punctuation">.</span>js
│ └── logo<span class="token punctuation">.</span>svg
└── yarn<span class="token punctuation">.</span>lock</code></pre><p data-reactid="367"><!-- react-text: 368 -->Now we install <!-- /react-text --><code data-reactid="369"><!-- react-text: 370 -->antd<!-- /react-text --></code><!-- react-text: 371 --> from yarn or npm.<!-- /react-text --></p><pre class="language-bash" data-reactid="372"><code data-reactid="373">$ yarn add antd</code></pre><p data-reactid="374"><!-- react-text: 375 -->Modify <!-- /react-text --><code data-reactid="376"><!-- react-text: 377 -->src/App.js<!-- /react-text --></code><!-- react-text: 378 -->, import Button component from <!-- /react-text --><code data-reactid="379"><!-- react-text: 380 -->antd<!-- /react-text --></code><!-- react-text: 381 -->.<!-- /react-text --></p><pre class="language-jsx" data-reactid="382"><code data-reactid="383"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> Button <span class="token keyword">from</span> <span class="token string">'antd/lib/button'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token string">'./App.css'</span><span class="token punctuation">;</span>
<span class="token keyword">class</span> <span class="token class-name">App</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>App<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> App<span class="token punctuation">;</span></code></pre><p data-reactid="384"><!-- react-text: 385 -->Add <!-- /react-text --><code data-reactid="386"><!-- react-text: 387 -->antd/dist/antd.css<!-- /react-text --></code><!-- react-text: 388 --> at the top of <!-- /react-text --><code data-reactid="389"><!-- react-text: 390 -->src/App.css<!-- /react-text --></code><!-- react-text: 391 -->.<!-- /react-text --></p><pre class="language-css" data-reactid="392"><code data-reactid="393"><span class="token atrule"><span class="token rule">@import</span> <span class="token string">'~antd/dist/antd.css'</span><span class="token punctuation">;</span></span>
<span class="token selector"><span class="token class">.App</span> </span><span class="token punctuation">{</span>
<span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token number">...</span></code></pre><p data-reactid="394"><!-- react-text: 395 -->Ok, you now see a blue primary button displaying in page now, next you can choose any components of <!-- /react-text --><code data-reactid="396"><!-- react-text: 397 -->antd<!-- /react-text --></code><!-- react-text: 398 --> to develop your application. Visit other workflow of <!-- /react-text --><code data-reactid="399"><!-- react-text: 400 -->create-react-app<!-- /react-text --></code><!-- react-text: 401 --> at its <!-- /react-text --><a href="https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md" data-reactid="402"><!-- react-text: 403 -->User Guide <!-- /react-text --></a><!-- react-text: 404 -->.<!-- /react-text --></p><h2 id="Advanced-Guides" data-reactid="405"><span data-reactid="406"><!-- react-text: 407 -->Advanced Guides<!-- /react-text --></span><a href="#Advanced-Guides" class="anchor" data-reactid="408">#</a></h2><p data-reactid="409"><!-- react-text: 410 -->We are successfully running antd components now. But in the real world, there are still lots of problems about antd-demo.
For instance, we actually import all styles of components in the project which maybe a network perfermance issue.<!-- /react-text --></p><p data-reactid="411"><!-- react-text: 412 -->Sometimes it could be necessary to customize the default webpack config. We can achieve that by using <!-- /react-text --><code data-reactid="413"><!-- react-text: 414 -->eject<!-- /react-text --></code><!-- react-text: 415 --> script command.<!-- /react-text --></p><pre class="language-bash" data-reactid="416"><code data-reactid="417">$ yarn run <span class="token function">eject</span></code></pre><h3 id="Use-babel-plugin-import" data-reactid="418"><span data-reactid="419"><!-- react-text: 420 -->Use babel-plugin-import<!-- /react-text --></span><a href="#Use-babel-plugin-import" class="anchor" data-reactid="421">#</a></h3><p data-reactid="422"><a href="https://github.com/ant-design/babel-plugin-import" data-reactid="423"><!-- react-text: 424 -->babel-plugin-import<!-- /react-text --></a><!-- react-text: 425 --> is a babel plugin for importing components on demand (<!-- /react-text --><a href="/docs/react/getting-started#Import-on-Demand" data-reactid="426">principle</a><!-- react-text: 427 -->). After eject all config files to antd-demo, we allowed to install it and modify <!-- /react-text --><code data-reactid="428"><!-- react-text: 429 -->config/webpack.config.dev.js<!-- /react-text --></code><!-- react-text: 430 --> now.<!-- /react-text --></p><pre class="language-bash" data-reactid="431"><code data-reactid="432">$ yarn add babel-plugin-import --dev</code></pre><pre class="language-diff" data-reactid="433"><code data-reactid="434">// Process JS with Babel.
{
test: /\.(js|jsx)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
<span class="token inserted">+ plugins: [</span>
<span class="token inserted">+ ['import', { libraryName: 'antd', style: 'css' }],</span>
<span class="token inserted">+ ],</span>
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds.
cacheDirectory: true
}
},</code></pre><blockquote data-reactid="435"><p data-reactid="436"><!-- react-text: 437 -->Note: because there is no <!-- /react-text --><code data-reactid="438"><!-- react-text: 439 -->.babelrc<!-- /react-text --></code><!-- react-text: 440 --> file after config eject, so we have to put the babel option into <!-- /react-text --><code data-reactid="441"><!-- react-text: 442 -->webpack.config.js<!-- /react-text --></code><!-- react-text: 443 --> or <!-- /react-text --><code data-reactid="444"><!-- react-text: 445 -->babel<!-- /react-text --></code><!-- react-text: 446 --> field of <!-- /react-text --><code data-reactid="447"><!-- react-text: 448 -->package.json<!-- /react-text --></code><!-- react-text: 449 -->.<!-- /react-text --></p></blockquote><p data-reactid="450"><!-- react-text: 451 -->Remove the <!-- /react-text --><code data-reactid="452"><!-- react-text: 453 -->@import &#x27;~antd/dist/antd.css&#x27;;<!-- /react-text --></code><!-- react-text: 454 --> statement added before because <!-- /react-text --><code data-reactid="455"><!-- react-text: 456 -->babel-plugin-import<!-- /react-text --></code><!-- react-text: 457 --> will import styles and import components like below:<!-- /react-text --></p><pre class="language-diff" data-reactid="458"><code data-reactid="459"> // scr/App.js
import React, { Component } from 'react';
<span class="token deleted">- import Button from 'antd/lib/button';</span>
<span class="token inserted">+ import { Button } from 'antd';</span>
import './App.css';
class App extends Component {
render() {
return (
&lt;div className="App">
&lt;Button type="primary">Button&lt;/Button>
&lt;/div>
);
}
}
export default App;</code></pre><p data-reactid="460"><!-- react-text: 461 -->Then reboot <!-- /react-text --><code data-reactid="462"><!-- react-text: 463 -->yarn start<!-- /react-text --></code><!-- react-text: 464 --> and visit demo page, you should not find any <!-- /react-text --><a href="https://zos.alipayobjects.com/rmsportal/vgcHJRVZFmPjAawwVoXK.png" data-reactid="465"><!-- react-text: 466 -->warning message<!-- /react-text --></a><!-- react-text: 467 --> in console which prove the <!-- /react-text --><code data-reactid="468"><!-- react-text: 469 -->import on demand<!-- /react-text --></code><!-- react-text: 470 --> config is working now. You will find more info about it in <!-- /react-text --><a href="/docs/react/getting-started#Import-on-Demand" data-reactid="471">this guide</a><!-- react-text: 472 -->.<!-- /react-text --></p><h3 id="Customize-Theme" data-reactid="473"><span data-reactid="474"><!-- react-text: 475 -->Customize Theme<!-- /react-text --></span><a href="#Customize-Theme" class="anchor" data-reactid="476">#</a></h3><p data-reactid="477"><!-- react-text: 478 -->According to <!-- /react-text --><a href="/docs/react/customize-theme" data-reactid="479">Customize Theme documentation</a><!-- react-text: 480 -->, we need <!-- /react-text --><code data-reactid="481"><!-- react-text: 482 -->less<!-- /react-text --></code><!-- react-text: 483 --> variables modify ability of <!-- /react-text --><a href="https://github.com/webpack/less-loader" data-reactid="484"><!-- react-text: 485 -->less-loader<!-- /react-text --></a><!-- react-text: 486 -->, so we add it.<!-- /react-text --></p><pre class="language-bash" data-reactid="487"><code data-reactid="488">$ yarn add <span class="token function">less</span> less-loader --dev</code></pre><pre class="language-diff" data-reactid="489"><code data-reactid="490"> {
exclude: [
/\.html$/,
/\.(js|jsx)$/,
/\.css$/,
<span class="token inserted">+ /\.less$/,</span>
/\.json$/,
/\.bmp$/,
/\.gif$/,
/\.jpe?g$/,
/\.png$/,
],
loader: require.resolve('file-loader'),
options: {
name: 'static/media/[name].[hash:8].[ext]',
},
}
...
// Process JS with Babel.
{
test: /\.(js|jsx)$/,
include: paths.appSrc,
loader: 'babel',
options: {
plugins: [
<span class="token deleted">- ['import', [{ libraryName: 'antd', style: 'css' }]],</span>
<span class="token inserted">+ ['import', [{ libraryName: 'antd', style: true }]], // import less</span>
],
},
...
<span class="token inserted">+ // Parse less files and modify variables</span>
<span class="token inserted">+ {</span>
<span class="token inserted">+ test: /\.less$/,</span>
<span class="token inserted">+ use: [</span>
<span class="token inserted">+ require.resolve('style-loader'),</span>
<span class="token inserted">+ require.resolve('css-loader'),</span>
<span class="token inserted">+ {</span>
<span class="token inserted">+ loader: require.resolve('postcss-loader'),</span>
<span class="token inserted">+ options: {</span>
<span class="token inserted">+ ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options</span>
<span class="token inserted">+ plugins: () => [</span>
<span class="token inserted">+ require('postcss-flexbugs-fixes'),</span>
<span class="token inserted">+ autoprefixer({</span>
<span class="token inserted">+ browsers: [</span>
<span class="token inserted">+ '>1%',</span>
<span class="token inserted">+ 'last 4 versions',</span>
<span class="token inserted">+ 'Firefox ESR',</span>
<span class="token inserted">+ 'not ie &lt; 9', // React doesn't support IE8 anyway</span>
<span class="token inserted">+ ],</span>
<span class="token inserted">+ flexbox: 'no-2009',</span>
<span class="token inserted">+ }),</span>
<span class="token inserted">+ ],</span>
<span class="token inserted">+ },</span>
<span class="token inserted">+ },</span>
<span class="token inserted">+ {</span>
<span class="token inserted">+ loader: require.resolve('less-loader'),</span>
<span class="token inserted">+ options: {</span>
<span class="token inserted">+ modifyVars: { "@primary-color": "#1DA57A" },</span>
<span class="token inserted">+ },</span>
<span class="token inserted">+ },</span>
<span class="token inserted">+ ],</span>
<span class="token inserted">+ },</span>
],</code></pre><p data-reactid="491"><!-- react-text: 492 -->We use <!-- /react-text --><code data-reactid="493"><!-- react-text: 494 -->modifyVars<!-- /react-text --></code><!-- react-text: 495 --> option of <!-- /react-text --><a href="https://github.com/webpack/less-loader#less-options" data-reactid="496"><!-- react-text: 497 -->less-loader<!-- /react-text --></a><!-- react-text: 498 --> here, you can see a green button rendered on the page after reboot start server.<!-- /react-text --></p><blockquote data-reactid="499"><p data-reactid="500"><!-- react-text: 501 -->Note, we only modified <!-- /react-text --><code data-reactid="502"><!-- react-text: 503 -->webpack.config.dev.js<!-- /react-text --></code><!-- react-text: 504 --> now, if you wish this config working on production environment, you need to update <!-- /react-text --><code data-reactid="505"><!-- react-text: 506 -->webpack.config.prod.js<!-- /react-text --></code><!-- react-text: 507 --> as well.<!-- /react-text --></p></blockquote><h2 id="Source-code-and-other-boilerplates" data-reactid="508"><span data-reactid="509"><!-- react-text: 510 -->Source code and other boilerplates<!-- /react-text --></span><a href="#Source-code-and-other-boilerplates" class="anchor" data-reactid="511">#</a></h2><p data-reactid="512"><!-- react-text: 513 -->Finally, we use antd with create-react-app successfully, you can learn these practice for your own webpack workflow too, and find more webpack config in the <!-- /react-text --><a href="https://github.com/ant-tool/atool-build/blob/master/src/getWebpackCommonConfig.js" data-reactid="514"><!-- react-text: 515 -->atool-build<!-- /react-text --></a><!-- react-text: 516 -->. (For instance, add <!-- /react-text --><a href="https://github.com/ant-tool/atool-build/blob/e4bd2959689b6a95cb5c1c854a5db8c98676bdb3/src/getWebpackCommonConfig.js#L90" data-reactid="517"><!-- react-text: 518 -->moment noParse<!-- /react-text --></a><!-- react-text: 519 --> to avoid loading all language files)<!-- /react-text --></p><p data-reactid="520"><!-- react-text: 521 -->There are a lot of great boilerplates like create-react-app in React community. There are some source code samples of importing antd in them if you encounter some problems.<!-- /react-text --></p><ul data-reactid="522"><li data-reactid="523"><p data-reactid="524"><a href="https://github.com/ant-design/create-react-app-antd" data-reactid="525"><!-- react-text: 526 -->create-react-app-antd<!-- /react-text --></a></p></li><li data-reactid="527"><p data-reactid="528"><a href="https://github.com/ant-design/react-boilerplate" data-reactid="529"><!-- react-text: 530 -->react-boilerplate/react-boilerplate<!-- /react-text --></a></p></li><li data-reactid="531"><p data-reactid="532"><a href="https://github.com/ant-design/react-starter-kit" data-reactid="533"><!-- react-text: 534 -->kriasoft/react-starter-kit<!-- /react-text --></a></p></li></ul></section><section class="markdown api-container" data-reactid="535"></section></article></div></div><div class="ant-row" data-reactid="536"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-18 ant-col-md-offset-6 ant-col-lg-20 ant-col-lg-offset-4" data-reactid="537"><section class="prev-next-nav" data-reactid="538"><a class="prev-page" href="/docs/react/practical-projects" data-reactid="539">Real project with dva</a><a class="next-page" href="/docs/react/customize-theme" data-reactid="540">Customize Theme</a></section></div></div></div><footer id="footer" data-reactid="541"><ul data-reactid="542"><li data-reactid="543"><h2 data-reactid="544"><i class="anticon anticon-github" data-reactid="545"></i><!-- react-text: 546 --> GitHub<!-- /react-text --></h2><div data-reactid="547"><a target="_blank " href="https://github.com/ant-design/ant-design" data-reactid="548"><span data-reactid="549">Repository</span></a></div><div data-reactid="550"><a target="_blank " href="https://ant.design/docs/react/customize-theme" data-reactid="551"><span data-reactid="552">Customize Theme</span></a></div><div data-reactid="553"><a target="_blank " href="https://github.com/websemantics/awesome-ant-design" data-reactid="554"><span data-reactid="555">Awesome Ant Design</span></a></div></li><li data-reactid="556"><h2 data-reactid="557"><i class="anticon anticon-link" data-reactid="558"></i><!-- react-text: 559 --> <!-- /react-text --><span data-reactid="560">Links</span></h2><div data-reactid="561"><a href="https://design.alipay.com/" data-reactid="562"><span data-reactid="563">Ant Financial Design Platform</span></a></div><div data-reactid="564"><a href="http://mobile.ant.design" data-reactid="565">Ant Design Mobile</a><span data-reactid="566"> - </span><span data-reactid="567">Mobile UI</span></div><div data-reactid="568"><a href="http://scaffold.ant.design" data-reactid="569">Scaffolds</a><span data-reactid="570"> - </span><span data-reactid="571">Scaffold Market</span></div><div data-reactid="572"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva" data-reactid="573">dva</a><!-- react-text: 574 --> - <!-- /react-text --><span data-reactid="575">Framework</span></div><div data-reactid="576"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva-cli" data-reactid="577">dva-cli</a><!-- react-text: 578 --> -<!-- /react-text --><span data-reactid="579">Developer Tools</span></div><div data-reactid="580"><a target="_blank" rel="noopener noreferrer" href="https://eggjs.org/" data-reactid="581">Egg</a><span data-reactid="582"> - </span><span data-reactid="583">Enterprise Node Framework</span></div><div data-reactid="584"><a target="_blank" rel="noopener noreferrer" href="https://antv.alipay.com/" data-reactid="585">AntV</a><span data-reactid="586"> - </span><span data-reactid="587">Data Visualization</span></div><div data-reactid="588"><a target="_blank" rel="noopener noreferrer" href="http://motion.ant.design" data-reactid="589">Ant Motion</a><span data-reactid="590"> - </span><span data-reactid="591">Motion Solution</span></div><div data-reactid="592"><a target="_blank" rel="noopener noreferrer" href="http://library.ant.design/" data-reactid="593">AntD Library</a><span data-reactid="594"> - </span><span data-reactid="595">Axure library</span></div><div data-reactid="596"><a target="_blank" rel="noopener noreferrer" href="http://ux.ant.design" data-reactid="597">Ant UX</a><span data-reactid="598"> - </span><span data-reactid="599">Sitemap Template</span></div></li><li data-reactid="600"><h2 data-reactid="601"><i class="anticon anticon-customer-service" data-reactid="602"></i><!-- react-text: 603 --> <!-- /react-text --><span data-reactid="604">Community</span></h2><div data-reactid="605"><a href="/changelog" data-reactid="606"><span data-reactid="607">Change Log</span></a></div><div data-reactid="608"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/wiki/FAQ" data-reactid="609"><span data-reactid="610">FAQ</span></a></div><div data-reactid="611"><a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design" data-reactid="612"><span data-reactid="613">Chat Room (中文)</span></a></div><div data-reactid="614"><a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design-english" data-reactid="615"><span data-reactid="616">Chat Room (English)</span></a></div><div data-reactid="617"><a target="_blank" rel="noopener noreferrer" href="http://new-issue.ant.design/" data-reactid="618"><span data-reactid="619">Bug Report</span></a></div><div data-reactid="620"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/issues" data-reactid="621"><span data-reactid="622">Issues</span></a></div><div data-reactid="623"><a target="_blank" rel="noopener noreferrer" href="http://stackoverflow.com/questions/tagged/antd" data-reactid="624"><span data-reactid="625">StackOverflow</span></a></div><div data-reactid="626"><a target="_blank" rel="noopener noreferrer" href="https://segmentfault.com/t/antd" data-reactid="627"><span data-reactid="628">SegmentFault</span></a></div></li><li data-reactid="629"><h2 data-reactid="630"><!-- react-text: 631 -->Copyright © <!-- /react-text --><!-- react-text: 632 -->2017<!-- /react-text --></h2><div data-reactid="633"><span data-reactid="634">Created by AFUX</span></div><div data-reactid="635"><!-- react-text: 636 -->Built with <!-- /react-text --><a target="_blank" rel="noopener noreferrer" href="https://github.com/benjycui/bisheng" data-reactid="637">BiSheng</a></div></li></ul></footer></div>
</div>
<script src="/common.js"></script>
<script src="/index.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink