美文网首页React程序员移动开发
狗屎一样的React(第六节,React首页热门项目)

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

作者: 小几米 | 来源:发表于2017-04-06 17:38 被阅读80次

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

这一小节的代码内容会和第四小节差不多,但说这一小节是有必要的,因为有项目列表,就会涉及到项目详情页。而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这个玩意)

相关文章

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

    这一节我们简单说一下首页添加热门项目,其实热门项目往往就是一个项目,或者是热门的,这个项目热门不热门其实跟我们前端...

  • webpack+gulp 构建react项目

    @拭目以待:首发于webpack+gulp 构建react项目 背景 GirdManager首页,使用 React...

  • 用了react-router刷新404 nginx配置

    react项目用了react-router nginx配置如下 发现只有首页可以访问,在子页面刷新时not f...

  • React 入门

    1.React 的学习资源 react官方首页https://facebook.github.io/react/ ...

  • React简介

    学习资料 react官方首页https://facebook.github.io/react/react中文htt...

  • React 16.4 开发简书项目[8]

    第8章 项目实战:首页开发 8-1 什么是路由,如何在React中使用路由功能 npm i react-route...

  • React_新手入门

    React_轻松安装 (跟着小陈,带你玩转React) (热门的三大框架:Angular、React、Vue ) ...

  • 【总结】2016.12.08

    计划的任务 React环境的搭建与配置 React-Router Fetch 首页 实际完成 React环境的搭建...

  • React

    现在最热门的前端技术,毫无疑问就是React。React起源于Facebook公司的内部项目,他们认为现在的MVC...

  • React 入门实例(前半部分)

    现在最热门的前端框架,毫无疑问是React。 React 起源于 Facebook 的内部项目,因为该公司对市场上...

网友评论

    本文标题:狗屎一样的React(第六节,React首页热门项目)

    本文链接:https://www.haomeiwen.com/subject/ihvqattx.html