From a7cda9d972f3830352b6eb965b34d74162831d2b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=84=B6=E5=88=99?= Date: Tue, 9 May 2017 16:31:20 +0800 Subject: [PATCH] translate practical-projects doc and ListView, ref #329 --- components/list-view/demo/basic-body.md | 10 +- components/list-view/demo/basic-row.tsx | 10 +- components/list-view/demo/basic-sticky.md | 16 ++-- components/list-view/demo/basic.md | 14 ++- components/list-view/demo/basic.tsx | 12 +-- components/list-view/demo/idxed-sticky.md | 10 +- components/list-view/demo/idxed.md | 8 +- components/list-view/index.en-US.md | 80 ++++++---------- components/list-view/index.zh-CN.md | 13 ++- docs/react/practical-projects.en-US.md | 107 +++++++++++----------- docs/react/practical-projects.zh-CN.md | 45 ++++----- 11 files changed, 143 insertions(+), 182 deletions(-) diff --git a/components/list-view/demo/basic-body.md b/components/list-view/demo/basic-body.md index 7485bfa90ee..6a5e2ad4a00 100644 --- a/components/list-view/demo/basic-body.md +++ b/components/list-view/demo/basic-body.md @@ -5,7 +5,7 @@ title: en-US: 'use `` container' --- -使用 html 的 `body` 作为滚动容器 +use html `body` as a scroll container. ````jsx /* eslint no-dupe-keys: 0 */ @@ -19,12 +19,12 @@ const data = [ }, { img: 'https://zos.alipayobjects.com/rmsportal/XmwCzSeJiqpkuMB.png', - title: '麦当劳邀您过周末', + title: 'McDonald\'s invites you', des: '不是所有的兼职汪都需要风吹日晒', }, { img: 'https://zos.alipayobjects.com/rmsportal/hfVtzEhPzTUewPm.png', - title: '食惠周', + title: 'Eat the week', des: '不是所有的兼职汪都需要风吹日晒', }, ]; @@ -117,7 +117,7 @@ class Demo extends React.Component {
{obj.des}
-
{rowID}元/任务
+
{rowID}¥
@@ -128,7 +128,7 @@ class Demo extends React.Component { dataSource={this.state.dataSource} renderHeader={() => header} renderFooter={() =>
- {this.state.isLoading ? '加载中...' : '加载完毕'} + {this.state.isLoading ? 'Loading...' : 'Loaded'}
} renderRow={row} renderSeparator={separator} diff --git a/components/list-view/demo/basic-row.tsx b/components/list-view/demo/basic-row.tsx index da01ba3c2ba..89d6f3109d8 100644 --- a/components/list-view/demo/basic-row.tsx +++ b/components/list-view/demo/basic-row.tsx @@ -12,12 +12,12 @@ const data = [ }, { img: 'https://zos.alipayobjects.com/rmsportal/XmwCzSeJiqpkuMB.png', - title: '麦当劳邀您过周末', + title: 'McDonald\'s invites you', des: '不是所有的兼职汪都需要风吹日晒', }, { img: 'https://zos.alipayobjects.com/rmsportal/hfVtzEhPzTUewPm.png', - title: '食惠周', + title: 'Eat the week', des: '不是所有的兼职汪都需要风吹日晒', }, ]; @@ -100,7 +100,7 @@ export default class BasicRowDemo extends React.Component { {obj.des} - {rowID} {this.props.highlightRow} - 35元/任务 + 35¥ @@ -108,11 +108,11 @@ export default class BasicRowDemo extends React.Component { ); }; - const loadingTxt = this.state.isLoading ? '加载中...' : '加载完毕'; + const loadingTxt = this.state.isLoading ? 'Loading...' : 'Loaded'; return ( 列表头} + renderHeader={() => header} renderFooter={() => {loadingTxt} } renderRow={row} renderSeparator={separator} diff --git a/components/list-view/demo/basic-sticky.md b/components/list-view/demo/basic-sticky.md index 96c195ea128..5520cf23855 100644 --- a/components/list-view/demo/basic-sticky.md +++ b/components/list-view/demo/basic-sticky.md @@ -2,10 +2,10 @@ order: 2 title: zh-CN: '标题吸顶（body 容器)' - en-US: 'Title positon top (use `` container)' + en-US: 'Title positon top (use `` container)' --- -区块标题 “吸顶”(sticky) 功能示例 +sticky block header to the top of the page ````jsx /* eslint no-dupe-keys: 0 */ @@ -19,12 +19,12 @@ const data = [ }, { img: 'https://zos.alipayobjects.com/rmsportal/XmwCzSeJiqpkuMB.png', - title: '麦当劳邀您过周末', + title: 'McDonald\'s invites you', des: '不是所有的兼职汪都需要风吹日晒', }, { img: 'https://zos.alipayobjects.com/rmsportal/hfVtzEhPzTUewPm.png', - title: '食惠周', + title: 'Eat the week', des: '不是所有的兼职汪都需要风吹日晒', }, ]; @@ -137,7 +137,7 @@ class Demo extends React.Component {
{obj.des}
-
35元/任务
+
35¥
@@ -149,10 +149,10 @@ class Demo extends React.Component { dataSource={this.state.dataSource} renderHeader={() => header} renderFooter={() =>
- {this.state.isLoading ? '加载中...' : '加载完毕'} + {this.state.isLoading ? 'Loading...' : 'Loaded'}
} renderSectionHeader={sectionData => ( -
{`任务 ${sectionData.split(' ')[1]}`}
+
{`Task ${sectionData.split(' ')[1]}`}
)} renderRow={row} renderSeparator={separator} @@ -166,7 +166,7 @@ class Demo extends React.Component { stickyProps={{ stickyStyle: { zIndex: 999, WebkitTransform: 'none', transform: 'none' }, // topOffset: -43, - // isActive: false, // 关闭 sticky 效果 + // isActive: false, }} stickyContainerProps={{ className: 'for-stickyContainer-demo', diff --git a/components/list-view/demo/basic.md b/components/list-view/demo/basic.md index 8d4bee71e1f..ced996705a0 100644 --- a/components/list-view/demo/basic.md +++ b/components/list-view/demo/basic.md @@ -5,9 +5,7 @@ title: en-US: 'Custom container' --- -> 注意：需要设置 ListView 的 style 的 `height`/`overflow`，以此作为滚动容器。 - -> 同时建议设置`body`的`overflow: hidden` +> Note: you need set `height`/`overflow` style. ````jsx /* eslint no-dupe-keys: 0, no-mixed-operators: 0 */ @@ -31,12 +29,12 @@ const data = [ }, { img: 'https://zos.alipayobjects.com/rmsportal/XmwCzSeJiqpkuMB.png', - title: '麦当劳邀您过周末', + title: 'McDonald\'s invites you', des: '不是所有的兼职汪都需要风吹日晒', }, { img: 'https://zos.alipayobjects.com/rmsportal/hfVtzEhPzTUewPm.png', - title: '食惠周', + title: 'Eat the week', des: '不是所有的兼职汪都需要风吹日晒', }, ]; @@ -149,7 +147,7 @@ class Demo extends React.Component {
{obj.des}
-
35元/任务
+
35¥
@@ -161,10 +159,10 @@ class Demo extends React.Component { dataSource={this.state.dataSource} renderHeader={() => header} renderFooter={() =>
- {this.state.isLoading ? '加载中...' : '加载完毕'} + {this.state.isLoading ? 'Loading...' : 'Loaded'}
} renderSectionHeader={sectionData => ( -
{`任务 ${sectionData.split(' ')[1]}`}
+
{`Task ${sectionData.split(' ')[1]}`}
)} renderBodyComponent={() => } renderRow={row} diff --git a/components/list-view/demo/basic.tsx b/components/list-view/demo/basic.tsx index 4df3890c780..22756bd618a 100644 --- a/components/list-view/demo/basic.tsx +++ b/components/list-view/demo/basic.tsx @@ -11,12 +11,12 @@ const data = [ }, { img: 'https://zos.alipayobjects.com/rmsportal/XmwCzSeJiqpkuMB.png', - title: '麦当劳邀您过周末', + title: 'McDonald\'s invites you', des: '不是所有的兼职汪都需要风吹日晒', }, { img: 'https://zos.alipayobjects.com/rmsportal/hfVtzEhPzTUewPm.png', - title: '食惠周', + title: 'Eat the week', des: '不是所有的兼职汪都需要风吹日晒', }, ]; @@ -83,7 +83,7 @@ export default class BasicDemo extends React.Component { renderSectionHeader = (sectionData) => { return ( - {`任务 ${sectionData.split(' ')[1]}`} + {`Task ${sectionData.split(' ')[1]}`} ); } @@ -124,18 +124,18 @@ export default class BasicDemo extends React.Component { {obj.des} - {rowID} {this.props.highlightRow} - 35元/任务 + 35¥ ); }; - const loadingTxt = this.state.isLoading ? '加载中...' : '加载完毕'; + const loadingTxt = this.state.isLoading ? 'Loading...' : 'Loaded'; return ( 列表头} + renderHeader={() => header} renderFooter={() => {loadingTxt} } renderSectionHeader={this.renderSectionHeader} renderRow={row} diff --git a/components/list-view/demo/idxed-sticky.md b/components/list-view/demo/idxed-sticky.md index 9049ea6aa1f..c91e43923eb 100644 --- a/components/list-view/demo/idxed-sticky.md +++ b/components/list-view/demo/idxed-sticky.md @@ -5,7 +5,7 @@ title: en-US: 'Index List (Title position top)' --- -用于通讯薄等场景 “吸顶”(sticky) +sticky index List ````jsx @@ -66,7 +66,7 @@ class Demo extends React.Component {
{ console.log('onClear'); }} onCancel={() => { console.log('onCancel'); }} @@ -74,8 +74,8 @@ class Demo extends React.Component {
头部内容请自定义} - renderFooter={() => 尾部内容请自定义} + renderHeader={() => custom header} + renderFooter={() => custom footer} renderSectionHeader={sectionData => (
{sectionData}
)} renderRow={rowData => ({rowData})} className="am-list" @@ -87,7 +87,7 @@ class Demo extends React.Component { top: 85, }} delayTime={10} - delayActivityIndicator={
渲染中...
} + delayActivityIndicator={
rendering...
} /> ); } diff --git a/components/list-view/demo/idxed.md b/components/list-view/demo/idxed.md index 3f741742f41..caa9015590d 100644 --- a/components/list-view/demo/idxed.md +++ b/components/list-view/demo/idxed.md @@ -5,7 +5,7 @@ title: en-US: 'Index List' --- -用于通讯薄等场景 +Index List ````jsx @@ -51,8 +51,8 @@ class Demo extends React.Component { return ( 头部内容请自定义} - renderFooter={() => 尾部内容请自定义} + renderHeader={() => custom header} + renderFooter={() => custom footer} renderSectionHeader={sectionData => (
{sectionData}
)} renderRow={rowData => ({rowData})} className="fortest" @@ -65,7 +65,7 @@ class Demo extends React.Component { top: 20, }} delayTime={10} - delayActivityIndicator={
渲染中...
} + delayActivityIndicator={
rendering...
} /> ); } diff --git a/components/list-view/index.en-US.md b/components/list-view/index.en-US.md index 6a1ea6748be..02b04548573 100644 --- a/components/list-view/index.en-US.md +++ b/components/list-view/index.en-US.md @@ -4,78 +4,52 @@ type: Combination title: ListView --- -最适用于显示同类的长列表数据类型，对渲染性能有一定的优化效果 +It is suitable for displaying the long list data type of the same kind, and has certain optimization effect on the rendering performance. ## API Support WEB, React-Native. -- React-Native 平台直接使用 [React Native ListView](https://facebook.github.io/react-native/docs/listview.html#content) -- WEB 平台使用 [React Native ListView(v0.26) 的 API](http://facebook.github.io/react-native/releases/0.26/docs/listview.html)，但有一些差异，以下列出差异详情 +- React-Native version use [React Native ListView](https://facebook.github.io/react-native/docs/listview.html#content) directly. +- WEB version use [React Native ListView(v0.26)](http://facebook.github.io/react-native/releases/0.26/docs/listview.html)'s API, but there are some differences that are listed below -#### React Native ListView 在 WEB 平台上不被支持的 API 列表： -> 一般情况下，不支持“平台特有”的API，例如`android`endFillColor、`iOS`alwaysBounceHorizontal。 -另外，使用 css 代替 react-native 的 style 设置方式。 +#### The APIs of React-Native-ListView that are not supported on the web platform: +> In general, the "platform-specific" API is not supported, e.g. `android`endFillColor、`iOS`alwaysBounceHorizontal. - onChangeVisibleRows - stickyHeaderIndices -- [ScrollView](https://facebook.github.io/react-native/docs/scrollview.html#props) 组件中不被支持的 API: +- the APIs of [ScrollView](https://facebook.github.io/react-native/docs/scrollview.html#props) that are not supported: - keyboardDismissMode - keyboardShouldPersistTaps - - onContentSizeChange (可使用`onLayout`替代) + - onContentSizeChange (can use `onLayout` instead) - removeClippedSubviews - scrollEnabled - - showsHorizontalScrollIndicator (可使用 css style 替代) - - showsVerticalScrollIndicator (可使用 css style 替代) -- [View](https://facebook.github.io/react-native/docs/view.html#props) 组件 API: **只支持`onLayout`** + - showsHorizontalScrollIndicator (can use `css style` instead) + - showsVerticalScrollIndicator (can use `css style` instead) +- the APIs of [View](https://facebook.github.io/react-native/docs/view.html#props): only do not fully support `onLayout` -#### WEB 平台新增API +#### Added APIs on the WEB platform -- useBodyScroll (boolean, false) - 使用 html 的 `body` 作为滚动容器 -- stickyHeader (boolean, false) - 固定区块标题到页面顶部 (注意: 设置后会自动使用 html 的 `body` 作为滚动容器) - - 开启 sticky 后还可以设置 stickyProps / stickyContainerProps (详见 [react-sticky](https://github.com/captivationsoftware/react-sticky)) -- renderBodyComponent (function, () => React.Element) - 自定义 body 的包裹组件 -- renderSectionBodyWrapper (function, (sectionID: any) => React.Element) - 渲染自定义的区块包裹组件 -- useZscroller (boolean, false) - 使用 zscroller 来模拟实现滚动容器 (可用于一些低端 Android 机上) - - 注意：开启后`useBodyScroll`和`stickyHeader`设置会自动被忽略 -- scrollerOptions - 详见 [zscroller options](https://github.com/yiminghe/zscroller#options) +- useBodyScroll (boolean, false) - use html `body` as a scroll container. +- stickyHeader (boolean, false) - sticky block header to the top of the page (Note: will automatically use html `body` as a scroll container). + - After enabling it, you can also set `stickyProps / stickyContainerProps` (see [react-sticky](https://github.com/captivationsoftware/react-sticky) for details) +- renderBodyComponent (function, () => React.Element) - custom body package component. +- renderSectionBodyWrapper (function, (sectionID: any) => React.Element) - render a custom block wrapper component. +- useZscroller (boolean, false) - use [zscroller](https://github.com/yiminghe/zscroller) to simulate the implementation of rolling containers (can be used for some poor Android machine) + - Note: After enabling, the `useBodyScroll` and` stickyHeader` settings are automatically ignored. +- scrollerOptions - see [zscroller options](https://github.com/yiminghe/zscroller#options) for details. -### WEB 平台新增 ListView.IndexedList 组件 +### New `ListView.IndexedList` component on the WEB platform -此组件常用于 “通讯录”/“城市列表” 等场景中，支持索引导航功能。 +This component is often used in the "Contacts" / "city list" scenes, support for index navigation. -> 注意：由于索引列表可以点击任一项索引来定位其内容、即内容需要直接滚动到任意位置，这样就难以做到像 ListView 一样能在滚动时自动懒渲染。 -目前实现上只支持分两步渲染，能借此达到首屏优先显示目的，但如果列表数据量过大时、整体性能仍会有影响。 +> Note: Only two-step rendering is supported, so that the first screen priority display can be achieved, but if the list data volume is too large, the overall performance will still be affected. -- quickSearchBarTop (object{value:string, label:string}, value/label 默认为'#') - 快捷导航栏最顶部按钮、常用于回到顶部 -- quickSearchBarStyle (object) - quickSearchBar 的 style -- onQuickSearch (function, (sectionID: any, topId?:any) => void) 快捷导航切换时调用 -- delayTime (number) - 默认 100ms, 延迟渲染时间设置（用于首屏优化，一开始渲染`initialListSize`数量的数据，在此时间后、延迟渲染剩余的数据项、即`totalRowCount - initialListSize`） -- delayActivityIndicator (react node) - 延迟渲染的 loading 指示器 - - -## 常见问题与实现原理 - -- onEndReached 为什么会不停调用？ https://github.com/ant-design/ant-design-mobile/issues/520#issuecomment-263510596 -- 如何设置滚动到列表的某一位置？(例如，点击列表某一项进入另一个页面，再返回到原位置) #541 -- 其他问题：#633 #573 - -ListView 有三种类型的滚动容器： - -1. html 的 body 容器 -2. 局部 div 容器 (通过 ref 获取到) -3. 使用 zscroller 的模拟滚动容器 - -前两种获取到相应元素后，调用 scrollTo 方法、滚动到指定位置； -第三种通过 ref 获取到组件对象、再获取到 domScroller 、调用 scrollTo 方法。 -但滚动到具体什么位置，业务上其实也比较难确定。 - -另一问题：对 dataSource 对象变化时的处理方式是什么？何时调用 onEndReached 方法？ - -ListView 在 componentWillReceiveProps 里会监听 dataSource 对象的变化，并做一次 -[`this._renderMoreRowsIfNeeded()`](https://github.com/react-component/m-list-view/blob/90badfdb6e94093136c86e5874ce6054eae88a0d/src/ListView.js#L156) ， -由于此时[`this.state.curRenderedRowsCount === this.props.dataSource.getRowCount()`](https://github.com/react-component/m-list-view/blob/90badfdb6e94093136c86e5874ce6054eae88a0d/src/ListView.js#L348) -即已经渲染的数据与 dataSource 里已有的数据项个数相同，所以 ListView 认为应该再调用 onEndReached 方法。 +- quickSearchBarTop (object{value:string, label:string}, value/label default is '#') - top button of navigation bar. +- quickSearchBarStyle (object) - quickSearchBar's style. +- onQuickSearch (function, (sectionID: any, topId?:any) => void) - fire on clicking navigation bar. +- delayTime (number) - default 100ms, delay rendering time setting (for the first screen optimization, the initial rendering of the number of `initialListSize` data, after which time rendering the remaining data items, ie `totalRowCount - initialListSize`). +- delayActivityIndicator (react node) - the loading indicator for delayed rendering. diff --git a/components/list-view/index.zh-CN.md b/components/list-view/index.zh-CN.md index 453ecfeef87..f7be0b487bc 100644 --- a/components/list-view/index.zh-CN.md +++ b/components/list-view/index.zh-CN.md @@ -5,7 +5,7 @@ title: ListView subtitle: 长列表 --- -最适用于显示同类的长列表数据类型，对渲染性能有一定的优化效果 +适用于显示同类的长列表数据类型，对渲染性能有一定的优化效果 ## API @@ -15,9 +15,8 @@ subtitle: 长列表 - React-Native 平台直接使用 [React Native ListView](https://facebook.github.io/react-native/docs/listview.html#content) - WEB 平台使用 [React Native ListView(v0.26) 的 API](http://facebook.github.io/react-native/releases/0.26/docs/listview.html)，但有一些差异，以下列出差异详情 -#### React Native ListView 在 WEB 平台上不被支持的 API 列表： +#### React-Native-ListView 在 WEB 平台上不被支持的 API 列表： > 一般情况下，不支持“平台特有”的API，例如`android`endFillColor、`iOS`alwaysBounceHorizontal。 -另外，使用 css 代替 react-native 的 style 设置方式。 - onChangeVisibleRows - stickyHeaderIndices @@ -29,17 +28,17 @@ subtitle: 长列表 - scrollEnabled - showsHorizontalScrollIndicator (可使用 css style 替代) - showsVerticalScrollIndicator (可使用 css style 替代) -- [View](https://facebook.github.io/react-native/docs/view.html#props) 组件 API: **只支持`onLayout`** +- [View](https://facebook.github.io/react-native/docs/view.html#props) 组件 API: 只支持`onLayout`(不完全) #### WEB 平台新增API - useBodyScroll (boolean, false) - 使用 html 的 `body` 作为滚动容器 - stickyHeader (boolean, false) - 固定区块标题到页面顶部 (注意: 设置后会自动使用 html 的 `body` 作为滚动容器) - - 开启 sticky 后还可以设置 stickyProps / stickyContainerProps (详见 [react-sticky](https://github.com/captivationsoftware/react-sticky)) + - 启用后还可以设置 `stickyProps / stickyContainerProps` (详见 [react-sticky](https://github.com/captivationsoftware/react-sticky)) - renderBodyComponent (function, () => React.Element) - 自定义 body 的包裹组件 - renderSectionBodyWrapper (function, (sectionID: any) => React.Element) - 渲染自定义的区块包裹组件 -- useZscroller (boolean, false) - 使用 zscroller 来模拟实现滚动容器 (可用于一些低端 Android 机上) +- useZscroller (boolean, false) - 使用 [zscroller](https://github.com/yiminghe/zscroller) 来模拟实现滚动容器 (可用于一些低端 Android 机上) - 注意：开启后`useBodyScroll`和`stickyHeader`设置会自动被忽略 - scrollerOptions - 详见 [zscroller options](https://github.com/yiminghe/zscroller#options) @@ -53,7 +52,7 @@ subtitle: 长列表 - quickSearchBarTop (object{value:string, label:string}, value/label 默认为'#') - 快捷导航栏最顶部按钮、常用于回到顶部 - quickSearchBarStyle (object) - quickSearchBar 的 style -- onQuickSearch (function, (sectionID: any, topId?:any) => void) 快捷导航切换时调用 +- onQuickSearch (function, (sectionID: any, topId?:any) => void) - 快捷导航切换时调用 - delayTime (number) - 默认 100ms, 延迟渲染时间设置（用于首屏优化，一开始渲染`initialListSize`数量的数据，在此时间后、延迟渲染剩余的数据项、即`totalRowCount - initialListSize`） - delayActivityIndicator (react node) - 延迟渲染的 loading 指示器 diff --git a/docs/react/practical-projects.en-US.md b/docs/react/practical-projects.en-US.md index d95d45eb50f..cb24a1ea414 100644 --- a/docs/react/practical-projects.en-US.md +++ b/docs/react/practical-projects.en-US.md @@ -3,106 +3,101 @@ order: 2 title: Real project with Dva --- -[dva](https://github.com/dvajs/dva) 是一个基于 react 和 redux 的轻量应用框架，概念来自 elm，支持 side effects、热替换、动态加载、react-native、SSR 等，已在生产环境广泛应用。 +[dva](https://github.com/dvajs/dva) 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. -本文会引导你使用 dva 和 antd 从 0 开始创建一个简单应用。 +This article will guide you to create a simple application from zero using dva and antd. -会包含以下内容： +Include the following: --- -## 安装 dva +## Install dva-cli -通过 npm 安装 dva 。 +Install dva-cli with npm, and make sure the version is larger then `0.7.0`. ```bash $ npm install dva-cli -g +$ dva -v +0.7.0 ``` -## 创建新应用 +## Create New App -安装完 dva-cli 之后，就可以在 terminal 里访问到 `dva` 命令。现在，你可以通过 `dva new` 创建新应用。 +After installed dva-cli, you can have access to the `dva` command in terminal ([can't access?](http://stackoverflow.com/questions/15054388/global-node-modules-not-installing-correctly-command-not-found)). Now, create a new application with `dva new`. ```bash $ dva new dva-quickstart ``` -这会创建 `dva-quickstart` 目录，包含项目初始化目录和文件，并提供开发服务器、构建脚本、数据 mock 服务、代理服务器等功能。 +This creates `dva-quickstart` directory, that contains the project directories and files, and provides development server, build script, mock service, proxy server and so on. -然后我们 `cd` 进入 `dva-quickstart` 目录，并启动开发服务器： +Then `cd` the `dva-quickstart` directory, and start the development server. ```bash $ cd dva-quickstart $ npm start ``` -几秒钟后，你会看到以下输出： +After a few seconds, you will see the following output: ```bash - proxy: load rule from proxy.config.js - proxy: listened on 8989 -📦 411/411 build modules -webpack: bundle build is now finished. -``` +Compiled successfully! -在浏览器里打开 http://localhost:8989 ，你会看到 dva 的欢迎界面。 +The app is running at: -## 使用 antd-mobile + http://localhost:8000/ -[见此使用示例](/docs/react/introduce#使用)，要点概括如下： +Note that the development build is not optimized. +To create a production build, use npm run build. +``` -- `npm install antd-mobile babel-plugin-import --save` 安装依赖 -- 不需要再设置 resolve (因为 atool-build 内部已经设置好) -- `babel-plugin-import` 是用来按需加载脚本和样式，编辑 `.roadhogrc `，使 `babel-plugin-import` 插件生效。[参考文档](https://github.com/sorrycc/roadhog#extrababelplugins) -- [高清方案设置](https://github.com/ant-design/ant-design-mobile/wiki/antd-mobile-0.8-%E4%BB%A5%E4%B8%8A%E7%89%88%E6%9C%AC%E3%80%8C%E9%AB%98%E6%B8%85%E3%80%8D%E6%96%B9%E6%A1%88%E8%AE%BE%E7%BD%AE)，让页面显示效果更加细腻 -- 配置 `svg-sprite-loader` 以支持 Icon 组件使用。[文档链接](https://github.com/sorrycc/roadhog#svgspriteloaderdirs) （roadhog >= 0.6.0-beta1） +Open http://localhost:8000 in your browser, you will see dva welcome page. +## Integrate antd-mobile -## 接下来： +[See here for details](/docs/react/introduce#使用), the process is summarized as follows: -- 定义路由 -- 编写 UI Component -- 定义 Model +- `npm install antd-mobile babel-plugin-import --save` install dependency. +- `babel-plugin-import` is used to load scripts and styles on demand, edit` .roadhogrc `so that the` babel-plugin-import` plugin takes effect. [see here for details](https://github.com/sorrycc/roadhog#extrababelplugins) +- [HD program settings](https://github.com/ant-design/ant-design-mobile/wiki/antd-mobile-0.8-%E4%BB%A5%E4%B8%8A%E7%89%88%E6%9C%AC%E3%80%8C%E9%AB%98%E6%B8%85%E3%80%8D%E6%96%B9%E6%A1%88%E8%AE%BE%E7%BD%AE) +- Configure `svg-sprite-loader` to support the use of the Icon component. [see here for details](https://github.com/sorrycc/roadhog#svgspriteloaderdirs) （roadhog >= 0.6.0-beta1） -请参考 [dva examples](https://github.com/dvajs/dva/tree/master/examples) -## 构建应用 +## Next: -完成开发并且在开发环境验证之后，就需要部署给我们的用户了。先执行下面的命令： +- Define Router +- Write UI Components +- Define Model -```bash -$ npm run build -``` +See [dva examples](https://github.com/dvajs/dva/tree/master/examples) + +## Build -几秒后，输出应该如下： +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: ```bash -Child - Time: 14008ms - Asset Size Chunks Chunk Names - index.html 255 bytes [emitted] - common.js 1.18 kB 0 [emitted] common - index.js 504 kB 1, 0 [emitted] index - index.css 127 kB 1, 0 [emitted] index +$ npm run build ``` -`build` 命令会打包所有的资源，包含 JavaScript, CSS, web fonts, images, html 等。然后你可以在 `dist/` 目录下找到这些文件。 +The `build` command packages up all of the assets that make up your application —— JavaScript, templates, CSS, images, and more. Then you can find these files in the `dist /` directory. -## 下一步 +## What's Next -我们已经完成了一个简单应用，你可能还有很多疑问，比如： +We have completed a simple application, but you may still have lots of questions, such as: -- 如何处理异步请求 -- 如何优雅地加载初始数据 -- 如何统一处理出错，以及特定操作的出错 -- 如何动态加载路由和 Model，以加速页面载入速度 -- 如何实现 hmr -- 如何 mock 数据 -- 等等 +- How to dealing with async logic +- How to load initial data elegantly +- How to handle onError globally and locally +- How to load Routes and Models on demand +- How to implement HMR +- How to mock data +- and so on... -你可以： +You can: -- 访问 [dva 官网](https://github.com/dvajs/dva)。 -- 查看所有 [API](https://github.com/dvajs/dva#api)。 -- [教程](https://github.com/dvajs/dva-docs/blob/master/v1/zh-cn/tutorial/01-%E6%A6%82%E8%A6%81.md)，一步步完成一个中型应用。 -- 看看 [dva 版 hackernews](https://github.com/dvajs/dva-hackernews) 是 [如何实现](https://github.com/sorrycc/blog/issues/9) 的。 +- Visit [dva official website](https://github.com/dvajs/dva). +- Be familiar with the [8 Conpects](https://github.com/dvajs/dva/blob/master/docs/Concepts.md), and understand how they are connected together +- Know all [dva APIs](https://github.com/dvajs/dva/blob/master/docs/API.md) +- Checkout [dva knowledgemap](https://github.com/dvajs/dva-knowledgemap), including all the basic knowledge with ES6, React, dva +- Checkout [more FAQ](https://github.com/dvajs/dva/issues?q=is%3Aissue+is%3Aclosed+label%3Afaq) +- If your project is created with [dva-cli](https://github.com/dvajs/dva-cli) , checkout how to [Configure it](https://github.com/sorrycc/roadhog#配置) diff --git a/docs/react/practical-projects.zh-CN.md b/docs/react/practical-projects.zh-CN.md index 2f8034631e7..064c1139a7c 100644 --- a/docs/react/practical-projects.zh-CN.md +++ b/docs/react/practical-projects.zh-CN.md @@ -11,17 +11,19 @@ title: 项目实战 --- -## 安装 dva +## 安装 dva-cli -通过 npm 安装 dva 。 +通过 npm 安装 dva-cli 并确保版本是 `0.7.0` 或以上。 ```bash $ npm install dva-cli -g +$ dva -v +0.7.0 ``` ## 创建新应用 -安装完 dva-cli 之后，就可以在 terminal 里访问到 `dva` 命令。现在，你可以通过 `dva new` 创建新应用。 +安装完 dva-cli 之后，就可以在命令行里访问到 `dva` 命令（[不能访问？](http://stackoverflow.com/questions/15054388/global-node-modules-not-installing-correctly-command-not-found)）。现在，你可以通过 `dva new` 创建新应用。 ```bash $ dva new dva-quickstart @@ -39,10 +41,14 @@ $ npm start 几秒钟后，你会看到以下输出： ```bash - proxy: load rule from proxy.config.js - proxy: listened on 8989 -📦 411/411 build modules -webpack: bundle build is now finished. +Compiled successfully! + +The app is running at: + + http://localhost:8000/ + +Note that the development build is not optimized. +To create a production build, use npm run build. ``` 在浏览器里打开 http://localhost:8989 ，你会看到 dva 的欢迎界面。 @@ -52,7 +58,6 @@ webpack: bundle build is now finished. [见此使用示例](/docs/react/introduce#使用)，要点概括如下： - `npm install antd-mobile babel-plugin-import --save` 安装依赖 -- 不需要再设置 resolve (因为 atool-build 内部已经设置好) - `babel-plugin-import` 是用来按需加载脚本和样式，编辑 `.roadhogrc `，使 `babel-plugin-import` 插件生效。[参考文档](https://github.com/sorrycc/roadhog#extrababelplugins) - [高清方案设置](https://github.com/ant-design/ant-design-mobile/wiki/antd-mobile-0.8-%E4%BB%A5%E4%B8%8A%E7%89%88%E6%9C%AC%E3%80%8C%E9%AB%98%E6%B8%85%E3%80%8D%E6%96%B9%E6%A1%88%E8%AE%BE%E7%BD%AE)，让页面显示效果更加细腻 - 配置 `svg-sprite-loader` 以支持 Icon 组件使用。[文档链接](https://github.com/sorrycc/roadhog#svgspriteloaderdirs) （roadhog >= 0.6.0-beta1） @@ -74,19 +79,7 @@ webpack: bundle build is now finished. $ npm run build ``` -几秒后，输出应该如下： - -```bash -Child - Time: 14008ms - Asset Size Chunks Chunk Names - index.html 255 bytes [emitted] - common.js 1.18 kB 0 [emitted] common - index.js 504 kB 1, 0 [emitted] index - index.css 127 kB 1, 0 [emitted] index -``` - -`build` 命令会打包所有的资源，包含 JavaScript, CSS, web fonts, images, html 等。然后你可以在 `dist/` 目录下找到这些文件。 +`build` 命令会打包所有的资源，包含 JavaScript, CSS, images, html 等。然后你可以在 `dist/` 目录下找到这些文件。 ## 下一步 @@ -102,7 +95,9 @@ Child 你可以： -- 访问 [dva 官网](https://github.com/dvajs/dva)。 -- 查看所有 [API](https://github.com/dvajs/dva#api)。 -- [教程](https://github.com/dvajs/dva-docs/blob/master/v1/zh-cn/tutorial/01-%E6%A6%82%E8%A6%81.md)，一步步完成一个中型应用。 -- 看看 [dva 版 hackernews](https://github.com/dvajs/dva-hackernews) 是 [如何实现](https://github.com/sorrycc/blog/issues/9) 的。 +- 访问 [dva 官网](https://github.com/dvajs/dva) +- 理解 dva 的 [8 个概念](https://github.com/dvajs/dva/blob/master/docs/Concepts_zh-CN.md) ，以及他们是如何串起来的 +- 掌握 dva 的[所有 API](https://github.com/dvajs/dva/blob/master/docs/API_zh-CN.md) +- 查看 [dva 知识地图](https://github.com/dvajs/dva-knowledgemap) ，包含 ES6, React, dva 等所有基础知识 +- 查看 [更多 FAQ](https://github.com/dvajs/dva/issues?q=is%3Aissue+is%3Aclosed+label%3Afaq)，看看别人通常会遇到什么问题 +- 如果你基于 dva-cli 创建项目，最好了解他的 [配置方式](https://github.com/sorrycc/roadhog#配置)