首页 > 代码库 > dva+react项目搭建
dva+react项目搭建
dva 是一个基于 react 和 redux 的轻量应用框架,redux步骤繁杂,更容易出错,搭建成本更高。
1.安装dva-cli:确保版本在0.7.0或以上
$ npm install dva-cli -g $ dva -v 0.7.6
2.创建新应用
$ dva new dva-quickstart
3.启动程序
$ cd dva-quickstart $ npm start
4.使用antd框架
$ npm install antd babel-plugin-import --save
编辑 .roadhogrc
,使 babel-plugin-import
(按需加载)插件生效。
"extraBabelPlugins": [ "transform-runtime", ["import", { "libraryName": "antd", "style": "css" }] ],
5.定义路由
新建 route component routes/products.js
,内容如下:
import React from ‘react‘; const Products = (props) => ( <h2>List of Products</h2> ); export default Products;
添加路由信息到路由表,编辑 router.js
:
import products from ‘./routes/products‘; <Route path="/products" component={products} />
然后在浏览器里打开 http://localhost:8000/#/products ,你应该能看到前面定义的 <h2>
标签。
6.编写页面
新建 components/list.js
文件:
import React from ‘react‘; import PropTypes from ‘prop-types‘; import { Table, Popconfirm, Button } from ‘antd‘; const List = ({ onDelete, products }) => { const columns = [{ title: ‘Name‘, dataIndex: ‘name‘, }, { title: ‘Actions‘, render: (text, record) => { return ( <Popconfirm title="Delete?" onConfirm={() => onDelete(record.id)}> <Button>Delete</Button> </Popconfirm> ); }, }]; return ( <Table dataSource={products} columns={columns} /> ); }; List.propTypes = { onDelete: PropTypes.func.isRequired, products: PropTypes.array.isRequired, }; export default List;
7.定义model
新建 model models/products.js
:
import dva from ‘dva‘; export default { namespace: ‘products‘, state: [], reducers: { ‘delete‘(state, { payload: id }) { return state.filter(item => item.id !== id); }, }, };
在 index.js
里载入他:
app.model(require(‘./models/products‘));
8.connect起来
编辑 routes/products.js
,替换为以下内容:
import React from ‘react‘; import { connect } from ‘dva‘; import List from ‘../components/list‘; const Products = ({ dispatch, products }) => { function handleDelete(id) { dispatch({ type: ‘products/delete‘, payload: id, }); } return ( <div> <h2>List of Products</h2> <List onDelete={handleDelete} products={products} /> </div> ); }; // export default Products; export default connect(({ products }) => ({ products, }))(Products);
我们还需要一些初始数据让这个应用 run 起来。编辑 index.js
:
const app = dva({ initialState: { products: [ { name: ‘dva‘, id: 1 }, { name: ‘antd‘, id: 2 }, ], }, });
参考链接:https://ant.design/docs/react/practical-projects-cn
完整项目地址:待定
安装依赖:npm install
启动项目: npm start
浏览器打开:http://localhost:8000/#/
http://localhost:8000/#/products
dva+react项目搭建
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。