狗屎一样的React(第六节,React首页热门项目)
来源:互联网 发布:光电效应实验报告数据 编辑:程序博客网 时间:2024/06/03 23:37
这一节我们简单说一下首页添加热门项目,其实热门项目往往就是一个项目,或者是热门的,这个项目热门不热门其实跟我们前端没有关系,我们调用后台接口,传了该传的数据,自然热门项目就出来了,言外之意就是热门不热门,跟我们前端没有关系,我们只是发请求,显数据。
这一小节的代码内容会和第四小节差不多,但说这一小节是有必要的,因为有项目列表,就会涉及到项目详情页。而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这个玩意)
- 狗屎一样的React(第六节,React首页热门项目)
- 狗屎一样的React(第六节,React首页热门项目)
- 狗屎一样的React(第四节,首页banner图轮播)
- 狗屎一样的React(第四节,首页banner图轮播)
- 狗屎一样的React(前言)
- 狗屎一样的React(第二节,让目录结构变得更易懂)
- 狗屎一样的React(第七节,前端路由这个玩意)
- 狗屎一样的React(第二节,让目录结构变得更易懂)
- 狗屎一样的React(第七节,前端路由这个玩意)
- 狗屎一样的React(第五节,React组件的生命周期)
- 狗屎一样的React(第八节,React-router 4.0的使用姿势)
- 狗屎一样的React(第五节,React组件的生命周期)
- 狗屎一样的React(第八节,React-router 4.0的使用姿势)
- 狗屎一样的React(第一节,怎么来搭建react demo更合适)
- 狗屎一样的React(第三节,创建app顶部标题栏)
- 狗屎一样的React(第三节,创建app顶部标题栏)
- [React]初始化React项目
- React Native商城项目实战05 - 设置首页的导航条
- Linux常用操作
- springboot 集成webservice客户端调用报错
- PHP访问修饰符(使用于属性)笔记(①)
- ORACLE数据库测试数据插入速度
- TIOBE 12 月排行榜:古老的 C 和后起之秀 Kotlin,谁是年度编程语言之王?
- 狗屎一样的React(第六节,React首页热门项目)
- Python基础篇之装饰器(decorator)
- OpenCV环境下绘制轮廓的外接多边形、最小立式矩形、最小外接圆
- linux字符驱动之初见
- python连接数据库
- ubuntu 安装 node
- 【管理】【OKR】Objectives and Key Results 目标和关键成果
- LOG算子
- php 批量导入数据方法 tp3.2