![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
一个react简单项目
purple_lumpy
先,找一个方向,然后,收拾收拾好,一步一步来
展开
-
使用 Redux-immutable 统一数据格式
我们来看一下 src/common/header 下的 index.js 代码,如下。import React from 'react';import {connect} from 'react-redux';import { HeaderWrapper, Logo, Nav, NavItem, NavSearch, Addition, Button, S...原创 2019-03-29 14:24:44 · 321 阅读 · 0 评论 -
2-4 首页文章列表制作
这个组件的话,与2-3 专题组件很相似。它是 home 下的 List.js 组件.首先,我们来写一下 List.js 这个文件,如下。import React, {Component} from 'react';import { ListItem, ListInfo } from '../style';class List extends Component { rend...原创 2019-04-09 17:01:02 · 146 阅读 · 0 评论 -
2-5 首页推荐部分代码
推荐组件是在 src/pages/home/components 下的 Recommend.js 中,那么,我们先初始化一下这个组件如下。import React, {Component} from 'react';import { RecommendWrapper, RecommendItem} from '../style.js';class Recommend exte...原创 2019-04-13 19:54:00 · 302 阅读 · 0 评论 -
2-9 回到顶部功能
回到顶部的功能,因为代码量很少,因此就不将他单独拆分为一个js 文件了。我们在src/pages/home 下的index 中写它。index 如下。import React, {Component} from 'react';import { connect } from 'react-redux';import {HomeWrapper, HomeLeft, HomeRight,...原创 2019-04-17 16:57:05 · 101 阅读 · 0 评论 -
2-10 首页性能优化 PureComponent 以及路由跳转
前面我们把首页的功能完成了,现在我们做一下性能调优,与跳转到详情页面。首先,我们看到 src/pages/home 下面几乎所有组件,都调用了react-redux 的 connect 方法与 store 做了连接。这就会有一个问题,只要store 发生了改变,这些组件就都会被重新渲染。那我们可以使用一个生命周期函数 shouldComponentUpdate 中判断,只有在与本组件...原创 2019-04-17 17:42:35 · 237 阅读 · 0 评论 -
2-6 首页异步数据获取
前面我们把首页中的数据,都定义在了 reducer.js 中,现在,我们将这个数据放在远程,通过ajax 从接口中获取。当然是mock 数据。首页的数据,我们把它的接口定义为 "/api/home.json"然后返回数据大致是这样的:{ success: true, data: { topicList: [{ id: 1, title: '...原创 2019-04-15 10:38:45 · 197 阅读 · 0 评论 -
2-7 异步操作代码优化
2-6 中我们实现了ajax 发送请求,并将数据放到了redux 中。现在,我们来进行一个代码优化,将异步请求放在 action 中管理。可以先将 src/pages/home 下的 index.js 中 componentDidMount 生命周期函数中的代码,挪到changeHomeData 方法中,如下。import React, {Component} from 'reac...原创 2019-04-15 15:13:38 · 119 阅读 · 0 评论 -
3-1 详情页面 布局
上面我们把首页以及首页跳转到详情页面的部分写好了。接下来,我们开始写详情页面。我们在 src/pages/detail 下新建 style.js 文件。import styled from 'styled-components';export const DetailWrapper = styled.div` overflow: hidden; width: 620p...原创 2019-04-18 14:34:36 · 220 阅读 · 0 评论 -
3-2 使用redux 管理详情页面数据
上篇,完成了详情页面的布局。这里我们把详情页面的数据,放到redux 里管理。和home 页面类似。我们在 src/pages/detail 下创建目录 store。在 store 下创建 index.js, reducer.js, actionCreators.js, actionTypes.js 。我们把 detail 下的index中 标题 与 content 中的数据提取到redu...原创 2019-04-19 09:48:53 · 250 阅读 · 0 评论 -
3-3 异步获取详情页面数据
前面我们已经把详情页面数据放在了 redux 中,现在,我们要把redux 中内容通过ajax 方式异步获取。首先,我们在 src/pages/detail 下的 index 中写一下,组件的生命周期函数 componentDidMount ,在这儿发送ajax 请求。如下。我们发送一个actionCreators.getDetail() action(函数),在这个action 中我们来...原创 2019-04-20 12:15:14 · 145 阅读 · 0 评论 -
3-4 页面路由参数的传递
我们希望,点击每一个List 进入详情页的时候,把它的id 也传递给详情页,这样详情页就可以根据id 返回对象的值了。这儿,我们有两种方式\。首先我们来看看动态路由:打开 src/pages/home/components/List 如下。import React, {PureComponent} from 'react';import { connect } from 're...原创 2019-04-20 12:58:49 · 274 阅读 · 0 评论 -
3-5 登录页面布局
下面我们来写登录页面部分。首先,我们把页面布局写好。在 src/pages 下新建文件夹 login, 在 login 下新建文件 index.js 初始化它,如下。import React, {PureComponent} from 'react';import { connect } from 'react-redux'; class Login extends PureC...原创 2019-04-20 13:33:22 · 275 阅读 · 0 评论 -
3-6 登录功能实现
上面我们把登录页面的布局写好了,下面我们把登录页面的逻辑实现。首先,我们在 src/pages/login 下创建文件夹 store,然后在store 下创建四个文件:index.js , ruducer.js, actionCreators.js, actionTypes.js 。首先 index.js 如下import reducer from './reducer';impo...原创 2019-04-20 15:00:06 · 226 阅读 · 0 评论 -
3-7 登录鉴权
下面,我们来做这样的功能,页面有一些功能,只有登录之后才能使用,比如:“写文章” 按钮。我们先做一个假的写文章的页面。在src/pages 下新建文件夹 write ,在write 下新建文件 index.jsimport React, {PureComponent} from 'react';import {Redirect } from 'react-router-dom';im...原创 2019-04-20 15:15:43 · 170 阅读 · 0 评论 -
3-8 异步组件以及 withRouter 路由方法的使用
目前我们的项目,是单页面程序。第一次加载的时候,是把所有的组件都加载了的。当项目很大的时候,首屏时间可能会变得很长。我们可以使用异步组件来解决这个问题。我们可以用封装起来的第三方模块来实现,这样会没那么复杂。react-loadable我们可以在 github 找到它https://github.com/jamiebuilds/react-loadable先下载到项目吧yar...原创 2019-04-20 15:45:45 · 428 阅读 · 0 评论 -
2-3 首页专题区域及reducer 的设计
专题组件,就是 src/pages/home/components 下的Topic.js 。里面的内容如下。import React, {Component} from 'react';class Topic extends Component { render () { return ( <div>Topic</div&...原创 2019-04-09 15:46:53 · 171 阅读 · 0 评论 -
2-1 React 中的路由
路由 - 根据不同的url地址 显示不同的内容。要使用路由,我们先安装它。yarn add react-router-dom然后,如何使用它显示不同的地址对应的页面呢。我们打开src/App.js 文件,如下。import React, { Component } from 'react';import { Provider } from 'react-redux';impo...原创 2019-04-03 11:51:50 · 78 阅读 · 0 评论 -
避免无意义的ajax 请求发送
之前我们的代码,每次搜索框聚焦的时候,都会发送ajax 请求。这是很没有必要的。代码如下const mapDispatchToProps = (dispatch) => { return { handleFocus () { dispatch(actionCreators.getList()); dispatch(actionCreators.s...原创 2019-04-03 11:21:35 · 100 阅读 · 0 评论 -
热门搜索样式布局
我们来做,点击搜索栏,弹出“热门搜索” 的框子。我们先在 src/common/header/index.js 中写上这个组件( SearchInfo ),如下。 import { HeaderWrapper, Logo, Nav, NavItem, NavSearch, Addition, But...原创 2019-03-29 16:01:45 · 586 阅读 · 0 评论 -
2-2 首页组件的拆分
2-1 中我们引入了react 路由。(src/App.js )代码如下。class App extends Component { render() { return ( <div> <GlobalStyle /> <Provider store={store}> <div&g...原创 2019-04-04 09:40:39 · 184 阅读 · 0 评论 -
项目目录搭建, styled-components 与 reset.css 的使用
我们先使用npx create-react-app xxx(project name) 来创建项目。我们删除掉src 目录下,暂时不用的文件,只留下 index.js , index.css, App.js 三个文件。然后呢,为了实现css 的模块化,使模块间的css 不会冲突,我们使用一个第三方模块Styled-components对css 样式进行管理。好的,先来下载安装它。用...原创 2019-03-24 12:50:42 · 611 阅读 · 0 评论 -
使用styled-components 完成Header 组件布局
首先,我们在src 下面新建目录 common ,因为 Header 组件是很多页面都要共用的一个组件。然后我们在common下新建目录header,再在header 目录下新建文件 index.js。然后我们开始初始化这个组件,如下。import React, { Component } from 'react';class Header extends Component {...原创 2019-03-24 17:01:55 · 557 阅读 · 0 评论 -
使用iconfont 嵌入头部图标
我们现在iconfront 中下载下来需要的图标。下载解压后的文件如下。第二排的文件( 和第一排的.woff2 ),是我们要放到项目中去的。那么,我们首先在项目目录的src/statics 下,创建一个目录 iconfont,然后把第二排的文件拖进来。然后,我们需要改一下其中的iconfont.css 文件,把里面字体的路径改成相对路径。如下。@font-face {font...原创 2019-03-24 17:35:34 · 1411 阅读 · 0 评论 -
代码优化微调
前面我们实现了热门搜索最基本的功能,下面我们来将代码微调优化一下。首先,我们打开 src/common/header/store 下的 actionCreators.js 如下。import * as actionTypes from './actionTypes';import axios from 'axios';import { fromJS } from 'immutable...原创 2019-04-01 10:28:35 · 156 阅读 · 0 评论 -
使用Ajax 获取热门搜索 推荐数据
前面,我们写好了热门搜索的样式解构。下面,我们来做里面“换一批”的功能。换一批数据,通过 ajax 方式获取。这里,我们是mock 数据。要借助一下mock.js。先现在mock.js 到项目: yarn add mockjs安装好后,我们在src 下面新建一个文件mockdata.js 文件,然后在这个文件里写下面的内容。然后我们打开 src/common/header 下...原创 2019-04-01 10:29:13 · 231 阅读 · 0 评论 -
热门搜索换页功能实现
我们热门搜索,有一个“换一批”的按钮,点击它,就会换一批热门关键字。我们的实现是,ajax 获取很多热门搜索关键字,但只会显示十个,点击换一批会显示下一批十个关键字。那我们再去src/common/header/store 下的reducer.js 中新增两个数据page(当前页)、totalPage(总页数),如下。import { SEARCH_FOCUS, SEARCH_BLU...原创 2019-04-01 17:33:40 · 846 阅读 · 0 评论 -
搜索框动画效果实现
呃,我们的搜索框,为了不让输入的字符串把放大镜遮住,我们给input 设置padding-right 为30px,如下。export const NavSearch = styled.input` width: 160px; height: 38px; margin-top: 9px; margin-left: 20px; padding: 0 30px 0 20px;...原创 2019-03-28 09:57:57 · 1802 阅读 · 0 评论 -
使用React-redux 进行应用数据的管理
React 在处理小型的项目的时候是完全可以的。但是在处理复杂的项目时,React 自己是不够的。我们还需要使用redux 框架,帮助我们管理数据。如果我们使用了redux 管理数据,那我们尽量把数据都放到redux 中进行管理。下面,我们先把Header 组件中的focus 属性放到redux 中进行管理。先下载安装 redux 与 react-reduxyarn add red...原创 2019-03-28 13:43:56 · 173 阅读 · 0 评论 -
使用combineReducers 完成对数据的拆分管理
前面,我们将focused 属性放置在redux 中了。但是现在在浏览器中调试窗口看redux 的信息,还看不到,我们还需要做一些设置。我们可以在github 上搜索redux-devtools-extension 如下这个就是我们要的插件(它不需要安装)。github 的文档,往下翻,会找到它的使用方法,如下,是一部分。按照官网的写法,我们去src/store 下,找到 ...原创 2019-03-28 15:31:55 · 302 阅读 · 0 评论 -
actionCreators 与 constants 的拆分
下面我们继续对 redux reducer 中的数据进行拆分。我们打开src/common/header/store 下的reducer.jsconst defaultState = { focused: false};export default (state = defaultState, action) => { if (action.type === ...原创 2019-03-28 17:00:19 · 380 阅读 · 0 评论 -
使用 Immutable.js 来管理 store 中的数据
我们先来看一下 src/common/header/store 下的reducer ,如下。import { SEARCH_FOCUS, SEARCH_BLUR } from './actionTypes';const defaultState = { focused: false};export default (state = defaultState, action)...原创 2019-03-28 17:30:17 · 248 阅读 · 0 评论 -
2-8 实现加载更多功能
加载更多,就在在首页的底部有一个加载更多按钮,当点击它时,就能加载更多的 list 。由于它主要是加载更多的 list,因此,我们把加载更多放到 src/pages/home 下的 List.js 组件中。下面是 List.js 代码。import React, {Component} from 'react';import { connect } from 'react-redu...原创 2019-04-15 16:55:51 · 191 阅读 · 0 评论 -
最终 项目上线流程
项目开发完了,我们的模拟数据可以功成身退了。我们把mockdata.js 与 puclic 下的 api 目录 都可以删掉了。删掉后,我们运行命令yarn build然后呢,脚手架会给我们生成一个build 文件夹,这个文件夹就是打包好的前端代码了,这个代码,给后端就完成了前端部分的内容了。...原创 2019-04-20 16:08:53 · 299 阅读 · 0 评论