react笔记16（react+AntD搭建后台模板）

1最流行的开源React UI组件库

        material-ul（国外）

        ant-design（国内蚂蚁金服 http://design.alipay.com ）

2 安装

        npm  install  antd

3 成品图

4 搭建后台模板

          都是血与泪，又是2.0和4.0版本不兼容问题,这里明哥先简单的说一下2.0版本的写法思路

          当 URL 为 / 时，我们要渲染一个在 App 中的组件。不过在此时，App 的 render 中的 this.props.children 还是 undefined。这种情况我们可以使用 IndexRoute 来设置一个默认页面。

2.0版本的index.js文件

        现在，App 的 render 中的 this.props.children 将会是{MyInteroduce} 这个元素。这个功能就类似 Apache 的DirectoryIndex 以及 nginx的 index指令（上述功能都是在当请求的 URL 匹配某个目录时，允许你制定一个类似index.html的入口文件）

        然后在App模板中会用  {this.props.children}  去获取到用户点击的路由所指向的模板中所有子节点，从而实现页面切换功能

        剧本是很完美的，但是在4.0版本中，首先2.0中的已经被4.0版本中的 和所取代，同时和中只支持一个子元素，这时候我们就可以转换思路在中默认加载组件，同时地址栏访问 localhost：3000 的时候默认匹配 path="/" 加载{MyIntroduce}模板，使app组件中的 this.props.children属性变为MyIntroduce

4.0版本的index.js文件

App组件的内容

接下来我们就可以在每个模板中调用Antd中所封装的各种组件了

例如myTable.js文件

或者我们直接参考官方文档