专栏首页WebJ2EEReact:几个入门小Demo

React:几个入门小Demo

本文将通过3个小Demo

Counter、TodoApp、UserCURD

带大家熟悉"React全家桶"开发流程

写在前面:

欢迎入坑React

有一大堆新技能需要get

语言:ES6(箭头函数、展开运算、解构赋值...); 思想:模块化(import、export...); 框架:React、Vue、AngularJS; 支撑:Nodejs、Babel、Webpack; 工具:Intellij IDEASublimeText; 还有很多...就不一一列举了...

...开始...

示例1. Counter

1.1. 效果

1.2. 技术栈

1.3. 环境搭建

A. 初始化Nodejs工程

npm init

B. 安装依赖

npm install --save/--save-dev xxxxx

注:npm官方仓库不太稳定、下载速度也慢,可以考虑换“淘宝npm镜像”....

C. 配置Babel:.babelrc

babel在这的用途就是完成ES6、JSX语法转换;

注:像.babelrc这种命名风格的文件,最好使用IDE创建,会避免很多麻烦

D. 配置Webpack

D. 增加webpack-dev-server启动命令:

至此

基本环境配置结束

开始编码

1.4. 编码

A. 应用入口HTML:index.html

B. 应用入口JS:index.js

C. Counter组件:Counter.js

D. 运行、测试

1.5. 总结

注:扫码获取Counter完整源码

示例2. TodoApp

2.1. 效果

2.2. 技术栈

TodoApp引入了Redux:

  • Redux管理应用状态
  • 引入css模块

2.3. 环境搭建

A. 初始化Nodejs工程

npm init

注:参考 1.3-A 小节内容;

B. 安装依赖

C. 配置Babel:.babelrc

TodoApp中使用了ES6的“...”语法,由于webpack无法识别,只能借助 babel 的 transform-object-rest-spread 插件完成语法降级转换;

D. 配置Webpack:webpack.config.js

TodoApp 在 JS 模块中使用 import 将 CSS 文件作为模块引入,这么做程序结构更合理,但需要借助 webpack 的 css-loader、style-loader 才能正确打包这种代码;

  • css-loader 用于解析使用 import 语法引入的 css 模块;
  • style-loader 用于把解析后的 css 作为 style 标签内容插入到 html 中;

注:css-loader与style-loader通常配合使用,且执行顺序为先css-loader、后style-loader;

2.4. 编码

A. 应用入口HTML:index.html

B. 应用入口JS:index.js

TodoApp 使用 Redux 管理应用状态,index.js作为应用入口,创建了Redux的Store并通过Provider接口将Store扩展到整个应用范围中;

## src/index.js

附一篇Redux源码解析,阅读请猛戳

C. State、Action、Reducer:

  • State:应用状态结构定义及初值;
  • Action:描述了有哪些可能改变应用状态的事件,且只能通过给Redux发Action改变应用状态;
  • Reducer:Redux会将收到的Action消息转交给Reducer,并在Reducer中完成状态修改;

## src/reducer/TodoReducer.js

## src/reducer/index.js

D. UI组件:

前面已经用Redux的3要素:State、Action、Reducer完整描述了应用的运行逻辑;接下来就是用React构建UI界面,并与Redux建立数据、动作联系即可;

## src/component/TodoApp.js

## src/component/AddTodo.js

## src/component/VisibleTodos.js

## src/component/TodoFilter.js

E. 运行、测试

2.5. 总结

注:扫码获取TodoApp完整源码

示例3. UserCURD

3.1. 效果

3.2. 技术栈

TodoApp引入了Redux...

  • Redux 管理应用状态
  • 引入 css 模块

UserCURD引入了Saga...

3.3. 环境搭建

A. 初始化Nodejs工程

npm init

注:参考 1.3-A 小节内容;

B. 安装依赖

(依赖比较多....)

C. 配置Babel:.babelrc

最关键的就是transform-decorators-legacy插件,它负责降级转换decorator语法;

(webpack无法直接识别类似@conncet(...)这种语法规则)

D. 配置Webpack

UserCURD 使用 JSON-Server 模拟了一个后台数据服务器,所以需要将与数据处理相关的HTTP请求中转到 JSON-Server 服务器上;

3.4. 总体架构

应用中的所有异步逻辑(请求数据、删除数据等)由redux-saga集中管理、应用的所有状态变化则由redux集中管理;借助这种结构,我们可以将应用的“状态变化”和“异步”这两个概念清晰的分离开

3.5. 目录结构

应用此时主要由component(UI)、reducer(状态变化)、saga(异步)3部分组成;

3.6. 编码

限于篇幅,只选了一组

Reducer、Saga、Component

进行说明

A. 应用入口JS:index.js

B. 看一个Reducer

reducer只用于处理应用状态改变,异步逻辑应写在saga中;

## src/reducer/userEdit.js

C. 看一个Saga

Saga有2大特性:

  • 1. 借助ES6的Generator语法,将异步逻辑以同步的方式书写,便于理解;
  • 2. Saga只用于处理异步,异步完成后的状态修改,还需要继续推送Action给Reducer;

## src/saga/userEdit.js

D. 看一个Component

UI组件中不包含业务逻辑,UI全部通过Action将业务操作转发给Saga、Reducer完成;

## src/component/userEdit.js

3.6. 总结

本文分享自微信公众号 - WebJ2EE(WebJ2EE)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-06-22

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • CSS基础之选择器

    想对某个结构元素式样样式,但是想排除这个结构元素下面的子结构元素,让它不使用这个样式,可使用not选择器。

    一觉睡到小时候
  • 第59节:Java中的html和css语言

    html是超文本标记语言,是网页语言的基础知识,html是通过标签来定义的语言,所有代码都是由标签所组成的,在html代码中不用区分大小写.

    达达前端
  • bootstrap 图标按钮组 常用

    <!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> <m...

    用户5760343
  • bootstrap 下拉菜单 分割线

    <!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> <m...

    用户5760343
  • 使用TestNG listener实现Case失败重跑功能

    Case失败了,想自动再跑一遍确认到底是不稳定还是真bug? 这可咋整啊? 使用testng的listener

    软测小生
  • WebUploader文件上传插件

    WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥H...

    一觉睡到小时候
  • bootstrap 导航栏

    <!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> <m...

    用户5760343
  • 爬虫网络请求之JS解密二(大众点评)

    之前在做大众点评网数据的时候,发现数据在前端显示是用标签来替换。这样爬虫采集到的就是一堆标签加一点内容所混杂的脏数据,同时发现标签中的值也是随时改变的。所以这次...

    用户1073093
  • bootstrap 按钮组导航条 btn-toolbar btn-group 常用

    <!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> <m...

    用户5760343
  • bootstrap 下拉菜单

    <!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> <m...

    用户5760343

扫码关注云+社区

领取腾讯云代金券