antd入门教程

antd是基于react的一套UI框架, 由于是蚂蚁推出的UI库,已经应用在阿里系大量项目当中。所以稳定性和可靠性还是有保证的。 下面是作为一个新手使用antd的快速入门教程。

安装antd

直接使用antd提供的脚手架, dva-cli

npm install dva-cli -g  
dva new dva-quickstart  

组件调用流程

antd组件调用关系

  • 首先在index.js中定义新添加的组件.
app.model(require('./models/products'));  
  • 如果需要router跳转,在router.js中设置path
import Products from './routes/Products';  
<Route path="/products" exact component={Products} />  
  • 在router/ 中渲染组件
import React, { Component } from 'react';  
import { connect } from 'dva';  
import PlayerPage from '../components/Player';

// const PlayerRouter =(props)=>(
//   <h2>This is Player Page</h2>
//
// );

class PlayerRouter extends Component {  
  render() {
    console.log('In the playrouter')
    console.log(this)
    return (
      <div>
        <PlayerPage />
      </div>
    );
  }
};

export default connect(({ player }) => ({  
  player,
}))(PlayerRouter);
  • 定义model。

Model是antd中一个重要组件,可以异步获取数据,更新state状态,订阅store数据源。

与服务器交互,一般是调用定义在services目录中的api。

详细用法,参考这里

  • 定义Component

在这里渲染最终的页面, 处理父组件传入的参数(在props中)。