狗屎一样的React（第三节，创建app顶部标题栏）

这一节，我们将创建APP顶部通用的标题栏。这个东西项目中也很常用的，什么？你想不到什么是顶部通用标题栏，我给你找几个图片：

就是这个东西。react所有的我们所看到的每一块东西，我们都应该以模块的思路来做。

1、css内容以后我们将不再给大家截图怎么写，因为都学到react了，我就觉得你css怎么也使用了至少有一两年了吧，哪怕是半年，写个background，color ，font-size应该也没问题了吧。所以，你后续就在我们上一节的demo.css去写，这里不再多说了；

2、html内容仍然不动，甚至后续index.html几乎也不会有太多的改动，因为我们以后将更多的使用import来在js文件中引入js以及css，慢慢的你就理解了React的模块思路了；

3、来到上一节的inde.js这个入口js文件，我已经把代码写好了，如图：

采用react工厂方法，创建一个AppTop组件，注意，首字母要大写而且必须大写，然后还是上一节的ReactDOM的render渲染方法，这次我们把刚才创建的AppTop组件引入过来。这样打开浏览器，看一眼我们的小效果：

其实创建组件还有其他的写法，比如：

再或者这么写：

写法不同，但异曲同工，就看你怎么写着更顺手，就像拍黄瓜一样，我们可以给黄瓜套个塑料袋，用板砖拍，也可以直接用菜刀拍，也可以用拳头砸，也可以擦丝吃，更可以稍微切几刀蘸酱吃，结果都是把黄瓜吃掉，哈哈。

4、但这个顶部是多个页面都需要用的，除了首页外，比如登录页，比如列表页，比如详情页，再比如个人中心页，再个人中心的子页面，而且我们有过项目经验的都知道，这个公用顶部样式相同，显示文字却不相同。所以，我们还需要把这个顶部模块单独出来，添加传值显示文字

5、在src文件夹下的js文件夹下，创建top.js，这个就做为我们公共顶部的模块js文件，如图：

首先这个js模块引入了刚才的demo.css，然后创建AppTop没什么可说的了，多照着写几遍，然后的export是es6的使用，是要把我们创建的AppTop这个小模块给返回出去，供外面的模块引入使用。意思就是隔壁二大娘来家里借菜刀，然后她就import，你要是想借就提供一个export，说给你。没问题吧

6、然后是index.js这个入口js文件，怎么来使用我们单独创建的这个AppTop模块呢，如图：

在这里，我们通过import引入刚才的AppTop模块，其实跟原来的<script src="top.js">差不多，但React就是要这么写，就是为了凸显自己很牛掰，怎么样，是不是很狗屎，这突然让我想到一个郭德纲的经典段子：俩人出去旅游迷路了，迷茫之中听到的坏消息是这个地方啥也没有，只能靠吃牛粪过日子，好消息却是牛粪有的是。哎，你说为什么就不能吃牛肉呢？我们继续，然后引入了AppTop，继续render渲染，到id是root的div上。看一眼浏览器，这样就是一个公用的组件了。

7、但每个页面要显示的内容不同啊，何解？我们继续。我们将首页继续改造一下，如图：

我们又新创建了一个组件SiteIndex，这里面装上之前的AppTop，然后来render渲染SiteIndex，因为首页每个页面不单单只是会又顶部，还会有其他内容，后续首页我们就可以把其他组件继续装入SiteIndex中了。

8、再看看传入的 word="首页"，这个就相当于我们之前给方法传值，这里传入“首页”，然后top.js中，

采用this.props.word就可以拿到传值数据了，这样达到了就像以前我们传值显示一样的效果。

这一节稍微有点长，不过没关系，我尽量多截图，多打字，希望小伙伴们可以更轻松的去理解，实在是不理解的多敲几遍，多看几遍。下一节，我们将做一个首页banner图轮播的组件，而且几乎每个APP应用首页都会有banner图轮播，喜欢的小伙伴请关注下一节： 狗屎一样的React（第四节，首页banner图轮播）