TypeScript+React+Redux 扫盲实战分享会–简单的城市天气预报查询系统（完整项目实战视频教程）

工作杂谈：TypeScript+React+Redux 扫盲实战分享会–简单的城市天气预报查询系统（完整的项目实战视频教程，入门级视频教程），希望对大家能所有帮助……PS：这个文档是我在公司的时候，内部技术分享时用的，参考了国外的教程，闲着没事，发到吾乐吧上面……

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，这里不多介绍

比如我这里写了

这个就是所谓的xml风格代码，所以我要用.tsx（PS：.JS里面也可以直接写.JSX风格代码，但是.TS里面不能写.TSX风格代码。或者需要额外配置才行）

看看刚刚的程序

看到左下角变化了吗，我一改代码，就会变，都是因为刚刚 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 扫盲实战分享会–简单的城市天气预报查询系统（完整的项目实战视频教程，入门级视频教程）下载：

下载地址：推荐地址 | 备用地址 |