1 React中使用路由

1.1 安裝

yarn add react-router-dom

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

1.2 路由設(shè)置和使用

打開我們的APP.js，如下是設(shè)置的代碼

代碼解釋：

import { BrowserRouter, Route} from 'react-router-dom'; 導(dǎo)入模塊，外面加一層div 是有要去的 render只包含一個child

添加路由：

<BrowserRouter>

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

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

? </BrowserRouter>

path： 路徑

其中exact表示只有路徑完全匹配才能訪問（如果不設(shè)置的話，/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 個區(qū)域，其中圖片的顯示很簡單，我們就將它放在首頁，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設(shè)計

3.1 布局

我們設(shè)置布局，同時調(diào)整樣式，樣式都在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設(shè)計

首先我們在home目錄下，創(chuàng)建一個reducer和index，用index導(dǎo)出reducer，另外在reducer中存放我們需要的數(shù)據(jù)

如下：

(1)home/reducer

存放數(shù)據(jù)

import { fromJS } from 'immutable';//將其變?yōu)閕mmutable 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

方便管理與導(dǎo)出

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

(3)分析是否可以使用

我們的Provider包裹了我們的home，而home又包裹了Topic，完全可以從中獲取數(shù)據(jù)

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建立聯(lián)系

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)使用數(shù)據(jù)

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 樣式布局

布局的方式基本上就和專題布局的方式差不多，先進行樣式的布局，因為內(nèi)容分為兩類：

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'>在參加一檔節(jié)目中,談到婚姻，撒貝寧公開說道：“我覺得自己的婚姻非常的無望，也沒有繼續(xù)維持下去的必要。”惹得現(xiàn)場觀眾大吃一驚。 事實上當(dāng)時馬東故意...</p></ListInfo></ListItem><ListItem><ListInfo><h3 className='title'>我擺地攤，最慘痛的教訓(xùn)</h3><p className='noimgdesc'>曾經(jīng)，我擺過一次攤，在龍眼豐收的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;} `

結(jié)果如圖所示：

4.2 數(shù)據(jù)管理

我們在reducer中增加我們需要的數(shù)據(jù)

import { fromJS } from 'immutable';//將其變?yōu)閕mmutable 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: '在參加一檔節(jié)目中,談到婚姻，撒貝寧公開說道：“我覺得自己的婚姻非常的無望，也沒有繼續(xù)維持下去的必要。”惹得現(xiàn)場觀眾大吃一驚。 事實上當(dāng)時馬東故意...',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: '我擺地攤，最慘痛的教訓(xùn)',desc: '曾經(jīng)，我擺過一次攤，在龍眼豐收的7月里，進了30斤新鮮龍眼，進貨價3元一斤，打算以5元單價出售。 找了個人流量大的道路旁，鋪開一張墊子，挑選一些...',imgUrl: null},{id: 3,title: '撒貝寧說：我對自己的婚姻非常失望',desc: '在參加一檔節(jié)目中,談到婚姻，撒貝寧公開說道：“我覺得自己的婚姻非常的無望，也沒有繼續(xù)維持下去的必要。”惹得現(xiàn)場觀眾大吃一驚。 事實上當(dāng)時馬東故意...',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: '我擺地攤，最慘痛的教訓(xùn)',desc: '曾經(jīng)，我擺過一次攤，在龍眼豐收的7月里，進了30斤新鮮龍眼，進貨價3元一斤，打算以5元單價出售。 找了個人流量大的道路旁，鋪開一張墊子，挑選一些...',imgUrl: null}]});export default (state = defaultState, action) => {switch(action.type) {default:return state;} }

在list中顯示，注意不同的類型返回不同的樣式。根據(jù)是否有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 其它更改

這里的搜索的背景變?yōu)榱送该?#xff0c;我們返回header/style中找到SearchInfo，將背景變?yōu)榘咨?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;} `//我們把右邊調(diào)低了 20px 為了使得頁面更美觀 export const HomeRight = styled.div`position: relative;top: 20px;width: 280px;float: right; `

結(jié)果：

5.2 數(shù)據(jù)管理

reducer中存儲的數(shù)據(jù)

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"}]

數(shù)據(jù)的加載與處理

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);

當(dāng)前頁面：

補充

視頻中的語法，傳遞到樣式中的值的使用

6 作者部分代碼編寫

注：我們實現(xiàn)樣式不實現(xiàn)換一換的動作，實現(xiàn)如下圖的樣式

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>+關(guān)注</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>+關(guān)注</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; `

實現(xiàn)效果：

6.2 數(shù)據(jù)編寫

reducer中的數(shù)據(jù)

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

注意：顯示的時候?qū)?shù)字單位轉(zhuǎn)換為k，并取一位小數(shù)

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>+關(guān)注</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

總結(jié)

以上是生活随笔為你收集整理的简书项目实战-main首页开发的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。