注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

九头鸟

网络资源 互联共享( QQ群:交流 73376329 交友158594876)

 
 
 

日志

 
 

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

2016-12-16 17:49:01|  分类: 软件下载 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

工作杂谈: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 扫盲实战分享会–简单的城市天气预报查询系统(完整的项目实战视频教程,入门级视频教程)下载:

下载地址:推荐地址 | 备用地址 |
  评论这张
 
阅读(625)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017