1 React中使用路由

1.1 安装

yarn add react-router-dom

import { BrowserHistory, Route} from 'react-router-dom';

1.2 路由设置和使用

打开我们的APP.js，如下是设置的代码

代码解释：

import { BrowserRouter, Route} from 'react-router-dom'; 导入模块，外面加一层div 是有要去的 render只包含一个child

添加路由：

<BrowserRouter>

<Route path='/' exact render= {() => <div>home</div>}></Route>

<Route path='/detail' exact render= {() => <div>detail</div>}></Route>

</BrowserRouter>

path：路径

其中exact表示只有路径完全匹配才能访问（如果不设置的话，/detail的路径两个都可以访问到）

src/App.js

import React, { Component} from 'react';
import Header from './common/header'
import { BrowserRouter, Route} from 'react-router-dom';
import store from './store'
import { Provider } from 'react-redux';class App extends Component {render() {return (<Provider store={store}><div><Header /><BrowserRouter><Route path='/' exact render= {() => <div>home</div>}></Route><Route path='/detail' exact render= {() => <div>detail</div>}></Route></BrowserRouter></div></Provider>);}
}export default App;

2 首页组件的拆分

组件拆分原则：

组件拆分是为了我们更加容易的管理各个组件。因此在拆分的时候我们要进行一个合理拆分，使得我们的代码更简洁，更的容易维护

我们将上图分为 5 个区域，其中图片的显示很简单，我们就将它放在首页，index中，其它的放在conponents中进行管理

代码模板：

import React, {Component} from 'react';class Lsit extends Component {render() {return (<div>Lsit</div>)}
}export default Lsit;

App.js

import React, { Component} from 'react';
import Header from './common/header'
import { BrowserRouter, Route} from 'react-router-dom';
import Home from './pages/home';
import Detail from './pages/detail';
import store from './store'
import { Provider } from 'react-redux';
class App extends Component {render() {return (<Provider store={store}><div><Header /><BrowserRouter><Route path='/' exact component = { Home }></Route><Route path='/detail' exact component = { Detail }></Route></BrowserRouter></div></Provider>);}
}
export default App;

index.js

import React, {Component} from 'react';
import Topic from './components/Topic';
import List from './components/List';
import Writer from './components/Writer';
import Recommend from './components/Recommend';
import { HomeWrapper,HomeLeft,HomeRight
} from './style';class Home extends Component {render() {return (<HomeWrapper><HomeLeft><img className='banner-img' alt='' src="//upload.jianshu.io/admin_banners/web_images/4318/60781ff21df1d1b03f5f8459e4a1983c009175a5.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/1250/h/540" /><Topic /><List /></HomeLeft><HomeRight><Recommend /><Writer /></HomeRight></HomeWrapper>)}
}export default Home;

3 首页专题布局及reducer设计

3.1 布局

我们设置布局，同时调整样式，样式都在style.css进行

import React, {Component} from 'react';
import { TopicWrapper,TopicItem
} from '../style';class Topic extends Component {render() {return (<TopicWrapper><TopicItem><img className='topic-pic'src='https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1074417518,1198280004&fm=26&gp=0.jpg' alt='tu' />社会热点</TopicItem></TopicWrapper>)}
}
export default Topic;

Topic的样式

export const TopicItem = styled.div`float: left;height: 32px;line-height: 32px;margin-left: 18px;margin-bottom: 18px;padding-right: 10px;font-size: 14px;background: #f7f7f7;color: #000;border: 1px solid #dcdcdc;border-radius: 4px;.topic-pic {margin-right: 10px;display: block;float: left;width: 32px;height:32px;}
`

3.2 reducer设计

首先我们在home目录下，创建一个reducer和index，用index导出reducer，另外在reducer中存放我们需要的数据

如下：

(1)home/reducer

存放数据

import { fromJS } from 'immutable';//将其变为immutable
const defaultState = fromJS({topicList: [{id: 1,title: '社会热点',imgUrl: '//upload.jianshu.io/collections/images/261938/man-hands-reading-boy-large.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/64/h/64'},{id:2,title: '手绘',imgUrl: '//upload.jianshu.io/collections/images/21/20120316041115481.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/64/h/64'}]
});export default (state = defaultState, action) => {switch(action.type) {default:return state;}
}

(2)home/index

方便管理与导出

import reducer from './reducer';export {reducer};

(3)分析是否可以使用

我们的Provider包裹了我们的home，而home又包裹了Topic，完全可以从中获取数据

import React, { Component} from 'react';
import { BrowserRouter, Route} from 'react-router-dom';
import Header from './common/header';
import Home from './pages/home';
import Detail from './pages/detail'
import store from './store';
import { Provider } from 'react-redux';class App extends Component {render() {return (<Provider store={store}><div><Header /><BrowserRouter><Route path='/' exact component={Home}></Route><Route path='/detail' exact component={Detail}></Route></BrowserRouter></div></Provider>);}
}export default App;

(4)与src/reducr建立联系

import { reducer as headerReducer } from '../common/header/store';
import  {reducer as homeReducer} from '../pages/home/store';
//import { combineReducers } from 'redux';
import { combineReducers } from 'redux-immutable';const reducer =  combineReducers({header: headerReducer,home: homeReducer
}); export default reducer;

(5)使用数据

import React, {Component} from 'react';
import {connect} from 'react-redux';
import { TopicWrapper,TopicItem
} from '../style';class Topic extends Component {render() {const {list} = this.props;return (<TopicWrapper>{list.map((item) => (<TopicItem key={item.get('id')}><img //immutable获取要使用getclassName='topic-pic'src={ item.get('imgUrl')} alt='tu' />{item.get('title')}</TopicItem>))}</TopicWrapper>)}
}const mapState = (state) => ({list: state.get('home').get('topicList')
})export default  connect(mapState, null)(Topic);

4 首页文章列表制作

4.1 样式布局

布局的方式基本上就和专题布局的方式差不多，先进行样式的布局，因为内容分为两类：

1.有图片

2.无图片

import React, { Component } from 'react';
import { connect } from 'react-redux';
import {ListItem,ListInfo
} from '../style'class Lsit extends Component {render() {const {list} = this.props;return (<div><ListItem><img className='pic' src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1598593565605&di=7e03a7f64bab11b3da0a67f9a6b5ff41&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn%2Fw480h339%2F20180226%2F0d93-fyrwsqi3956378.jpg" alt="sabeining"/><ListInfo><h3 className='title'>撒贝宁说：我对自己的婚姻非常失望</h3><p className='desc'>在参加一档节目中,谈到婚姻，撒贝宁公开说道：“我觉得自己的婚姻非常的无望，也没有继续维持下去的必要。”惹得现场观众大吃一惊。 事实上当时马东故意...</p></ListInfo></ListItem><ListItem><ListInfo><h3 className='title'>我摆地摊，最惨痛的教训</h3><p className='noimgdesc'>曾经，我摆过一次摊，在龙眼丰收的7月里，进了30斤新鲜龙眼，进货价3元一斤，打算以5元单价出售。 找了个人流量大的道路旁，铺开一张垫子，挑选一些...</p></ListInfo></ListItem></div>)}
}export default Lsit;

style.js

export const TopicWrapper = styled.div`overflow: hidden;padding: 20px 0 10px 0;margin-left: -18px;border-bottom: 1px solid #dcdcdc;       //专题下加一个底线
`export const ListItem = styled.div`overflow: hidden;padding: 15px 0;border-bottom: 1px solid #dcdcdc;.pic {position: relative;top: 30px;float: right;width: 150px;height: 100px;border: 1px solid #f0f0f0;border-radius: 4px;}
`
export const  ListInfo = styled.div`width: 460px;float: left;.title {line-height: 18px;font-size: 18px;font-weight: bold;color: #333;margin-block-start: 10px;margin-block-end: 10px;}.desc {font-size: 13px;line-height: 24px;color: #999;}.noimgdesc {width: 640px;font-size: 13px;line-height: 24px;color: #999;}
`

结果如图所示：

4.2 数据管理

我们在reducer中增加我们需要的数据

import { fromJS } from 'immutable';//将其变为immutable
const defaultState = fromJS({topicList: [{id: 1,title: '社会热点',imgUrl: '//upload.jianshu.io/collections/images/261938/man-hands-reading-boy-large.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/64/h/64'},{id:2,title: '手绘',imgUrl: '//upload.jianshu.io/collections/images/21/20120316041115481.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/64/h/64'}],articleLists: [{id: 1,title: '撒贝宁说：我对自己的婚姻非常失望',desc: '在参加一档节目中,谈到婚姻，撒贝宁公开说道：“我觉得自己的婚姻非常的无望，也没有继续维持下去的必要。”惹得现场观众大吃一惊。 事实上当时马东故意...',imgUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1598593565605&di=7e03a7f64bab11b3da0a67f9a6b5ff41&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn%2Fw480h339%2F20180226%2F0d93-fyrwsqi3956378.jpg',imgAlt: '撒贝宁'},{id: 2,title: '我摆地摊，最惨痛的教训',desc: '曾经，我摆过一次摊，在龙眼丰收的7月里，进了30斤新鲜龙眼，进货价3元一斤，打算以5元单价出售。 找了个人流量大的道路旁，铺开一张垫子，挑选一些...',imgUrl: null},{id: 3,title: '撒贝宁说：我对自己的婚姻非常失望',desc: '在参加一档节目中,谈到婚姻，撒贝宁公开说道：“我觉得自己的婚姻非常的无望，也没有继续维持下去的必要。”惹得现场观众大吃一惊。 事实上当时马东故意...',imgUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1598593565605&di=7e03a7f64bab11b3da0a67f9a6b5ff41&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn%2Fw480h339%2F20180226%2F0d93-fyrwsqi3956378.jpg',imgAlt: '撒贝宁'},{id: 4,title: '我摆地摊，最惨痛的教训',desc: '曾经，我摆过一次摊，在龙眼丰收的7月里，进了30斤新鲜龙眼，进货价3元一斤，打算以5元单价出售。 找了个人流量大的道路旁，铺开一张垫子，挑选一些...',imgUrl: null}]});export default (state = defaultState, action) => {switch(action.type) {default:return state;}
}

在list中显示，注意不同的类型返回不同的样式。根据是否有imgUrl进行判断。

import React, { Component } from 'react';
import { connect } from 'react-redux';
import {ListItem,ListInfo
} from '../style'class Lsit extends Component {render() {const {list} = this.props;return (<div>{list.map((item) => {if(item.get('imgUrl')){return (<ListItem key={item.get('id')}><img className='pic' src={item.get('imgUrl')} alt={item.get('imgAlt')}/><ListInfo><h3 className='title'>{item.get('title')}</h3><p className='desc'>{item.get('desc')}</p></ListInfo></ListItem>)}else{return (<ListItem key={item.get('id')}><ListInfo><h3 className='title'>{item.get('title')}</h3><p className='noimgdesc'>{item.get('desc')}</p></ListInfo></ListItem>)}})}</div>)}
}const mapState = (state) => ({list: state.getIn(['home', 'articleLists'])
})export default connect(mapState, null)(Lsit);

4.3 其它更改

这里的搜索的背景变为了透明，我们返回header/style中找到SearchInfo，将背景变为白色 background: #fff;

export const SearchInfo = styled.div`position: absolute;left: 0;top: 56px;width:240px;padding: 0 20px;box-shadow: 0 0 8px rgba(0, 0, 0, .2);background: #fff;
`

5 首页推荐部分代码编写

5.1 样式布局

这个布局相对比较简单

Recommend.js

注意组件必须大写！！！！！！

import React, {Component} from 'react';
import {RcommendItem
} from '../style'class Recommend extends Component {render() {return (<RcommendItem><img className="pic" src= "https://cdn2.jianshu.io/assets/web/banner-s-club-aa8bdf19f8cf729a759da42e4a96f366.png" alt="" /><img className="pic" src= "https://cdn2.jianshu.io/assets/web/banner-s-club-aa8bdf19f8cf729a759da42e4a96f366.png" alt="" /></RcommendItem>)}
}export default Recommend;

style.js

export const RcommendItem = styled.div`width: 280px;height: 225px;padding: 6px 0;.pic {width: 280px;height: 50px;}
`//我们把右边调低了 20px 为了使得页面更美观
export const HomeRight = styled.div`position: relative;top: 20px;width: 280px;float: right;
`

结果：

5.2 数据管理

reducer中存储的数据

recommendPic: [{id: '1',imgUrl:"https://cdn2.jianshu.io/assets/web/banner-s-club-aa8bdf19f8cf729a759da42e4a96f366.png"},{id: '2',imgUrl: "https://cdn2.jianshu.io/assets/web/banner-s-7-1a0222c91694a1f38e610be4bf9669be.png"},{id: '3',imgUrl:"https://cdn2.jianshu.io/assets/web/banner-s-5-4ba25cf5041931a0ed2062828b4064cb.png"},{id: '4',imgUrl: "https://cdn2.jianshu.io/assets/web/banner-s-6-c4d6335bfd688f2ca1115b42b04c28a7.png"}]

数据的加载与处理

import React, {Component} from 'react';
import { connect } from 'react-redux';
import {RcommendItem
} from '../style'class Recommend extends Component {render() {const {list} = this.props;return (<RcommendItem>{list.map((item) => {return (<img className="pic" src= {item.get('imgUrl')} alt="" />)})}</RcommendItem>)}
}const mapState = (state) => ({list: state.getIn(['home', 'recommendPic'])
})export default connect(mapState, null)(Recommend);

当前页面：

补充

视频中的语法，传递到样式中的值的使用

6 作者部分代码编写

注：我们实现样式不实现换一换的动作，实现如下图的样式

6.1 样式布局

writer.js

import React, {Component} from 'react';
import {WriterHeader,WriterSwitch,WriterItem,WriterName,WriterDesc,WriterFlower,WriterInfo,Allwriters
} from '../style'class Writer extends Component {render() {return (<div><WriterHeader>推荐作者<WriterSwitch><svg className="spin" aria-hidden="true"><use xlinkHref="#iconspin"></use></svg>换一批</WriterSwitch></WriterHeader><WriterItem><img  className="head" src="https://upload.jianshu.io/users/upload_avatars/5303650/33f2887c-e6e2-43b3-bd2c-b8516e5ee646.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp" alt="" /><WriterInfo><WriterFlower>+关注</WriterFlower><WriterName>Rose的肉丝儿</WriterName><WriterDesc>写了151.5k字 · 13k喜欢</WriterDesc></WriterInfo></WriterItem><WriterItem><img  className="head" src="https://upload.jianshu.io/users/upload_avatars/5303650/33f2887c-e6e2-43b3-bd2c-b8516e5ee646.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp" alt="" /><WriterInfo><WriterFlower>+关注</WriterFlower><WriterName>Rose的肉丝儿</WriterName><WriterDesc>写了151.5k字 · 13k喜欢</WriterDesc></WriterInfo></WriterItem><Allwriters>查看全部</Allwriters></div>)}
}export default Writer;

style.js

export const WriterItem = styled.div`width: 285px;overflow: hidden;.head {width: 50px;height: 50px;border: 1px solid #ddd;border-radius: 50%;float: left;}
`export const WriterHeader = styled.div`font-size: 14px;color: #969696;margin-bottom: 18px;
`
export const WriterSwitch = styled.div`float: right;font-size: 14px;color: #969696;.spin {display: block;position: relative;top:5px;float: left;width: 12px;height: 12px;color: red;margin-right: 2px;}`export const WriterInfo = styled.div`overflow: hidden;width: 230px;margin-top: 4px;margin-left: 60px;margin-bottom: 20px;
`export const WriterName = styled.div`font-size: 14px;color: #333;`
export const WriterFlower = styled.span`float: right;margin-right: 10px;font-size: 13px;color: #42c02e;`export const WriterDesc = styled.div`margin-top: 8px;font-size: 12px;color: #969696;
`export const Allwriters = styled.div`position: absolute;width: 258px;padding: 7px 7px 7px 12px;left: 0;font-size: 13px;color: #787878;background-color: #f7f7f7;border: 1px solid #dcdcdc;border-radius: 4px;text-align: center;
`

实现效果：

6.2 数据编写

reducer中的数据

 WirterList: [{id:"14715425",nickname:"简书钻首席小管家",avatar_source:"https://upload.jianshu.io/users/upload_avatars/14715425/e0668349-8c75-43db-8a9d-c388e5f00d0d.jpg",total_likes_count:"101307",total_wordage:"462675"},{id:"6652326",nickname:"没文化的野狐狸",avatar_source:"https://upload.jianshu.io/users/upload_avatars/6652326/498e86b9-7067-4e96-b5f2-6438089e2da1.jpg",total_likes_count:"6174",total_wordage:"319160"},{id:"7290998",nickname:"念远怀人",avatar_source:"https://upload.jianshu.io/users/upload_avatars/7290998/f64f5ef0-def0-4b26-beb3-b9d88f060ba0.jpg",total_likes_count:"14246",total_wordage:"685673"},{id:"7663825",nickname:"名贵的考拉熊",avatar_source:"https://upload.jianshu.io/users/upload_avatars/7663825/7c28763e-002b-4e89-8dea-5b8da210ef2c.jpg",total_likes_count:"19585",total_wordage:"267784"},{id:"278",nickname:"邓哲",avatar_source:"https://upload.jianshu.io/users/upload_avatars/278/0778727c-c557-4ffb-929c-6ee182a58145.png",total_likes_count:"1494",total_wordage:"434008"}]

writer.js

注意：显示的时候将数字单位转换为k，并取一位小数

import React, {Component} from 'react';
import { connect }  from 'react-redux';
import {WriterHeader,WriterSwitch,WriterItem,WriterName,WriterDesc,WriterFlower,WriterInfo,Allwriters
} from '../style'class Writer extends Component {render() {const {list} = this.props;const switchNum = (num) => {if(num > 1000){num = parseFloat(num / 1000);num = num.toFixed(1);const final = num + "k";return final;}else{return num;}}return (<div><WriterHeader>推荐作者<WriterSwitch><svg className="spin" aria-hidden="true"><use xlinkHref="#iconspin"></use></svg>换一批</WriterSwitch></WriterHeader>{list.map((item) => {return (<WriterItem key={item.get('id')}><img  className="head" src={item.get('avatar_source')} alt="" /><WriterInfo><WriterFlower>+关注</WriterFlower><WriterName>{item.get('nickname')}</WriterName><WriterDesc>写了{switchNum(item.get('total_wordage'))}字 · {switchNum(item.get('total_likes_count'))}喜欢</WriterDesc></WriterInfo></WriterItem>)})}<Allwriters>查看全部</Allwriters></div>)}
}//注意方括号
const mapState = (state) => ({list: state.getIn(['home', 'WirterList'])
})export default connect(mapState,null)(Writer);

最终代码：

项目地址：https://github.com/Hokwok/jianshu

简书项目实战-main首页开发相关推荐

06.简书项目实战三：详情页面和登录功能实现
简书项目实战三:详情页面和登录功能实现 1. 详情页面布局这部分的布局比之前的简单多了,就一个标题加上主要内容而已. export default class Detail extends Comp ...
简书项目实战-Header
1 项目目录搭建安装create-react-app,并创建项目jianshu.删掉src目录下文件,只留下index.js(入口文件), index.css, App.js文件当你在一个js文件 ...
慕课简书项目个人笔记
第1章课程导学本章主要介绍学习react的重要性,课程的知识大纲,学习前提,讲授方式及预期收获. 1-1 课程导学 React由Fackbook 2013年5月推出开源框架,函数式编程React ...
《Kotlin从小白到大牛》第28章：项目实战1：开发PetStore宠物商店项目
第28章项目实战1:开发PetStore宠物商店项目前面学习的Kotlin知识只有通过项目贯穿起来,才能将书本中知识变成自己的.通过项目实战读者能够了解软件开发流程,了解所学知识在实际项目中使用的 ...
视频教程-PHP基础项目实战/过程化开发-PHP
PHP基础项目实战/过程化开发云知梦创始人,国际架构师,11年互联网培训和开发经验,曾在港电讯盈科.北大青鸟集团.远大教育.北京易第优教育等公司任职曾获得美国红帽RHCA构架师和RHCDS数据中心讲 ...
WEB前端项目实战/酒仙网开发-李强强-专题视频课程
WEB前端项目实战/酒仙网开发-204人已学习课程介绍 WEB前端项目实战/酒仙网开发课程收益 WEB前端项目实战/酒仙网开发讲师介绍李强强更多讲师课程 ...
《Java从小白到大牛》第29章：项目实战1：开发PetStore宠物商店项目
第29章项目实战1:开发PetStore宠物商店项目前面学习的Java知识只有通过项目贯穿起来,才能将书本中知识变成自己的.通过项目实战读者能够了解软件开发流程,了解所学知识在实际项目中使用的情况 ...
Kotlin第5篇项目实战2：开发【Kotlin】版QQ2006聊天工具-关东升-专题视频课程
Kotlin第5篇项目实战2:开发[Kotlin]版QQ2006聊天工具-420人已学习课程介绍本视频是智捷课堂推出的一套"Kotlin语言学习立体教程"的视频 ...
【源码+教程】Java桌球游戏_Java初级项目_Java练手项目_Java项目实战_Java游戏开发
今天分享的Java开源游戏项目是桌球游戏,初学者也可以用来练习喔~课程详细讲解了一个桌球游戏的编写思路和流程,即使你刚学Java没多久,也可以跟随该教程视频完成属于你自己的桌球游戏!同时,还可以加深和 ...
微信小程序开发15 项目实战基于云开发开发一个在线商城小程序
在学完前 4 个模块之后,我相信你会对微信小程序的开发有一个全新的认识.在前面 3 个模块中,俊鹏分别从微信小程序内在的运行原理,小程序工程化开发以及具体实践层面,深度讲解了微信小程序开发所必要的知识 ...

简书项目实战-main首页开发

1 React中使用路由

1.1 安装

1.2 路由设置和使用

src/App.js

2 首页组件的拆分

App.js

index.js

3 首页专题布局及reducer设计

3.1 布局

3.2 reducer设计

(1)home/reducer

(2)home/index

(3)分析是否可以使用

(4)与src/reducr建立联系

(5)使用数据

4 首页文章列表制作

4.1 样式布局

style.js

4.2 数据管理

4.3 其它更改

5 首页推荐部分代码编写

5.1 样式布局

Recommend.js

style.js

5.2 数据管理

补充

6 作者部分代码编写

6.1 样式布局

writer.js

style.js

实现效果：

6.2 数据编写

writer.js

最终代码：

简书项目实战-main首页开发相关推荐

最新文章

热门文章