狗屎一样的React（第六节，React首页热门项目）

react

这一节我们简单说一下首页添加热门项目，其实热门项目往往就是一个项目，或者是热门的，这个项目热门不热门其实跟我们前端没有关系，我们调用后台接口，传了该传的数据，自然热门项目就出来了，言外之意就是热门不热门，跟我们前端没有关系，我们只是发请求，显数据。

这一小节的代码内容会和第四小节差不多，但说这一小节是有必要的，因为有项目列表，就会涉及到项目详情页。而React更适合做单页应用，所以其他页面就需要引入react-router这个知识点，所以这一小节就当时一个铺垫。

1、看Index.js

我们添加新的组件组装，

var SiteIndex = React.createClass({
render: function(){
return (
<div>
<AppTop word="首页"/>
<BnanerSwipe />
<HotProject />
</div>
);

}

});

这里我们新添加了HotProject组件，这里你就要想到需要在页面里新定义一个HotProject

实现组件了，关于实现没有什么特别之处，和首页banner轮播图那一小节大同小异。

2、看一下我们写完代码后的实现效果截图吧：

天龙八部这个就是加载出来的热门项目，我们展示了一些项目的字段信息，有图片，标题，作者以及关注数据，后续添加react-router后，我们将通过点击标题来进行跳转。

3、小伙伴们是不是有点想知道react-router是怎么使用的了呢，那么在什么地方使用react-router呢，使用了有什么好处呢，喜欢的小伙伴们请关注下一节：狗屎一样的React（第七节，React-router 4.0这个玩意）