社区微信群开通啦，扫一扫抢先加入社区官方微信群
社区微信群
Okay，完成了项目的基本搭建React从入门到架构（2）–如何配置你的“CSS和JS路径”以后，我们得到了这样的一个页面：
有的同学会说，Okay，我知道怎么写了，我就在这个Return的内容里，写我的整个页面就可以了～！
这确实是一种办法，但是这样React的特性就完全被浪费掉了。。
我们先看一点儿最简单的组件化方法：
既然<App />和less文件都是可以组件化，那么<App />可不可以解构呢？直接上代码：
header.js文件，和App.js在同一个路径下，然后按照App.js进行复制，并修改名称等，如图所示；header.js文件中复制原先的<div className="AppHeader">这段代码进行渲染，如图所示；App.js文件中引入header.js文件，格式如下：import Header from './Header';App.js文件的第五行；App.js文件中的return()函数进行修改，如下：<div className="App">
<Header />
<div className="AppCenter">
<div className="AppSlider">
This is Sub Slider
</div>
<div className="AppContent">
This is Sub Content
</div>
</div>
<div className="AppFooter">
This is Footer
</div>
</div>
运行一下，和之前的一样。
这样，我们就实现了Header部分的组件化。
既然能把Header提取出来，是不是可以造轮子了呢？是不是可以把表格、树形图、侧边栏都封装成像Header一样的公共组件呢？那么，有没有别人封装好的轮子，我可以直接拿来用呢？说到这里，很多人可能想起了Bootstrap，没错，Bootstrap后来也推出了自己的React-Bootstrap。
但是我们今天要讲的是另外一个公共组件集:
ant designer该部分完全可以参考Antd的官方手册;
当然～我也会进行一些介绍：
npm -i -D antd@import '~antd/dist/antd.css';
Okay，刷新一下：
如果觉得我的文章对您有用，请随意打赏。你的支持将鼓励我继续创作！
