狗屎一样的React(第六节,React首页热门项目)

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

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

1、看Index.js

我们添加新的组件组装,

var SiteIndex = React.createClass({

render: function(){

return (

<HotProject/>

);

}

});

这里我们新添加了HotProject组件,这里你就要想到需要在页面里新定义一个HotProject实现组件了,关于实现没有什么特别之处,和首页banner轮播图那一小节大同小异。

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

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,831评论 25 709
  • 我认为,一个人长大后成熟了会变得豁达,对从前讨厌的人和事会渐渐有了包容心,甚至会像上帝宠溺他的孩子那样带着点圣人的...
    浑水摸鱼儿阅读 650评论 0 0
  • 一个月为短期目标半年为中期目标一年到三年为长期目标 那么,如何实现目标呢? 问题 焦虑(人有我无)挫败(没有开始)...
    寒门书生阅读 961评论 0 3
  • 本文结合涵盖了经济学的基本核心概念,市场营销的方法策略和沟通学的思维模式理念。哪些会令你受益匪浅呢? ...
    HEHEHEH阅读 549评论 0 0