摘要:項目地址下載完項目然后即可基于的項目,主要是為了學習實戰(zhàn)。數(shù)據(jù)都是固定的,從餓了么接口臨時抓的,模擬了一個的異步數(shù)據(jù)延遲,感謝餓了么。詳細信息可以看上面的官方文檔,我這里就簡單說一下我這個項目的應(yīng)用。
react-ele-webapp
項目地址 :https://github.com/kliuj/reac...
run下載完項目
npm install
然后
npm run dev 即可
基于 react react-router redux 的項目,主要是為了學習實戰(zhàn)react。數(shù)據(jù)都是固定的,從餓了么接口臨時抓的,模擬了一個0-100ms的異步數(shù)據(jù)延遲,感謝餓了么。
以下內(nèi)容是項目開發(fā)的過程和一些思考,按照這個過程至少能保證實現(xiàn)一個相對完整的react全家桶項目
內(nèi)容參考搭建項目:react文檔:http://reactjs.cn/react/docs/...
react-router 文檔地址 :https://reacttraining.com/rea...
react-router 中文版參考:http://www.uprogrammer.cn/rea...
redux文檔參考:http://redux.js.org/
redux中文文檔:http://cn.redux.js.org/
建立項目目錄,安裝package.json,配置webpack.config
做好基礎(chǔ)依賴工作,摘自package.json的一部分內(nèi)容
"devDependencies": { "babel-core": "^6.23.1", "babel-loader": "^6.4.0", "babel-preset-es2015": "^6.22.0", "babel-preset-react": "^6.23.0", "html-webpack-plugin": "^2.28.0", "jshint": "^2.9.4", "jshint-loader": "^0.8.4", "react": "^15.2.0", "react-dom": "^15.2.0", "react-router": "^2.0.0", "redux": "^3.6.0", "webpack": "^2.2.1", "webpack-dev-server": "^2.4.1" } //JAVASCRIPT項目模塊結(jié)構(gòu)組織一些基礎(chǔ)工作
開始進行開發(fā)一個項目除了技術(shù)選型之外,還有許多基礎(chǔ)東西要先設(shè)計好,一個好的組織設(shè)計要可以為以后的提高工作效率。我這方面還有很多欠缺,目前主要考慮了3個模塊的設(shè)計:
1:后臺接口通信層:model.js 主要處理統(tǒng)一接口的請求發(fā)送和回調(diào),放在一起更有利于后期維護,也增加可閱讀性
//接口對應(yīng)的url,這里只做演示 const uris = { index_entry : fetchData.index_entry, hot_search_words : fetchData.hot_search_words } //接口調(diào)用層 export default function send(url,postData,successCallback,errCallback){ //模擬延遲,假接口 let promise = new Promise(function(resolve,reject){ setTimeout(function(){ resolve(fetchData[url]) },Math.random()*100) }) promise.then(function(data){ successCallback(data) }) }
2:本地數(shù)據(jù)緩存維護:baseStore.js 主要處理頁面之間的跳轉(zhuǎn)返回,增加更多的自主性和擴展性
// 自動存儲瀏覽記錄 export function saveFrom(prop) { let name = prop.pagename, transit = prop.location, qhfrom = transit.query.qhfrom ,//默認全部返回首頁 para = transit.query.para ? JSON.parse(transit.query.para) : ""; if(!qhfrom) return false; let paths = localStorage.getItem("FromUrlStore") ? JSON.parse(localStorage.getItem("FromUrlStore")) : {}; if (localStorage) { paths[name] = { "name":qhfrom,//存儲來源頁面 "para":para //存儲來源頁面的參數(shù) } localStorage.setItem("FromUrlStore", JSON.stringify(paths)); } } //存儲頁面的來源,統(tǒng)一管理
3:公共方法的處理:baseFun.js 主要用來定義一些公用的模塊方法
//放置公用函數(shù) export function showToast(){ ... }使用react-router初始化頁面
import React from "react" import { render } from "react-dom" import { Router, Route, Link,hashHistory ,IndexRedirect,IndexRoute} from "react-router" import Home from "./components/home.jsx" import Discover from "./components/discover.jsx" const App = React.createClass({ render() { return ({this.props.children}) } }) const route = () render(route, document.getElementById("app"))
代碼簡單介紹:
因為沒有后臺,采用的 hashHistory (hash路由),關(guān)于hash路由可以參考:https://github.com/kliuj/spa-... 有簡單的介紹。
這個是router的跳轉(zhuǎn) 外賣 這個是加載子路由組件 {this.props.children} 這個是默認的跳轉(zhuǎn)頁面處理首頁的滾動列表
首頁主要分成了4個組件
底部導航 + 滾動列表 + 單個產(chǎn)品 + 首頁搜索框
滾動列表封裝了一個簡單的組件
react-redux 處理登錄和登出在scrollList組件里面監(jiān)聽了滾動事件進行自動加載的處理
使用redux的原因:用戶信息和登錄是兩個不同的組件,也沒有父子級的關(guān)系,但是需要進行數(shù)據(jù)狀態(tài)共享和相互影響。詳細信息可以看上面的官方文檔,我這里就簡單說一下我這個項目的應(yīng)用。
定義常量 actionTypes.js
//登入成功 export const LOG_SUCCESS = "LOG_SUCCESS" //正在登錄 export const LOG_ING = "LOG_ING" //注銷登錄 export const LOG_OUT = "LOG_OUT" //主要是統(tǒng)一保存狀態(tài)對應(yīng)的名稱
定義具體的觸發(fā)操作 actions/login.js
//注銷 同步 export function log_out (){ return { type:actionTypes.LOG_OUT } } //登入 異步 export function log_in (obj){ return dispatch=>{ //pending 正在進行登錄的狀態(tài) dispatch({type:actionTypes.LOG_ING}) //開始發(fā)送異步請求登錄 new Promise((resolve,reject)=>{ ... }).then(res=>{ dispatch(res) }) } } //異步狀態(tài)需要使用中間件
處理數(shù)據(jù) reducers/login.js
export default function(state = initialData,action){ switch(action.type){ case actionTypes.LOG_SUCCESS: return { loginstate:1, username:action.username } break case actionTypes.LOG_ING: return{ loginstate:-1, username:"正在登錄" } case actionTypes.LOG_OUT: return initialData break default : return initialData } }
使用中間件創(chuàng)建store層 store/store.js
import {createStore, applyMiddleware} from "redux" import thunk from "redux-thunk" //合并的多個reducer,解耦 import rootReducer from "../reducers/index.js" const middlewares = [thunk] const createStoreWithMiddleware = applyMiddleware(...middlewares)(createStore) export default function configureStore(initialState){ return createStoreWithMiddleware(rootReducer,initialState) }
在路由層引入
import {Provider} from "react-redux" const store = configureStore() const route = () ...
組件里面使用
import { connect } from "react-redux" import {log_out} from "../../actions/login.js" //操作 ... ... function mapStateToProps(userinfo){ let {login} = userinfo //這個是返回的所有reducer,我們只用當前需要的,參考 reducers/index.js 內(nèi)容 return login } export default connect(mapStateToProps)(UserInfo) //這個時候就可以在當前組件狀態(tài)的 this.props 獲取到這個 login 數(shù)據(jù), //操作的時候 const {dispatch} = this.props; dispatch(log_out()) //這時候就可以操作redux狀態(tài)的數(shù)據(jù),每次數(shù)據(jù)改變都會下發(fā)給所有接收的組件以上,我們就使用了許多東西完成了一個簡單的小項目
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/82062.html
摘要:相關(guān)配置請參考中文文檔。關(guān)于的更多使用方法及理解需要詳細具體講解,涉及篇幅較大,本文暫不涉及,有興趣可以看文檔中文文檔,我會整理后再單獨章節(jié)分享接下來我們將編寫路由組件這與有一些差別,原來的方法已經(jīng)不再使用,在中或組件從中引入。 ??????相信很多剛?cè)肟覴eact的小伙伴們有一個同樣的疑惑,由于React相關(guān)庫不斷的再進行版本迭代,網(wǎng)上很多以前的技術(shù)分享變得不再適用。比如react-...
摘要:而函數(shù)式編程就不一樣了,這是模仿我們?nèi)祟惖乃季S方式發(fā)明出來的。數(shù)據(jù)流在中,數(shù)據(jù)的流動是單向的,即從父節(jié)點傳遞到子節(jié)點。數(shù)據(jù)流嚴格的單向數(shù)據(jù)流是架構(gòu)的設(shè)計核心。 前言 總括: 本文采用react+redux+react-router+less+es6+webpack,以實現(xiàn)一個簡易備忘錄(todolist)為例盡可能全面的講述使用react全家桶實現(xiàn)一個完整應(yīng)用的過程。 代碼地址:Re...
摘要:安裝配置加載器配置配置文件配置支持自定義的預設(shè)或插件只有配置了這兩個才能讓生效,單獨的安裝是無意義的。 showImg(https://segmentfault.com/img/bVbjGNY?w=2847&h=1931); 想閱讀更多優(yōu)質(zhì)文章請猛戳GitHub博客,一年百來篇優(yōu)質(zhì)文章等著你! 最新React全家桶實戰(zhàn)使用配置指南 這篇文檔 是呂小明老師結(jié)合以往的項目經(jīng)驗 加上自己本身...
摘要:引言兩個月前用全家桶實現(xiàn)過一次酷狗音樂,最近又用全家桶重構(gòu)了下,最終成果和的實現(xiàn)基本一致,放個圖手機預覽戳版本版本。的行為結(jié)構(gòu)表現(xiàn)分離,很明顯,而的分離雖然不是很明顯,但實際上也是有的。發(fā)送指令,最終會到里合并數(shù)據(jù),與中的類似。 引言 兩個月前用 Vue 全家桶實現(xiàn)過一次 酷狗音樂,最近又用 React 全家桶重構(gòu)了下,最終成果和 Vue的實現(xiàn)基本一致,放個圖: showImg(htt...
摘要:編碼全家桶小程序提供實體莫爾斯電碼等編碼轉(zhuǎn)換工具,凱撒密碼柵欄密碼等加密工具,及地址查詢信息查詢等工具。 CTF編碼全家桶小程序提供Base64、Url、HTML實體、莫爾斯電碼等編碼轉(zhuǎn)換工具,凱撒密碼、柵欄密碼、ROT13、MD5、SHA等加密工具,及IP地址查詢、Whois信息查詢等工具。showImg(https://segmentfault.com/img/bVbiudU?w=...
閱讀 2420·2021-11-18 10:02
閱讀 687·2021-10-08 10:04
閱讀 2250·2021-09-03 10:51
閱讀 3540·2019-08-30 15:44
閱讀 2799·2019-08-29 14:09
閱讀 2464·2019-08-29 12:21
閱讀 2064·2019-08-26 13:45
閱讀 1800·2019-08-26 13:25