![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
简书项目
zhuhui2000
这个作者很懒,什么都没留下…
展开
-
04.在react中使用iconfont
解释:iconfont是什么?Iconfont 是阿里提供了一个图标库,你可以想象成是一个售卖图标的超市,挑选你需要的图标放入购物车,然后 Iconfont 会为你打包你购物车里的图标,自动生成一种新的字体,可以选择下载到本地,在你的项目中引入这种字体,这样即便没有网络的情况也可以使用图标。如何使用:阅读下面链接https://segmentfault.com/a/1190000016639...转载 2019-05-30 08:41:00 · 1009 阅读 · 0 评论 -
25.使用redux对详情页面进行数据管理
1.我们需要使用store进行数据管理,首先我们需要在detail目录下新建四个文件,actionCreatores,actionTypes,index,reducer2.index.js文件中:引入actionCreators和actionTypes并且将其导出import * as actionCreators from './actionCreators';import * as a...原创 2019-06-13 16:27:49 · 423 阅读 · 0 评论 -
26.详情页面异步获取数据
1.我们实际开发中,数据都是从后端获取的,并且可以更改数据,我们这里再public文件下新建一个json文件,用来模拟我们实际开发中从后端获取的数据,并且我们通过ajax获取异步请求2.在detail文件中,我们存放数据{ "success":true, "data":{ "title":"一树花开", "content":"<p&g...原创 2019-06-14 08:43:59 · 230 阅读 · 0 评论 -
27.详情页面路由参数的传递
1.当我们点击详情页时,我们希望可以知道此时的id是多少2.我们在home目录下的List文件中,在Link中加上一个id,并且把详情页的item的id加到detail3.在APP中,我们在path路径下加上/:id4.这时候我们点击第一个详情页,可以发现5.在index文件中,我们打印输出一下this.props.match.params.id6.然后我们将this.props.ma...原创 2019-06-14 11:39:03 · 269 阅读 · 0 评论 -
17.首页部分组件的拆分
1.我们在src目录下新建一个文件夹:pages,在pages中新建两个文件夹:Home和Detail然后分别在其内部新建两个index.js文件2.在Home的index中:3.在Detail的index中:4.然后我们在APP中,将home和detail引入5.将Home和Detail作为组件传入路由这样Home和Detail两个部分就实现了拆分,并且不同目录下显示的内容也是不一...原创 2019-06-09 08:38:19 · 271 阅读 · 0 评论 -
18.首页推荐部分代码编写
1.在Recommed文件中,我们定义两个元素RecommedWrapper和RecommedItem,并且从styled文件中将它们引入2.在styled文件中,我们去编写刚刚两个标签的样式原创 2019-06-09 16:33:54 · 344 阅读 · 0 评论 -
28.登录页面的布局
1.我们首先在pages目录下新建一个文件login2.然后我们在login中新建一个index.js,里面定义一些初始的代码:import React,{PureComponent} from 'react';import {connect} from 'react-redux';class Login extends PureComponent{ render() { ...原创 2019-06-14 15:57:26 · 1329 阅读 · 0 评论 -
19.首页异步数据的获取
1.我们在public文件夹下的api文件夹下新建一个json文件,home.json2.在这里面我们将home页面中的数据存放进来,home.json中的代码{ "success":true, "data":{ "articleList": [{ "id": 1, "title": "男人离不开的,往往是“不好惹”...原创 2019-06-09 21:50:35 · 208 阅读 · 0 评论 -
20.异步代码拆分优化
actionCreators:import axios from 'axios';import * as actionTypes from './actionTypes';export const getHomeInfo = () => { return (dispatch) => { axios.get('/api/home.json').then((...原创 2019-06-10 15:24:51 · 153 阅读 · 0 评论 -
21.实现加载更多内容
1.我们将实现加载更多内容放在List这一部分,首先,在list中新定义一个标签LoadMore2.然后我们需要从style文件中引入。3.在style文件中,我们去定义这个元素的样式4.然后效果就出来了5.如何实现点击更多文字,出来更多的推荐文字呢我们首先给LoadMore绑定一个单击响应事件getMoreList然后我们使用mapDispatch派发请求,将getListMor...原创 2019-06-11 08:18:22 · 963 阅读 · 0 评论 -
29.登录功能的实现
1.首先我们需要用redux来管理数据,在login目录下新建新建一个store文件夹,在store文件下新建4个文件:index.js,reducer.js,actionTypes.js,actionCreators.js2.在reducer.js文件中,我们定义一个初始的默认值:3.然后我们需要在src根目录下的store的reducer中,添加login下面的store4.在我们浏览...原创 2019-06-16 16:28:57 · 191 阅读 · 0 评论 -
22.返回顶部功能的实现
1.我们将返回顶部功能的实现放在home目录下的index,我们在这里定义一个BackTop的元素2.从style中引入;3.在style中对BackTop进行样式定义4.怎么实现我们往下拖页面的时候回到顶部才出现,刚开始在顶部是不出现的1.在reducer中定义一个showScroll,初始为false2.回到我们的Home目录下的index,使用mapState接收showScrol...原创 2019-06-11 11:13:57 · 303 阅读 · 0 评论 -
23.实现详情页面功能跳转
1.我们在list文件中,我们引入模块react-router-dom,实现页面跳转2.使用Link进行跳转操作3.点击简书怎么回到首页我们在header文件下的style中,将a换成div然后我们在header目录下的index文件中,我们使用Link实现跳转3.引入Link4.这时候会有一个报错5.我们需要在APP.js文件中,把Header放在BrowserRouter下面...原创 2019-06-11 15:40:54 · 729 阅读 · 0 评论 -
12.使用ajax获取热门搜索中的推荐数据
1.将数据存放在一个数组中,我们在header文件夹下面的reducer中默认创建一个空数组2.借助redux-thunk完成异步操作打开终端,输入:yaen add redux-thunk重启npm start3 .在src目录下的store的index中,我们需要引入redux-thunk中间件4.回到header目录下的index中,当我们聚焦的时候,我们需要使用getList(...原创 2019-06-02 11:09:16 · 228 阅读 · 0 评论 -
03.使用styled-components完成Header布局(2)
在index.js的jsx部分加入标签,然后在其头部引用,最后去styled.js中写相关的样式:index.js完整代码:import React, { Component } from 'react';import { HeadrerWrapper, Logo, Nav, NavItem, NavSearch, Addition, ...原创 2019-05-29 20:58:51 · 181 阅读 · 0 评论 -
05.头部搜索框的动画效果的实现
目的:当我们点击搜索框的时候,搜索框的长度会自动变长,并且放大镜的底色会变深,当我们鼠标离开搜索框的时候,搜索框回到原来的状态1.首先,我们进行一个数据的设定,将focused的默认值设置为false2.当鼠标移入到搜索框聚焦的时候,我们将state中的focused设置为true,离开的时候设置为false,如下,给搜索框绑定聚焦事件:3.我们样式的设置通过className的改变...原创 2019-05-30 09:53:13 · 504 阅读 · 0 评论 -
06.在项目中用react-redux进行应用数据管理
1.首先在终端安装redux和react-reduxyarn add reduxyarn add react-redux安装好之后重启终端npm start2.在src目录下新建一个文件夹store,在store目录下新建两个文件:index.js,reducer.js在index.js中:我们需要引入redux和reducerimport { createStore } f...原创 2019-05-30 14:53:26 · 219 阅读 · 0 评论 -
07.使用Redux DevTools Extension工具以及combineReducers对数据拆分管理
首先Redux DevTools Extension是什么,用来干嘛?Redux DevTools Extension 提供了大部分常用的监听器去配置你的项目,不需要安装任何模块(其实有安装选项)。配置极其简单1.我们只需要在store目录下的index文件中引入:效果:2.根据不同块,将reducer拆分成很多小的reducer.在common–>header下新建一个文...原创 2019-05-30 17:52:01 · 212 阅读 · 0 评论 -
13.热门搜索点击换一换,换页功能的实现
1.我们可以看到,我们现在页面上将从json中获取到的数据全部显示出来,那我们如何做,才能使每次只显示10个?2.首先在reducer的默认数据中,我们定义一个当前页和一个总页数,都默认为1:3.在actionCreators中,我们将从json中获取到的数据分成每10个一页。5.在reducer中,我们接收数据,并将原来的默认的totalPage替换为刚刚action请求的新的数据的页数...原创 2019-06-05 11:05:41 · 2723 阅读 · 0 评论 -
08.拆分action
1.首先在header–>store下新建文件actionCreators.js2.actionCreators.js是将action的类型拆分出来,代码如下:export const searchFocus = () => ({ type:'search_focus'});export const searchBlur = () => ({ type:...原创 2019-05-30 22:40:24 · 306 阅读 · 0 评论 -
14.换一换中换页旋转功能的实现
1.进入iconfont.cn官方网站。按照步骤引入,然后我们在换一换前面插入:2.此时我们发现旋转图标跑到右下角去了,一个怎么修改呢?在这个后面我们再给它加一个zoom3.把原来的iconfont替换成zoom4.给旋转图标绑定样式,再加一个属性名spin6.怎么在点击换一换的时候,有一个旋转的动画效果呢?先给一些设置的初始值:7.在点击换一换的时候,如何让图标旋转360度?8....原创 2019-06-05 21:40:40 · 387 阅读 · 0 评论 -
15.避免无意义的请求的发送
1.当我们点击文本框时,就会发送一次ajax请求数据,其实在数据没有发送改变的情况下是无意义的2.原创 2019-06-05 22:24:51 · 154 阅读 · 0 评论 -
01.项目目录搭建以及styled-Components和Reser.css的结合使用
首先,我们使用脚手架创建了一个新的项目,这里我们对项目的一些基本文件进行整理,首先将一些不需要的文件删除,删除之后留下一些需要的文件,如下:这里我们将原来的style.css已经重命名为style.js文件。下面安装styled-Components,打开终端,输入命令:yarn add styled-Components,安装完成之后重新启动一下。styled-Componen...原创 2019-05-29 09:51:22 · 312 阅读 · 0 评论 -
16.如何在react中使用路由功能
1.什么是路由?路由就是指随着浏览器地址栏的变化,展示给用户的页面也不相同2.在项目中如何使用路由安装 yarn add react-router-dom重启终端 npm start在App.js中引入路由功能这里实现的是在首页的时候,只显示home,在detail的时候显示detail...原创 2019-06-06 14:08:03 · 335 阅读 · 0 评论 -
09.使用immutable.js库来管理store中的数据
1.安装immutable库yarn add immutable然后重启终端npm start2.在header文件夹下面的reducer中,我们引入immutable,并且进行数据设置3.因为将数据设置为不可改变的,所以在header文件夹下面的index中,我们引入reducer数据的方式需要改变原来的方式:修改之后的方式:4.修改reducer中state调用set方...原创 2019-06-01 13:51:53 · 126 阅读 · 0 评论 -
11.热门搜索样式布局
1.先看一下我们需要完成的东西当我们点击搜索框时,出现热门搜索中这些样式,当不点击时不出现2.首先,我们定义一个方法getListArea,将热门搜索里面的内容样式包含在里面:const getListArea = (show) => { if(show){ return ( <SearchInfo> ...原创 2019-06-01 17:23:13 · 327 阅读 · 0 评论 -
02.使用styled-components完成Header布局(1)
1.我们在src目录下新建一个文件夹common,并且在common下再新建一个文件夹Header用于存放整个项目的头部的代码。在header中新建两个文件index.js和style.js,另外需要在src目录下新建一个文件夹statics,用于存放图片2.我们需要在App.js文件中引入头部的组件,如下:3.我们现在就可以在Header文件夹下的文件中来编写头部的代码:index.j...原创 2019-05-29 16:22:25 · 318 阅读 · 0 评论 -
24.详情页面布局
1.我们打开pages目录下的detail进行详情页代码的设计在detail下新建一个文件style.js用来存放detail页面的css样式2.在index中,我们原创 2019-06-13 15:36:47 · 494 阅读 · 0 评论