讨论：antd-init@2.0 #101
Comments
|
项目开发实践要 |
|
《项目开发实践》纲要：
@afc163 看下是否可行? |
|
可以，术语 API 什么的尽量保持最简单的就好，详细的链到 dva 的文档中去。 |
|
嗯，要说明在 dva 中如何使用 antd 。 |
|
项目的 dva 例子代码可以略微复杂一些，可以包括基本的 antd 布局。类似全栈指引平台的例子。 |
|
👍 antd-init 除了 demo 之外的都删掉吧，保持简单 |
|
可以帮忙在 demo 中把 dora 升级至 0.4 ，dora-plugin-webpack 升级至 0.8 吗？ |
|
@zenany ok，2.0 里一起处理掉。 |
|
@sorrycc 你好，想问一下，现在到底用antd-init 还是 dva-cli创建项目，文档大概什么时候会上线呢？谢谢 |
|
@275287902 用 dva-cli，文档这个星期。 |
|
@sorrycc 好的，谢谢 |
|
antd-init 命令执行后的推荐文案： |
|
项目开发实战： dva 是一个基于 react 和 redux 的轻量应用框架，概念来自 elm，支持 side effects、热替换、动态加载、react-native、SSR 等，已在生产环境广泛应用。 本文会引导你使用 dva 和 antd 从 0 开始创建一个简单应用。 会包含以下内容：
安装 dva通过 npm 安装 dva 。 $ npm install dva-cli -g创建新应用安装完 dva-cli 之后，就可以在 terminal 里访问到 $ dva new dva-quickstart这会创建 然后我们 $ cd dva-quickstart
$ npm start几秒钟后，你会看到以下输出： proxy: load rule from proxy.config.js
proxy: listened on 8989
📦 411/411 build modules
webpack: bundle build is now finished.在浏览器里打开 http://localhost:8989 ，你会看到 dva 的欢迎界面。 使用 antd通过 npm 安装 $ npm install antd babel-plugin-antd --save编辑 + webpackConfig.babel.plugins.push(['antd', {
+ style: 'css'
+ }]);
定义路由我们要写个应用来先显示产品列表。首先第一步是创建路由，路由可以想象成是组成应用的不同页面。 新建 route component import React from 'react';
const Products = (props) => {
return (
<h2>List of Products</h2>
);
};
exports default Products;添加路由信息到路由表，编辑 + import Products from './routes/Products';
...
+ <Route path="/products" component={Products} />然后在浏览器里打开 http://localhost:8989/#/products ，你应该能看到前面定义的 编写 UI Component随着应用的发展，你会需要在多个页面分享 UI 元素 (或在一个页面使用多次)，在 dva 里你可以把这部分抽成 component 。 我们来编写一个 新建 import React, { PropTypes } from 'react';
import { Table, Popconfirm, Button } from 'antd';
const ProductList = ({ onDelete, products }) => {
const columns = [
{
title: 'Name',
dataIndex: 'name',
},
{
title: 'Actions',
render(text, record) {
return (
<Popconfirm title="Delete?" onConfirm={onDelete.bind(this, record.id)}>
<Button>删除</Button>
</Popconfirm>
);
},
},
];
return (
<Table
dataSource={products}
columns={columns}
/>
);
};
ProductList.proptypes = {
onDelete: PropTypes.func.isRequired,
products: PropTypes.array.isRequired,
};
export default ProductList;定义 Model完成 UI 后，现在开始处理数据和逻辑。 dva 通过 model 的概念把一个领域的模型管理起来，包含同步更新 state 的 reducers，处理异步逻辑的 effects，订阅数据源的 subscriptions 。 新建 model import dva from 'dva';
export default {
namespace: 'products',
state: [],
reducers: {
'delete'(state, { payload: id }) {
return state.filter(item => item.id !== id);
},
},
};这个 model 里：
然后别忘记在 // 3. Model
+ app.model(require('./models/products'));connect 起来到这里，我们已经单独完成了 model 和 component，那么他们如何串联起来呢? dva 提供了 connect 方法。如果你熟悉 redux，这个 connect 就是 react-redux 的 connect 。 编辑 import React from 'react';
import { connect } from 'dva';
import ProductList from '../components/ProductList';
const Products = (props) => {
function handleDelete(id) {
props.dispatch({
type: 'products/delete',
payload: id,
});
}
return (
<div>
<h2>List of Products</h2>
<ProductList onDelete={handleDelete} products={props.products} />
</div>
);
};
// export default Products;
export default connect(({ products }) => ({
products
}))(Products);最后，我们还需要一些初始数据让这个应用 run 起来。编辑 - const app = dva();
+ const app = dva({
+ initialState: {
+ products: [
+ { name: 'dva', id: 1 },
+ { name: 'antd', id: 2 },
+ ],
+ },
+ });刷新浏览器，应该能看到以下效果：
构建应用完成开发并且在开发环境验证之后，就需要部署给我们的用户了。先执行下面的命令： $ npm run build几秒后，输出应该如下： 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
下一步我们已经完成了一个简单应用，你可能还有很多疑问，比如：
你可以：
|
|
@afc163 项目开发实践放哪里? 以及前面上手文档的改动，需要我发 pr 吗? |
|
发 PR 到 ant design master 分支吧。双语哦。 |
|
|
@275287902 全局出错处理举例： import { message } from 'dva';
const app = dva({
onError(error) {
message.destroy();
message.error(error);
},
}); |
|
@sorrycc 好的 非常感谢！ |
|
antd太高产了，大赞！！！ |
|
demo boilerplate 中是否可以使用 css 而非 less？如同 create-react-app 中的项目模板一样 https://github.com/facebookincubator/create-react-app/tree/master/template/src 。less + css module 对初学前端这还是有一定成本的。 文案调整建议： |
|
@zenany 认同，demo 保持最简单吧。其他人有不同想法吗? 没有的话我就按这个改了。 |
|
antd-init@2.0.0-beta2 |
|
(英文版) Project Development Practice: 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. This article will guide you to create a simple application from zero using dva and antd. Include the following:
Install dvaInstall dva with npm. $ npm install dva-cli -gCreate New AppAfter installed dva-cli, you can have access to the $ dva new dva-quickstartThis creates Then $ cd dva-quickstart
$ npm startAfter a few seconds, you will see thw following output: proxy: load rule from proxy.config.js
proxy: listened on 8989
📦 411/411 build modules
webpack: bundle build is now finished.Open http://localhost:8989 in your browser, you will see dva welcome page. Integrate antdInstall $ npm install antd babel-plugin-antd --saveEdit + webpackConfig.babel.plugins.push(['antd', {
+ style: 'css'
+ }]);
Define RouterWe need to write an application displaying the list of products. The first step is to create a route. Create a route component import React from 'react';
const Products = (props) => {
return (
<h2>List of Products</h2>
);
};
exports default Products;Add routing infomation to router, edit + import Products from './routes/Products';
...
+ <Route path="/products" component={Products} />Then open http://localhost:8989/#/products in your browser, you should be able to see the Write UI ComponentsAs 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. Let's create a Create import React, { PropTypes } from 'react';
import { Table, Popconfirm, Button } from 'antd';
const ProductList = ({ onDelete, products }) => {
const columns = [
{
title: 'Name',
dataIndex: 'name',
},
{
title: 'Actions',
render(text, record) {
return (
<Popconfirm title="Delete?" onConfirm={onDelete.bind(this, record.id)}>
<Button>删除</Button>
</Popconfirm>
);
},
},
];
return (
<Table
dataSource={products}
columns={columns}
/>
);
};
ProductList.proptypes = {
onDelete: PropTypes.func.isRequired,
products: PropTypes.array.isRequired,
};
export default ProductList;Define ModelAfter complete the UI, we will begin processing the data and logic. dva manages domain model with Let's create a model import dva from 'dva';
export default {
namespace: 'products',
state: [],
reducers: {
'delete'(state, { payload: id }) {
return state.filter(item => item.id !== id);
},
},
};In this model:
Then don't forget to require it in // 3. Model
+ app.model(require('./models/products'));ConnectSo far, wee have completed a seperate model and component. Then how to connect these together? dva provides a Edit import React from 'react';
import { connect } from 'dva';
import ProductList from '../components/ProductList';
const Products = (props) => {
function handleDelete(id) {
props.dispatch({
type: 'products/delete',
payload: id,
});
}
return (
<div>
<h2>List of Products</h2>
<ProductList onDelete={handleDelete} products={props.products} />
</div>
);
};
// export default Products;
export default connect(({ products }) => ({
products
}))(Products);Finally, we need some initial data to make the application run together. Edit - const app = dva();
+ const app = dva({
+ initialState: {
+ products: [
+ { name: 'dva', id: 1 },
+ { name: 'antd', id: 2 },
+ ],
+ },
+ });Refresh your browser, you should see the following result:
BuildNow 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: $ npm run buildAfter a few seconds, the output should be as follows: 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] indexThe What's NextWe have completed a simple application, but you may still have lots of questions, such as:
You can:
|
|
|
|
|
antd-init --demo)The text was updated successfully, but these errors were encountered: