首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >React:几个入门小Demo

React:几个入门小Demo

作者头像
WEBJ2EE
发布2019-07-19 11:40:34
2.6K0
发布2019-07-19 11:40:34
举报
文章被收录于专栏:WebJ2EEWebJ2EE

本文将通过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. 总结

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2018-06-22,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 WebJ2EE 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档