TypeScript+React+Redux 掃盲實戰分享會–簡單的城市天氣預報查詢系統(完整項目實戰視頻教程)

作者: 時間: 2016-12-16 分類: 技術文章 | 0條評論 |

工作雜談:TypeScript+React+Redux 掃盲實戰分享會–簡單的城市天氣預報查詢系統(完整的項目實戰視頻教程,入門級視頻教程),希望對大家能所有幫助……PS:這個文檔是我在公司的時候,內部技術分享時用的,參考了國外的教程,閑著沒事,發到吾樂吧上面……

TypeScript + React + Redux 掃盲實戰分享會 – 簡單的城市天氣預報查詢系統(吾樂吧軟件站原創視頻教程)

TypeScript+React+Redux 掃盲實戰分享會–簡單的城市天氣預報查詢系統(完整項目實戰視頻教程)

項目最后的效果圖如上,需自備翻墻,否則視頻中某些地址打不開。本文大家主要是下載視頻去看,視頻全長106分鐘,所有工具,都已經打包完畢。自己去下載吧~~

本文所有工具,以及視頻教程下載地址:http://pan.baidu.com/s/1eSFPWGy

下面的文檔是視頻錄制過程中的旁白,大家可以不看……

—————————————————-

今天給大家講的是《TypeScript + React + Redux 掃盲實戰分享會 – 簡單的城市天氣預報查詢系統》

本次分享,打算圍繞“簡單的城市天氣預報查詢系統”,從實戰角度,全程介紹 TypeScript + React + Redux。從環境安裝部署,再到手動搭建一個項目全過程講解,預計耗時120分鐘或更多。項目本身是個非常簡單的功能,但是涵蓋了大部分知識點,而且實戰過程打算以模塊化,逐步發散性思維方式進行分享,希望大家會喜歡。

PS:時間有限,了解有限,如果講的不好,或者講錯了,請見諒!

PPT演示過程 將不會說太多,因為重點是實戰操作的部分,而且我沒有耳麥,所以全程文字介紹

1.技術介紹(技術介紹)
2.環境部署(安裝雙擊就可以,所以不演示,但是已經提供了工具)
3.準備工作(時間關系,提前準了一些代碼片段或者配置,不重復去寫,直接拿來用)
4.項目實戰(核心)
5.其他(額外知識點補充)

1.1 開發語言 – TypeScript
它可以編譯成普通的JavaScript代碼。
簡稱TS,TS的定位是開發語言,可以自動編譯(轉化為)JS文件

1.2 前端框架 – React.js
React定位是前端框架
React 起源于 Facebook 的內部項目
React 為了更高超的性能而使用虛擬DOM作為其不同的實現。
傳統JS并不慢,但是JS在操作DOM的時候會是最慢的地方,React通過虛擬DOM,全部都在內存直接操作,從而獲得了超高的性能
React實現了單向響應的數據流 >> 單向響應的數據流也是React一大特點

1.4 React.js – 生命周期
1、getDefaultProps
2、getInitialState
3、componentWillMount
4、render 今天主要講這個
5、componentDidMount(不會在服務端被渲染的過程中調用)

React 入門教程
https://hulufei.gitbooks.io/react-tutorial/content/index.html
關于生命周期,建議大家看這個文檔,里面介紹很詳細,打字不太方便,我就不說太多,后面會給大家重點演示 render

1.5 數據流 – Redux
Redux定位是數據流,主要是管理狀態
嚴格的單向數據流是 Redux 架構的設計核心

重點是這個數據流向圖,主要說起來就是

actions -> middleware -> reducer -> view provider

store (state reducer middleware)

補充一下就是:每一個action都會觸發到每個reducer里去,也就是說,每個reducer都會接收到action(然后他們根據 type 進行區分處理,后面操作再深入介紹)

這個圖則更加詳細,大家可以后期慢慢看,因為很重要這兩個圖

2.1 環境部署
1、安裝Node.JS:node-v6.2.0-x64.msi
2、安裝WebStorm:WebStorm-2016.2.3.exe
只需要安裝這兩個工具即可,已經打包好了,下載:
https://pan.baidu.com/s/1eSFPWGy
安裝過程就不介紹了,雙擊傻瓜式安裝,沒有什么可講,至于Webstorm需要破解,也已經提供了工具和方法,自己去下載就可以了

3.1 準備工作
關于準備工作這部分,我會盡快跳過,因為不是重點,大概意思就是,這里有很多代碼、配置文件,都是我先準備好的,等下是基于這些準備好的東西,進行后期的開發工作,如果時間允許,也可以給大家說下這些預先準備的文件代碼。

npm init 這個是初始化命令,基本上拿到一個新項目都會執行
npm install –save XXX 這個是安裝命令
npm uninstall XXX 卸載命令
npm start 啟動命令,就是通過這個命令,啟動我們的項目的

typings暫時不說,本次實戰過程,typings也是不講解,因為時間不夠。而且,我已經準備好了本次項目所需的所有typings文件。直接拿來用的

3.2 準備工作 – Package.json
3.3 準備工作 – Webpack.config.ts
3.4 準備工作 – Modules

上面幾個都是已經準備好的東西

實戰過程主要是給大家展示代碼模塊化開發的過程,以及功能強化的過程

3.5 準備工作 – 效果預覽
這個就是我們的效果圖
分為兩個部分:
SearchBar 搜索框
WeatherList 明細數據
實戰過程也是圍繞這個進行的

4.1 項目實戰
暫時跳過…

實戰之前,先把后面的PPT講完

5.1 其他 – CommonJS
大家自行去閱讀規范:http://javascript.ruanyifeng.com/nodejs/module.html
額外的知識點,不進行講解

5.2 其他 – Emmet
Emmet 是一個能大幅度提高前端開發效率的工具
http://www.w3cplus.com/tools/emmet-cheat-sheet.html
網頁比較慢,這個大家可以學習,因為會N倍提升開發速度

5.3 其他 – Less
http://www.bootcss.com/p/lesscss/

5.4 其他 – Typings
Typings 是一個包管理器,它管理的是JS代碼“定義文件”(我們可以理解是類似C#里的接口聲明)

PPT部分到此結束,接下來開始實戰部分講解。

—————————————————-

大家現在看的這個項目,是已經提前準備好的,但是更多的是配置文件,代碼的大部分都是等下實戰過程中手寫的

介紹下結構

node_modules 這個是node.js的modules包
src 源碼
style 存放CSS樣式

typings 這個是node_modules對應的包文件的定義,聲明文件,因為TypeScript是強類型約束,JS是弱語言(JS都可以寫成var,不區分數據類型),但是TS是要區分number、string之類的類型,所以typings是用來約束modules對應的方法,大家可以理解為:接口聲明方法

index.html 這個主頁面

package.json 這個比較重要,是配置本項目,所依賴的一些modules
粗略介紹下這個文件結構吧:
scripts -> start 這個是啟動參數,等下我們執行 npm start 就可以啟動程序了
devDependencies 這個是開發環境所依賴的modules
dependencies 正式環境,所需的modules

tsconfig.json 這個大家可以通過Webstorm生成(右鍵菜單其實有的,只是我已經存在了,所以剛剛不顯示)
“jsx”: “react”,
“watch”: true
這兩個參數是最重要的,JSX作用是指定JSX代碼生成,watch是監聽TS文件,實時生成JS代碼

webpack.config.ts 這個是webpack配置,比如filename: ‘bundle.js’,最后會就在網頁里面生成bundle.js文件,他會自動把本項目所有生成的JS,都生成(合并到)唯一的一個bundle.js文件中,當然這個是可以配置的。只是這里默認生成到這里,也可以配置生成多個,不深入介紹

src/actions
src/components
src/containers
src/reducers

今天主要就是編寫這幾個地方的代碼

一般拿到一個項目,應該這樣操作
1)settings -> 搜索 tsconfig -> 選中 tsconfig.json 因為這樣設置了,webstorm才會讀取 tsconfig.json 的配置
2)執行 npm install(執行這個命令,系統會自動讀取package.json文件,然后把里面的依賴包全都安裝上去,但是最好翻墻,否則很多安裝失敗,超時的問題)
安裝完畢

先運行一下吧
npm start
這個就是運行效果

現在如果停止剛剛已經啟動的項目呢?Ctrl+C

現在已經重新運行了

目錄介紹就說到這里了,等下說代碼,開始動手

如果大家仔細看項目的代碼。src/index.tsx,可能會發現TypeScript后綴應該是.ts,但是我這邊為什么全都是.tsx。因為.tsx才可以寫xml風格代碼。

.ts與.tsx的關系,類似于 .js 與 .jsx,詳情大家可以去看 .jsx,這里不多介紹

比如我這里寫了

XXX

這個就是所謂的xml風格代碼,所以我要用.tsx(PS:.JS里面也可以直接寫.JSX風格代碼,但是.TS里面不能寫.TSX風格代碼。或者需要額外配置才行)

Weather Simple

看看剛剛的程序

看到左下角變化了嗎,我一改代碼,就會變,都是因為剛剛 watch 監聽

我們再來回顧下之前的效果圖

根據效果圖,我們先做一個搜索框

補充下,如果創建一個.tsx模版:
復制一個TS模版,然后修改后綴.tsx,我刪了,因為我已經創建了一個

繼續新建一個 search_bar

src/containers 這個就是頁面View

從react點進去,可以看到node_modules,這些modules都是通過npm instal安裝進去的,因為package.json里面有
除了發現能進入node_modules,我們還能發現,會進入typings,這些typings也是事先準備好的,大家也可以執行命令去安裝
typings install –save –global dt~XXX
typings uninstall XXX

我們繼續編寫代碼,做一個form搜索框

這些CSS樣式用的是bootstrap的,以及自己手寫的一些樣式
https://cdn.bootcss.com/bootstrap/4.0.0-alpha.3/css/bootstrap.css

再來加一個button

我們再來增加onChange事件

this.onInputChange
等效于
(event) => this.onInputChange(event)

這個報錯是因為TS要求聲明數據,找不到這個字段

跟這個 React.Component 有關,我們再來改一下

React.Component -> 要求有2個參數 P = Props , S = State,所以我們也來新增2個interface

提示還是說找不到term,所以來增加

this.state.term -> 這個可以知道我們是從state獲取的數據,所以加到ISearchBarState里去

bundle.js:1299 Warning: setState(…): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the SearchBar component.
構造函數初始化的時候,不能調用setState,而是應該這樣操作
this.state = {term: ”}; //因為這個是初始化state

現在輸入無法輸入,我們繼續來寫onChange事件

Uncaught TypeError: Cannot read property ‘setState’ of undefined
發現報錯了,這個是因為我們沒有把onInputChange綁定上去

onChange完成了

輸入框完成之后,我們再來寫 onFormSubmit

event.preventDefault(); // 阻止瀏覽器默認操作,所以他并沒有清空文本框
手動清空下

還是因為沒有綁定上去導致異常

現在寫到這里,我們就需要在提交按鈕的時候,去獲取一個API查詢天氣

暫時這樣

大家自己注冊一個openweathermap帳號,就可以拿到查詢天氣的API了,我直接用已經注冊好的(可能需要翻墻)
c97ef90f910baef4d7bacbf2ed057137

因為找不到國內免費的天氣API,或者適合我的,于是用這個國外的,當然它可以查詢國內的天氣

我們來看看json數據

city.coord.lat 經度
city.coord.lon 維度
city.name 城市名稱
city.list[0].main.temp 溫度(開氏溫標,等下我們要轉為攝氏溫標)
city.list[0].main.humidity 濕度
city.list[0].main.pressure 氣壓

這幾個數據,是我們需要用到的,其他就不介紹了

我們來寫一個方法,獲取API數據

但是在這之前,我們還少了一個中間件

redux-promise是一個中間件,作用是判斷一個action是否包含promise有效信息,如果是的話,則攔截這個action,然后開始解析這個promise,創建一個新的action以及把action發送到所有的reducer里去

大家結合這個流程圖思考下

繼續 src/actions/index.tsx

TS里面的可以 `${XXXX}` 方式寫變量,然后連接字符串,當然, + 也是可以的

const ROOT_URL = `http://api.openweathermap.org/data/2.5/forecast?appid=${API_KEY}&q=Beijing,cn`;
const ROOT_URL2 = ‘http://api.openweathermap.org/data/2.5/forecast?appid=’ + {API_KEY} + ‘&q=Beijing,cn’;

這2個寫法等效

action的方法,是必須返回 type 的,其他的可以自己定義,但是 type 必須返回去,因為 等下 reducer 需要接收處理,都是通過 type

我們來安裝axios 完成HTTP請求,獲取API的數據

https://www.npmjs.com NPM官方搜索這些包

axios.get(‘/user/12345’);

根據文檔介紹,我們可以知道調用方法

npm install –save axios
typings install –save –global dt~axios
安裝完畢

我們把 FETCH_WEATHER export 出來,方便其他地方也可以使用

src/actions/index.tsx
action代碼差不多就是這樣
我們現在回到 search_bar 把頁面connect起來

點擊按鈕,要調用接口查詢

接下來,新增一個 weather_reducer 接收之前的action請求

src/reducers/index.tsx
把多個reducer合并成一個

Request 觸發了
Action received 觸發了

{type: “FETCH_WEATHER”, payload: Object}
payload.data 就是我們的API數據

我們繼續調整下 src/reducers/weather_reducer.tsx

現在回頭解釋下 reducer

recuder 是一定具備 state 以及 action 的,而且 recuder 是純函數,不要在這里調用API之類的,這里只是單純的計算,然后返回一個 state

我們在recuder里面都是通過 action.type 進行區分,然后做一些處理的

截止到現在,搜索框的功能基本開發完畢了

PS:我們城市名稱使用拼音搜索的,因為國外的網站不支持中文。如果我們后面有時間,可以做一個 中文轉拼音的模塊(chinese-to-pinyin
),然后也可以輸入中文去查詢,現階段暫時不考慮

數據的獲取已經沒問題了,接下來我們要做查詢列表,做一個 WeatherList

table.table.table-hover
這里我用了emmet寫法,按一下tab就會自動生成對應的語句

詳情去這里了解
http://www.w3cplus.com/tools/emmet-cheat-sheet.html

回顧一下這幾個數據:

city.coord.lat 經度
city.coord.lon 維度
city.name 城市名稱
city.list[0].main.temp 溫度(開氏溫標,等下我們要轉為攝氏溫標)
city.list[0].main.humidity 濕度
city.list[0].main.pressure 氣壓

現在就要使用了

先把src/containers/weather_list.tsx connect起來

現在開始把數據顯示上去

Warning: Each child in an array or iterator should have a unique “key” prop. Check the render method of `WeatherList`
提示說要設置key

可以了

我們接下來要把 溫度、氣壓、濕度 做上去,需要用到圖表

npm install –save react-sparklines
typings install –save –global dt~react-sparklines(不存在,無法安裝,直接用已經準備好的)

如果遇到不存在的typings,就要自己手動去寫了
typings/globals/react-sparklines/index.d.ts
這個是已經寫好的

注意這個溫度是 開氏溫標,要改為攝氏溫標

效果出來了

我們再來加一條平均線

如果需要把 氣壓,濕度 也做成 圖表,是否就要復制多幾次?當然啦,復制也可以,只是不符合我們的模塊化理念

所以現在,我們把圖表,做成一個獨立的組件

看來組件也完成了,繼續把 氣壓、濕度 做上去吧

剛剛有一個提示異常,那個是因為查詢的時候,獲取不到結果,導致兩個都是默認的 beijing 然后主鍵key重復了,這樣的話,可以后期改進,這里不做介紹(比如使用shortid,生成一個不重復的ID,然后就可以解決)

底部再做一個顯示平均數的東西上去

npm install –save lodash
typings install –save –global dt~lodash

完成了 我們把單位加上去就可以了

OK

接下來我們把左側的 城市名稱,換成地圖

npm install –save react-google-maps
typings install –save –global dt~react-google-maps(不存在,無法安裝,直接用已經準備好的)

網絡有點問題,繼續吧

// const lat = cityData.city.coord.lat;
// const lon = cityData.city.coord.lon;
const {lat,lon} = cityData.city.coord;
這2個寫法是等效的

因為是谷歌的地址,翻墻速度比較慢

但是到現在為止,所有功能都算開發完畢了

感謝觀看 all by flydoos

下載方法:打開鏈接–等待5秒廣告–點擊“跳過廣告”或“Skip AD”–進入下載地址。

工作雜談:TypeScript+React+Redux 掃盲實戰分享會–簡單的城市天氣預報查詢系統(完整的項目實戰視頻教程,入門級視頻教程)下載:

下載地址:推薦地址 | 備用地址 |

本文采用 CC協議 發布,轉載請注明:轉載自 吾樂吧軟件站

本文鏈接地址:http://www.pllkp.tw/?p=28770

發表評論

?
微軟MSDN資源免費訂閱,MSDN 我告訴你 越南美女捕鱼捕走光视频 广东时时结果查询结果 云南十一选五走势图一定牛 十一运夺金两期计划 贵州十一选五开奖结果秘密 河北时时11选五 京东彩票网站 山东体育频道在线直播 重庆时时开奖预测下期 香淃六香彩现场开奖结果 江西新时时组三全选 海南体彩走势图 爱玩棋牌 上海快三走势图基本 平特计划 电子游戏平mg 北京时时计划预测