mirror of
https://github.com/wahyd4/ant-design.git
synced 2026-08-10 05:16:08 +10:00
223 lines
60 KiB
HTML
223 lines
60 KiB
HTML
<!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="1174681274"><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.9.3" style="display:block;opacity:1;" data-reactid="28">2.9.3</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">Guidlines</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></ul></div></div></header><div class="main-wrapper" data-reactid="47"><div class="ant-row" data-reactid="48"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6 ant-col-lg-4" data-reactid="49"><ul class="ant-menu ant-menu-inline aside-container ant-menu-light ant-menu-root" role="menu" aria-activedescendant="" tabindex="0" data-reactid="50"><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="51"><a href="/docs/react/introduce" data-reactid="52">Ant Design of React</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="53"><a href="/docs/react/getting-started" data-reactid="54">Getting Started</a></li><li style="padding-left:24px;" class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="55"><a href="/docs/react/practical-projects" data-reactid="56">Real project with dva</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="57"><a href="/docs/react/use-with-create-react-app" data-reactid="58">Use in create-react-app</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="59"><a href="/docs/react/customize-theme" data-reactid="60">Customize Theme</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="61"><a href="/changelog" data-reactid="62">Change Log</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="63"><a href="/docs/react/recommendation" data-reactid="64">Third-Party Libraries</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="65"><a href="/docs/react/i18n" data-reactid="66">Internationalization</a></li><li class="ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu" data-reactid="67"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-expanded="true" aria-owns="Components$Menu" aria-haspopup="true" data-reactid="68"><h4 data-reactid="69">Components</h4></div><ul class="ant-menu ant-menu-inline ant-menu-sub" role="menu" aria-activedescendant="" id="Components$Menu" data-reactid="70"><li class=" ant-menu-item-group" data-reactid="71"><div class="ant-menu-item-group-title" data-reactid="72">General</div><ul class="ant-menu-item-group-list" data-reactid="73"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="74"><a href="/components/button/" data-reactid="75"><span data-reactid="76">Button</span><span class="chinese" data-reactid="77"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="78"><a href="/components/icon/" data-reactid="79"><span data-reactid="80">Icon</span><span class="chinese" data-reactid="81"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="82"><div class="ant-menu-item-group-title" data-reactid="83">Layout</div><ul class="ant-menu-item-group-list" data-reactid="84"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="85"><a href="/components/grid/" data-reactid="86"><span data-reactid="87">Grid</span><span class="chinese" data-reactid="88"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="89"><a href="/components/layout/" data-reactid="90"><span data-reactid="91">Layout</span><span class="chinese" data-reactid="92"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="93"><div class="ant-menu-item-group-title" data-reactid="94">Navigation</div><ul class="ant-menu-item-group-list" data-reactid="95"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="96"><a href="/components/affix/" data-reactid="97"><span data-reactid="98">Affix</span><span class="chinese" data-reactid="99"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="100"><a href="/components/breadcrumb/" data-reactid="101"><span data-reactid="102">Breadcrumb</span><span class="chinese" data-reactid="103"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="104"><a href="/components/back-top/" data-reactid="105"><span data-reactid="106">BackTop</span><span class="chinese" data-reactid="107"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="108"><a href="/components/dropdown/" data-reactid="109"><span data-reactid="110">Dropdown</span><span class="chinese" data-reactid="111"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="112"><a href="/components/menu/" data-reactid="113"><span data-reactid="114">Menu</span><span class="chinese" data-reactid="115"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="116"><a href="/components/pagination/" data-reactid="117"><span data-reactid="118">Pagination</span><span class="chinese" data-reactid="119"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="120"><a href="/components/steps/" data-reactid="121"><span data-reactid="122">Steps</span><span class="chinese" data-reactid="123"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="124"><a href="/components/tabs/" data-reactid="125"><span data-reactid="126">Tabs</span><span class="chinese" data-reactid="127"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="128"><div class="ant-menu-item-group-title" data-reactid="129">Data Entry</div><ul class="ant-menu-item-group-list" data-reactid="130"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="131"><a href="/components/auto-complete/" data-reactid="132"><span data-reactid="133">AutoComplete</span><span class="chinese" data-reactid="134"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="135"><a href="/components/cascader/" data-reactid="136"><span data-reactid="137">Cascader</span><span class="chinese" data-reactid="138"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="139"><a href="/components/checkbox/" data-reactid="140"><span data-reactid="141">Checkbox</span><span class="chinese" data-reactid="142"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="143"><a href="/components/date-picker/" data-reactid="144"><span data-reactid="145">DatePicker</span><span class="chinese" data-reactid="146"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="147"><a href="/components/form/" data-reactid="148"><span data-reactid="149">Form</span><span class="chinese" data-reactid="150"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="151"><a href="/components/input-number/" data-reactid="152"><span data-reactid="153">InputNumber</span><span class="chinese" data-reactid="154"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="155"><a href="/components/input/" data-reactid="156"><span data-reactid="157">Input</span><span class="chinese" data-reactid="158"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="159"><a href="/components/mention/" data-reactid="160"><span data-reactid="161">Mention</span><span class="chinese" data-reactid="162"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="163"><a href="/components/rate/" data-reactid="164"><span data-reactid="165">Rate</span><span class="chinese" data-reactid="166"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="167"><a href="/components/radio/" data-reactid="168"><span data-reactid="169">Radio</span><span class="chinese" data-reactid="170"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="171"><a href="/components/select/" data-reactid="172"><span data-reactid="173">Select</span><span class="chinese" data-reactid="174"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="175"><a href="/components/slider/" data-reactid="176"><span data-reactid="177">Slider</span><span class="chinese" data-reactid="178"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="179"><a href="/components/switch/" data-reactid="180"><span data-reactid="181">Switch</span><span class="chinese" data-reactid="182"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="183"><a href="/components/tree-select/" data-reactid="184"><span data-reactid="185">TreeSelect</span><span class="chinese" data-reactid="186"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="187"><a href="/components/time-picker/" data-reactid="188"><span data-reactid="189">TimePicker</span><span class="chinese" data-reactid="190"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="191"><a href="/components/transfer/" data-reactid="192"><span data-reactid="193">Transfer</span><span class="chinese" data-reactid="194"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="195"><a href="/components/upload/" data-reactid="196"><span data-reactid="197">Upload</span><span class="chinese" data-reactid="198"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="199"><div class="ant-menu-item-group-title" data-reactid="200">Data Display</div><ul class="ant-menu-item-group-list" data-reactid="201"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="202"><a href="/components/badge/" data-reactid="203"><span data-reactid="204">Badge</span><span class="chinese" data-reactid="205"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="206"><a href="/components/calendar/" data-reactid="207"><span data-reactid="208">Calendar</span><span class="chinese" data-reactid="209"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="210"><a href="/components/card/" data-reactid="211"><span data-reactid="212">Card</span><span class="chinese" data-reactid="213"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="214"><a href="/components/carousel/" data-reactid="215"><span data-reactid="216">Carousel</span><span class="chinese" data-reactid="217"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="218"><a href="/components/collapse/" data-reactid="219"><span data-reactid="220">Collapse</span><span class="chinese" data-reactid="221"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="222"><a href="/components/popover/" data-reactid="223"><span data-reactid="224">Popover</span><span class="chinese" data-reactid="225"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="226"><a href="/components/tooltip/" data-reactid="227"><span data-reactid="228">Tooltip</span><span class="chinese" data-reactid="229"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="230"><a href="/components/table/" data-reactid="231"><span data-reactid="232">Table</span><span class="chinese" data-reactid="233"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="234"><a href="/components/tag/" data-reactid="235"><span data-reactid="236">Tag</span><span class="chinese" data-reactid="237"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="238"><a href="/components/timeline/" data-reactid="239"><span data-reactid="240">Timeline</span><span class="chinese" data-reactid="241"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="242"><a href="/components/tree/" data-reactid="243"><span data-reactid="244">Tree</span><span class="chinese" data-reactid="245"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="246"><div class="ant-menu-item-group-title" data-reactid="247">Feedback</div><ul class="ant-menu-item-group-list" data-reactid="248"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="249"><a href="/components/alert/" data-reactid="250"><span data-reactid="251">Alert</span><span class="chinese" data-reactid="252"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="253"><a href="/components/modal/" data-reactid="254"><span data-reactid="255">Modal</span><span class="chinese" data-reactid="256"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="257"><a href="/components/message/" data-reactid="258"><span data-reactid="259">Message</span><span class="chinese" data-reactid="260"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="261"><a href="/components/notification/" data-reactid="262"><span data-reactid="263">Notification</span><span class="chinese" data-reactid="264"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="265"><a href="/components/progress/" data-reactid="266"><span data-reactid="267">Progress</span><span class="chinese" data-reactid="268"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="269"><a href="/components/popconfirm/" data-reactid="270"><span data-reactid="271">Popconfirm</span><span class="chinese" data-reactid="272"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="273"><a href="/components/spin/" data-reactid="274"><span data-reactid="275">Spin</span><span class="chinese" data-reactid="276"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="277"><div class="ant-menu-item-group-title" data-reactid="278">Other</div><ul class="ant-menu-item-group-list" data-reactid="279"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="280"><a href="/components/anchor/" data-reactid="281"><span data-reactid="282">Anchor</span><span class="chinese" data-reactid="283"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="284"><a href="/components/locale-provider/" data-reactid="285"><span data-reactid="286">LocaleProvider</span><span class="chinese" data-reactid="287"></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="288"><article class="markdown" data-reactid="289"><h1 data-reactid="290"><!-- react-text: 291 -->Real project with dva<!-- /react-text --><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/docs/react/practical-projects.en-US.md" data-reactid="292"><i class="anticon anticon-edit" data-reactid="293"></i></a></h1><section class="markdown" data-reactid="294"><p data-reactid="295"><a href="https://github.com/dvajs/dva" data-reactid="296"><!-- react-text: 297 -->dva<!-- /react-text --></a><!-- react-text: 298 --> is a React and redux based, lightweight and elm-style framework, which supports side effects, hot module replacement, dynamic on demand, react-native, SSR. And it has been widely used in production environment.<!-- /react-text --></p><p data-reactid="299"><!-- react-text: 300 -->This article will guide you to create a simple application from zero using dva and antd.<!-- /react-text --></p><p data-reactid="301"><!-- react-text: 302 -->Include the following:<!-- /react-text --></p></section><section class="toc" data-reactid="303"><ul data-reactid="304"><li data-reactid="305"><a class="bisheng-toc-h2" href="#Install-dva-cli" title="Install dva-cli" data-reactid="306"><!-- react-text: 307 -->Install dva-cli<!-- /react-text --></a></li><li data-reactid="308"><a class="bisheng-toc-h2" href="#Create-New-App" title="Create New App" data-reactid="309"><!-- react-text: 310 -->Create New App<!-- /react-text --></a></li><li data-reactid="311"><a class="bisheng-toc-h2" href="#Integrate-antd" title="Integrate antd" data-reactid="312"><!-- react-text: 313 -->Integrate antd<!-- /react-text --></a></li><li data-reactid="314"><a class="bisheng-toc-h2" href="#Define-Router" title="Define Router" data-reactid="315"><!-- react-text: 316 -->Define Router<!-- /react-text --></a></li><li data-reactid="317"><a class="bisheng-toc-h2" href="#Write-UI-Components" title="Write UI Components" data-reactid="318"><!-- react-text: 319 -->Write UI Components<!-- /react-text --></a></li><li data-reactid="320"><a class="bisheng-toc-h2" href="#Define-Model" title="Define Model" data-reactid="321"><!-- react-text: 322 -->Define Model<!-- /react-text --></a></li><li data-reactid="323"><a class="bisheng-toc-h2" href="#Connect" title="Connect" data-reactid="324"><!-- react-text: 325 -->Connect<!-- /react-text --></a></li><li data-reactid="326"><a class="bisheng-toc-h2" href="#Build" title="Build" data-reactid="327"><!-- react-text: 328 -->Build<!-- /react-text --></a></li><li data-reactid="329"><a class="bisheng-toc-h2" href="#What's-Next" title="What's Next" data-reactid="330"><!-- react-text: 331 -->What's Next<!-- /react-text --></a></li></ul></section><section class="markdown" data-reactid="332"><h2 id="Install-dva-cli" data-reactid="333"><span data-reactid="334"><!-- react-text: 335 -->Install dva-cli<!-- /react-text --></span><a href="#Install-dva-cli" class="anchor" data-reactid="336">#</a></h2><p data-reactid="337"><!-- react-text: 338 -->Install dva-cli with npm, and make sure the version is larger then <!-- /react-text --><code data-reactid="339"><!-- react-text: 340 -->0.7.0<!-- /react-text --></code><!-- react-text: 341 -->.<!-- /react-text --></p><pre class="language-bash" data-reactid="342"><code data-reactid="343">$ <span class="token function">npm</span> <span class="token function">install</span> dva-cli -g
|
||
$ dva -v
|
||
0.7.0</code></pre><h2 id="Create-New-App" data-reactid="344"><span data-reactid="345"><!-- react-text: 346 -->Create New App<!-- /react-text --></span><a href="#Create-New-App" class="anchor" data-reactid="347">#</a></h2><p data-reactid="348"><!-- react-text: 349 -->After installed dva-cli, you can have access to the <!-- /react-text --><code data-reactid="350"><!-- react-text: 351 -->dva<!-- /react-text --></code><!-- react-text: 352 --> command in terminal (<!-- /react-text --><a href="http://stackoverflow.com/questions/15054388/global-node-modules-not-installing-correctly-command-not-found" data-reactid="353"><!-- react-text: 354 -->can't access?<!-- /react-text --></a><!-- react-text: 355 -->). Now, create a new application with <!-- /react-text --><code data-reactid="356"><!-- react-text: 357 -->dva new<!-- /react-text --></code><!-- react-text: 358 -->.<!-- /react-text --></p><pre class="language-bash" data-reactid="359"><code data-reactid="360">$ dva new dva-quickstart</code></pre><p data-reactid="361"><!-- react-text: 362 -->This creates <!-- /react-text --><code data-reactid="363"><!-- react-text: 364 -->dva-quickstart<!-- /react-text --></code><!-- react-text: 365 --> directory, that contains the project directories and files, and provides development server, build script, mock service, proxy server and so on.<!-- /react-text --></p><p data-reactid="366"><!-- react-text: 367 -->Then <!-- /react-text --><code data-reactid="368"><!-- react-text: 369 -->cd<!-- /react-text --></code><!-- react-text: 370 --> the <!-- /react-text --><code data-reactid="371"><!-- react-text: 372 -->dva-quickstart<!-- /react-text --></code><!-- react-text: 373 --> directory, and start the development server.<!-- /react-text --></p><pre class="language-bash" data-reactid="374"><code data-reactid="375">$ <span class="token function">cd</span> dva-quickstart
|
||
$ <span class="token function">npm</span> start</code></pre><p data-reactid="376"><!-- react-text: 377 -->After a few seconds, you will see the following output:<!-- /react-text --></p><pre class="language-bash" data-reactid="378"><code data-reactid="379">Compiled successfully<span class="token operator">!</span>
|
||
|
||
The app is running at:
|
||
|
||
http://localhost:8000/
|
||
|
||
Note that the development build is not optimized.
|
||
To create a production build, use <span class="token function">npm</span> run build.</code></pre><p data-reactid="380"><!-- react-text: 381 -->Open <!-- /react-text --><a href="http://localhost:8000" data-reactid="382"><!-- react-text: 383 -->http://localhost:8000<!-- /react-text --></a><!-- react-text: 384 --> in your browser, you will see dva welcome page.<!-- /react-text --></p><h2 id="Integrate-antd" data-reactid="385"><span data-reactid="386"><!-- react-text: 387 -->Integrate antd<!-- /react-text --></span><a href="#Integrate-antd" class="anchor" data-reactid="388">#</a></h2><p data-reactid="389"><!-- react-text: 390 -->Install <!-- /react-text --><code data-reactid="391"><!-- react-text: 392 -->antd<!-- /react-text --></code><!-- react-text: 393 --> and <!-- /react-text --><code data-reactid="394"><!-- react-text: 395 -->babel-plugin-import<!-- /react-text --></code><!-- react-text: 396 --> with npm. <!-- /react-text --><code data-reactid="397"><!-- react-text: 398 -->babel-plugin-import<!-- /react-text --></code><!-- react-text: 399 --> is used to automatically import scripts and stylesheets from antd in demand. See <!-- /react-text --><a href="https://github.com/ant-design/babel-plugin-import" data-reactid="400"><!-- react-text: 401 -->repo<!-- /react-text --></a><!-- react-text: 402 --> 。<!-- /react-text --></p><pre class="language-bash" data-reactid="403"><code data-reactid="404">$ <span class="token function">npm</span> <span class="token function">install</span> antd babel-plugin-import --save</code></pre><p data-reactid="405"><!-- react-text: 406 -->Edit <!-- /react-text --><code data-reactid="407"><!-- react-text: 408 -->.roadhogrc<!-- /react-text --></code><!-- react-text: 409 --> to integrate <!-- /react-text --><code data-reactid="410"><!-- react-text: 411 -->babel-plugin-import<!-- /react-text --></code><!-- react-text: 412 -->.<!-- /react-text --></p><pre class="language-diff" data-reactid="413"><code data-reactid="414"> "extraBabelPlugins": [
|
||
<span class="token deleted">- "transform-runtime"</span>
|
||
<span class="token inserted">+ "transform-runtime",</span>
|
||
<span class="token inserted">+ ["import", { "libraryName": "antd", "style": "css" }]</span>
|
||
],</code></pre><blockquote data-reactid="415"><p data-reactid="416"><!-- react-text: 417 -->Notice: dva-cli's build and server is bases on roadhog, view <!-- /react-text --><a href="https://github.com/sorrycc/roadhog/blob/master/README_en-us.md#configuration" data-reactid="418"><!-- react-text: 419 -->roadhog#Configuration<!-- /react-text --></a><!-- react-text: 420 --> for more <!-- /react-text --><code data-reactid="421"><!-- react-text: 422 -->.roadhogrc<!-- /react-text --></code><!-- react-text: 423 --> Configuration.<!-- /react-text --></p></blockquote><h2 id="Define-Router" data-reactid="424"><span data-reactid="425"><!-- react-text: 426 -->Define Router<!-- /react-text --></span><a href="#Define-Router" class="anchor" data-reactid="427">#</a></h2><p data-reactid="428"><!-- react-text: 429 -->We need to write an application displaying the list of products. The first step is to create a route.<!-- /react-text --></p><p data-reactid="430"><!-- react-text: 431 -->Create a route component <!-- /react-text --><code data-reactid="432"><!-- react-text: 433 -->routes/Products.js<!-- /react-text --></code><!-- react-text: 434 -->:<!-- /react-text --></p><pre class="language-javascript" data-reactid="435"><code data-reactid="436"><span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> Products <span class="token operator">=</span> <span class="token punctuation">(</span>props<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span>
|
||
<span class="token operator"><</span>h2<span class="token operator">></span>List <span class="token keyword">of</span> Products<span class="token operator"><</span><span class="token operator">/</span>h2<span class="token operator">></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">export</span> <span class="token keyword">default</span> Products<span class="token punctuation">;</span></code></pre><p data-reactid="437"><!-- react-text: 438 -->Add routing information to router, edit <!-- /react-text --><code data-reactid="439"><!-- react-text: 440 -->router.js<!-- /react-text --></code><!-- react-text: 441 -->:<!-- /react-text --></p><pre class="language-diff" data-reactid="442"><code data-reactid="443"><span class="token inserted">+ import Products from './routes/Products';</span>
|
||
...
|
||
<span class="token inserted">+ <Route path="/products" component={Products} /></span></code></pre><p data-reactid="444"><!-- react-text: 445 -->Then open <!-- /react-text --><a href="http://localhost:8000/#/products" data-reactid="446"><!-- react-text: 447 -->http://localhost:8000/#/products<!-- /react-text --></a><!-- react-text: 448 --> in your browser, you should be able to see the <!-- /react-text --><code data-reactid="449"><!-- react-text: 450 --><h2><!-- /react-text --></code><!-- react-text: 451 --> tag defined before.<!-- /react-text --></p><h2 id="Write-UI-Components" data-reactid="452"><span data-reactid="453"><!-- react-text: 454 -->Write UI Components<!-- /react-text --></span><a href="#Write-UI-Components" class="anchor" data-reactid="455">#</a></h2><p data-reactid="456"><!-- react-text: 457 -->As your application grows and you notice you are sharing UI elements between multiple pages (or using them multiple times on the same page), in dva it's called reusable components.<!-- /react-text --></p><p data-reactid="458"><!-- react-text: 459 -->Let's create a <!-- /react-text --><code data-reactid="460"><!-- react-text: 461 -->ProductList<!-- /react-text --></code><!-- react-text: 462 --> component that we can use in multiple places to show a list of products.<!-- /react-text --></p><p data-reactid="463"><!-- react-text: 464 -->Create <!-- /react-text --><code data-reactid="465"><!-- react-text: 466 -->components/ProductList.js<!-- /react-text --></code><!-- react-text: 467 --> and typing:<!-- /react-text --></p><pre class="language-javascript" data-reactid="468"><code data-reactid="469"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> PropTypes <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> <span class="token punctuation">{</span> Table<span class="token punctuation">,</span> Popconfirm<span class="token punctuation">,</span> Button <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> ProductList <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> onDelete<span class="token punctuation">,</span> products <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> columns <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
|
||
title<span class="token punctuation">:</span> <span class="token string">'Name'</span><span class="token punctuation">,</span>
|
||
dataIndex<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
title<span class="token punctuation">:</span> <span class="token string">'Actions'</span><span class="token punctuation">,</span>
|
||
render<span class="token punctuation">:</span> <span class="token punctuation">(</span>text<span class="token punctuation">,</span> record<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||
<span class="token operator"><</span>Popconfirm title<span class="token operator">=</span><span class="token string">"Delete?"</span> onConfirm<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token function">onDelete</span><span class="token punctuation">(</span>record<span class="token punctuation">.</span>id<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||
<span class="token operator"><</span>Button<span class="token operator">></span>Delete<span class="token operator"><</span><span class="token operator">/</span>Button<span class="token operator">></span>
|
||
<span class="token operator"><</span><span class="token operator">/</span>Popconfirm<span class="token operator">></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</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">return</span> <span class="token punctuation">(</span>
|
||
<span class="token operator"><</span>Table
|
||
dataSource<span class="token operator">=</span><span class="token punctuation">{</span>products<span class="token punctuation">}</span>
|
||
columns<span class="token operator">=</span><span class="token punctuation">{</span>columns<span class="token punctuation">}</span>
|
||
<span class="token operator">/</span><span class="token operator">></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
|
||
ProductList<span class="token punctuation">.</span>proptypes <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
onDelete<span class="token punctuation">:</span> PropTypes<span class="token punctuation">.</span>func<span class="token punctuation">.</span>isRequired<span class="token punctuation">,</span>
|
||
products<span class="token punctuation">:</span> PropTypes<span class="token punctuation">.</span>array<span class="token punctuation">.</span>isRequired<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> ProductList<span class="token punctuation">;</span></code></pre><h2 id="Define-Model" data-reactid="470"><span data-reactid="471"><!-- react-text: 472 -->Define Model<!-- /react-text --></span><a href="#Define-Model" class="anchor" data-reactid="473">#</a></h2><p data-reactid="474"><!-- react-text: 475 -->After complete the UI, we will begin processing the data and logic.<!-- /react-text --></p><p data-reactid="476"><!-- react-text: 477 -->dva manages domain model with <!-- /react-text --><code data-reactid="478"><!-- react-text: 479 -->model<!-- /react-text --></code><!-- react-text: 480 -->, with reducers for synchronous state update, effects for async logic, and subscriptions for data source subscribe.<!-- /react-text --></p><p data-reactid="481"><!-- react-text: 482 -->Let's create a model <!-- /react-text --><code data-reactid="483"><!-- react-text: 484 -->models/products.js<!-- /react-text --></code><!-- react-text: 485 --> and typing:<!-- /react-text --></p><pre class="language-javascript" data-reactid="486"><code data-reactid="487"><span class="token keyword">import</span> dva <span class="token keyword">from</span> <span class="token string">'dva'</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
|
||
namespace<span class="token punctuation">:</span> <span class="token string">'products'</span><span class="token punctuation">,</span>
|
||
state<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
reducers<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||
<span class="token string">'delete'</span><span class="token punctuation">(</span>state<span class="token punctuation">,</span> <span class="token punctuation">{</span> payload<span class="token punctuation">:</span> id <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> state<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>item <span class="token operator">=</span><span class="token operator">></span> item<span class="token punctuation">.</span>id <span class="token operator">!==</span> id<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre><p data-reactid="488"><!-- react-text: 489 -->In this model:<!-- /react-text --></p><ul data-reactid="490"><li data-reactid="491"><p data-reactid="492"><code data-reactid="493"><!-- react-text: 494 -->namespace<!-- /react-text --></code><!-- react-text: 495 --> represent the key on global state<!-- /react-text --></p></li><li data-reactid="496"><p data-reactid="497"><code data-reactid="498"><!-- react-text: 499 -->state<!-- /react-text --></code><!-- react-text: 500 --> is the initial value, here is an empty array<!-- /react-text --></p></li><li data-reactid="501"><p data-reactid="502"><code data-reactid="503"><!-- react-text: 504 -->reducers<!-- /react-text --></code><!-- react-text: 505 --> is equal to reducer in redux, accepting action, and update state synchronously<!-- /react-text --></p></li></ul><p data-reactid="506"><!-- react-text: 507 -->Then don't forget to require it in <!-- /react-text --><code data-reactid="508"><!-- react-text: 509 -->index.js<!-- /react-text --></code><!-- react-text: 510 -->:<!-- /react-text --></p><pre class="language-diff" data-reactid="511"><code data-reactid="512">// 3. Model
|
||
<span class="token inserted">+ app.model(require('./models/products'));</span></code></pre><h2 id="Connect" data-reactid="513"><span data-reactid="514"><!-- react-text: 515 -->Connect<!-- /react-text --></span><a href="#Connect" class="anchor" data-reactid="516">#</a></h2><p data-reactid="517"><!-- react-text: 518 -->So far, we have completed a separate model and component. Then how to connect these together?<!-- /react-text --></p><p data-reactid="519"><!-- react-text: 520 -->dva provides a <!-- /react-text --><code data-reactid="521"><!-- react-text: 522 -->connect<!-- /react-text --></code><!-- react-text: 523 --> method. If you are familiar with redux, this <!-- /react-text --><code data-reactid="524"><!-- react-text: 525 -->connect<!-- /react-text --></code><!-- react-text: 526 --> is from react-router.<!-- /react-text --></p><p data-reactid="527"><!-- react-text: 528 -->Edit <!-- /react-text --><code data-reactid="529"><!-- react-text: 530 -->routes/Products.js<!-- /react-text --></code><!-- react-text: 531 --> and replace with following:<!-- /react-text --></p><pre class="language-javascript" data-reactid="532"><code data-reactid="533"><span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> <span class="token punctuation">{</span> connect <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'dva'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> ProductList <span class="token keyword">from</span> <span class="token string">'../components/ProductList'</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> Products <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> dispatch<span class="token punctuation">,</span> products <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">function</span> <span class="token function">handleDelete</span><span class="token punctuation">(</span>id<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
type<span class="token punctuation">:</span> <span class="token string">'products/delete'</span><span class="token punctuation">,</span>
|
||
payload<span class="token punctuation">:</span> id<span class="token punctuation">,</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">return</span> <span class="token punctuation">(</span>
|
||
<span class="token operator"><</span>div<span class="token operator">></span>
|
||
<span class="token operator"><</span>h2<span class="token operator">></span>List <span class="token keyword">of</span> Products<span class="token operator"><</span><span class="token operator">/</span>h2<span class="token operator">></span>
|
||
<span class="token operator"><</span>ProductList onDelete<span class="token operator">=</span><span class="token punctuation">{</span>handleDelete<span class="token punctuation">}</span> products<span class="token operator">=</span><span class="token punctuation">{</span>products<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
|
||
<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment" spellcheck="true">// export default Products;</span>
|
||
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">connect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">{</span> products <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
products<span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">(</span>Products<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre><p data-reactid="534"><!-- react-text: 535 -->Finally, we need some initial data to make the application run together. Edit <!-- /react-text --><code data-reactid="536"><!-- react-text: 537 -->index.js<!-- /react-text --></code><!-- react-text: 538 -->:<!-- /react-text --></p><pre class="language-diff" data-reactid="539"><code data-reactid="540"><span class="token deleted">- const app = dva();</span>
|
||
<span class="token inserted">+ const app = dva({</span>
|
||
<span class="token inserted">+ initialState: {</span>
|
||
<span class="token inserted">+ products: [</span>
|
||
<span class="token inserted">+ { name: 'dva', id: 1 },</span>
|
||
<span class="token inserted">+ { name: 'antd', id: 2 },</span>
|
||
<span class="token inserted">+ ],</span>
|
||
<span class="token inserted">+ },</span>
|
||
<span class="token inserted">+ });</span></code></pre><p data-reactid="541"><!-- react-text: 542 -->Refresh your browser, you should see the following result:<!-- /react-text --></p><p style="text-align:center;" data-reactid="543"><img src="https://zos.alipayobjects.com/rmsportal/GQJeDDeUCSTRMMg.gif" data-reactid="544"/></p><h2 id="Build" data-reactid="545"><span data-reactid="546"><!-- react-text: 547 -->Build<!-- /react-text --></span><a href="#Build" class="anchor" data-reactid="548">#</a></h2><p data-reactid="549"><!-- react-text: 550 -->Now that we've written our application and verified that it works in development, it's time to get it ready to deploy to our users. To do so, run the following command:<!-- /react-text --></p><pre class="language-bash" data-reactid="551"><code data-reactid="552">$ <span class="token function">npm</span> run build</code></pre><p data-reactid="553"><!-- react-text: 554 -->After a few seconds, the output should be as follows:<!-- /react-text --></p><pre class="language-bash" data-reactid="555"><code data-reactid="556"><span class="token operator">></span> @ build /private/tmp/myapp
|
||
<span class="token operator">></span> roadhog build
|
||
|
||
Creating an optimized production build<span class="token punctuation">..</span>.
|
||
Compiled successfully.
|
||
|
||
File sizes after gzip:
|
||
|
||
82.98 KB dist/index.js
|
||
270 B dist/index.css</code></pre><p data-reactid="557"><!-- react-text: 558 -->The <!-- /react-text --><code data-reactid="559"><!-- react-text: 560 -->build<!-- /react-text --></code><!-- react-text: 561 --> command packages up all of the assets that make up your application —— JavaScript, templates, CSS, web fonts, images, and more. Then you can find these files in the <!-- /react-text --><code data-reactid="562"><!-- react-text: 563 -->dist /<!-- /react-text --></code><!-- react-text: 564 --> directory.<!-- /react-text --></p><h2 id="What's-Next" data-reactid="565"><span data-reactid="566"><!-- react-text: 567 -->What's Next<!-- /react-text --></span><a href="#What's-Next" class="anchor" data-reactid="568">#</a></h2><p data-reactid="569"><!-- react-text: 570 -->We have completed a simple application, but you may still have lots of questions, such as:<!-- /react-text --></p><ul data-reactid="571"><li data-reactid="572"><p data-reactid="573"><!-- react-text: 574 -->How to dealing with async logic<!-- /react-text --></p></li><li data-reactid="575"><p data-reactid="576"><!-- react-text: 577 -->How to load initial data elegantly<!-- /react-text --></p></li><li data-reactid="578"><p data-reactid="579"><!-- react-text: 580 -->How to handle onError globally and locally<!-- /react-text --></p></li><li data-reactid="581"><p data-reactid="582"><!-- react-text: 583 -->How to load Routes and Models on demand<!-- /react-text --></p></li><li data-reactid="584"><p data-reactid="585"><!-- react-text: 586 -->How to implement HMR<!-- /react-text --></p></li><li data-reactid="587"><p data-reactid="588"><!-- react-text: 589 -->How to mock data<!-- /react-text --></p></li><li data-reactid="590"><p data-reactid="591"><!-- react-text: 592 -->and so on...<!-- /react-text --></p></li></ul><p data-reactid="593"><!-- react-text: 594 -->You can:<!-- /react-text --></p><ul data-reactid="595"><li data-reactid="596"><p data-reactid="597"><!-- react-text: 598 -->Visit <!-- /react-text --><a href="https://github.com/dvajs/dva" data-reactid="599"><!-- react-text: 600 -->dva official website<!-- /react-text --></a><!-- react-text: 601 -->.<!-- /react-text --></p></li><li data-reactid="602"><p data-reactid="603"><!-- react-text: 604 -->Be familiar with the <!-- /react-text --><a href="https://github.com/dvajs/dva/blob/master/docs/Concepts.md" data-reactid="605"><!-- react-text: 606 -->8 Conpects<!-- /react-text --></a><!-- react-text: 607 -->, and understand how they are connected together<!-- /react-text --></p></li><li data-reactid="608"><p data-reactid="609"><!-- react-text: 610 -->Know all <!-- /react-text --><a href="https://github.com/dvajs/dva/blob/master/docs/API.md" data-reactid="611"><!-- react-text: 612 -->dva APIs<!-- /react-text --></a></p></li><li data-reactid="613"><p data-reactid="614"><!-- react-text: 615 -->Checkout <!-- /react-text --><a href="https://github.com/dvajs/dva-knowledgemap" data-reactid="616"><!-- react-text: 617 -->dva knowledgemap<!-- /react-text --></a><!-- react-text: 618 -->, including all the basic knowledge with ES6, React, dva<!-- /react-text --></p></li><li data-reactid="619"><p data-reactid="620"><!-- react-text: 621 -->Checkout <!-- /react-text --><a href="https://github.com/dvajs/dva/issues?q=is%3Aissue+is%3Aclosed+label%3Afaq" data-reactid="622"><!-- react-text: 623 -->more FAQ<!-- /react-text --></a></p></li><li data-reactid="624"><p data-reactid="625"><!-- react-text: 626 -->If your project is created with <!-- /react-text --><a href="https://github.com/dvajs/dva-cli" data-reactid="627"><!-- react-text: 628 -->dva-cli<!-- /react-text --></a><!-- react-text: 629 --> , checkout how to <!-- /react-text --><a href="https://github.com/sorrycc/roadhog#配置" data-reactid="630"><!-- react-text: 631 -->Configure it<!-- /react-text --></a></p></li></ul></section></article></div></div><div class="ant-row" data-reactid="632"><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="633"><section class="prev-next-nav" data-reactid="634"><a class="prev-page" href="/docs/react/getting-started" data-reactid="635">Getting Started</a><a class="next-page" href="/docs/react/use-with-create-react-app" data-reactid="636">Use in create-react-app</a></section></div></div></div><footer id="footer" data-reactid="637"><ul data-reactid="638"><li data-reactid="639"><h2 data-reactid="640"><i class="anticon anticon-github" data-reactid="641"></i><!-- react-text: 642 --> GitHub<!-- /react-text --></h2><div data-reactid="643"><a target="_blank " href="https://github.com/ant-design/ant-design" data-reactid="644"><span data-reactid="645">Repository</span></a></div><div data-reactid="646"><a target="_blank " href="https://ant.design/docs/react/customize-theme" data-reactid="647"><span data-reactid="648">Customize Theme</span></a></div><div data-reactid="649"><a target="_blank " href="https://github.com/websemantics/awesome-ant-design" data-reactid="650"><span data-reactid="651">Awesome Ant Design</span></a></div></li><li data-reactid="652"><h2 data-reactid="653"><i class="anticon anticon-link" data-reactid="654"></i><!-- react-text: 655 --> <!-- /react-text --><span data-reactid="656">Links</span></h2><div data-reactid="657"><a href="https://design.alipay.com/" data-reactid="658"><span data-reactid="659">Ant Financial Design Platform</span></a></div><div data-reactid="660"><a href="http://mobile.ant.design" data-reactid="661">Ant Design Mobile</a><span data-reactid="662"> - </span><span data-reactid="663">Mobile UI</span></div><div data-reactid="664"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva" data-reactid="665">dva</a><!-- react-text: 666 --> - <!-- /react-text --><span data-reactid="667">Framework</span></div><div data-reactid="668"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva-cli" data-reactid="669">dva-cli</a><!-- react-text: 670 --> -<!-- /react-text --><span data-reactid="671">Developer Tools</span></div><div data-reactid="672"><a target="_blank" rel="noopener noreferrer" href="https://eggjs.org/" data-reactid="673">Egg</a><span data-reactid="674"> - </span><span data-reactid="675">Enterprise Node Framework</span></div><div data-reactid="676"><a target="_blank" rel="noopener noreferrer" href="https://antv.alipay.com/" data-reactid="677">AntV</a><span data-reactid="678"> - </span><span data-reactid="679">Data Visualization</span></div><div data-reactid="680"><a target="_blank" rel="noopener noreferrer" href="http://motion.ant.design" data-reactid="681">Ant Motion</a><span data-reactid="682"> - </span><span data-reactid="683">Motion Soluction</span></div><div data-reactid="684"><a target="_blank" rel="noopener noreferrer" href="http://library.ant.design/" data-reactid="685">AntD Library</a><span data-reactid="686"> - </span><span data-reactid="687">Axure library</span></div><div data-reactid="688"><a target="_blank" rel="noopener noreferrer" href="http://ux.ant.design" data-reactid="689">Ant UX</a><span data-reactid="690"> - </span><span data-reactid="691">Sitemap Template</span></div></li><li data-reactid="692"><h2 data-reactid="693"><i class="anticon anticon-customer-service" data-reactid="694"></i><!-- react-text: 695 --> <!-- /react-text --><span data-reactid="696">Community</span></h2><div data-reactid="697"><a href="/changelog" data-reactid="698"><span data-reactid="699">Change Log</span></a></div><div data-reactid="700"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/wiki/FAQ" data-reactid="701"><span data-reactid="702">FAQ</span></a></div><div data-reactid="703"><a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design" data-reactid="704"><span data-reactid="705">Chat Room (中文)</span></a></div><div data-reactid="706"><a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design-english" data-reactid="707"><span data-reactid="708">Chat Room (English)</span></a></div><div data-reactid="709"><a target="_blank" rel="noopener noreferrer" href="http://new-issue.ant.design/" data-reactid="710"><span data-reactid="711">Bug Report</span></a></div><div data-reactid="712"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/issues" data-reactid="713"><span data-reactid="714">Issues</span></a></div><div data-reactid="715"><a target="_blank" rel="noopener noreferrer" href="http://stackoverflow.com/questions/tagged/antd" data-reactid="716"><span data-reactid="717">StackOverflow</span></a></div><div data-reactid="718"><a target="_blank" rel="noopener noreferrer" href="https://segmentfault.com/t/antd" data-reactid="719"><span data-reactid="720">SegmentFault</span></a></div></li><li data-reactid="721"><h2 data-reactid="722"><!-- react-text: 723 -->Copyright © <!-- /react-text --><!-- react-text: 724 -->2017<!-- /react-text --></h2><div data-reactid="725"><span data-reactid="726">Created by AIUX</span></div><div data-reactid="727"><!-- react-text: 728 -->Built with <!-- /react-text --><a target="_blank" rel="noopener noreferrer" href="https://github.com/benjycui/bisheng" data-reactid="729">BiSheng</a></div></li></ul></footer></div>
|
||
</div>
|
||
<script src="/common.js"></script>
|
||
<script src="/index.js"></script>
|
||
</body>
|
||
</html>
|