React中的dav.js脚手架
文章目录
- 安装 dva-cli
- 创建新应用
- Dav目录
- 使用 antd
- 定义路由
- 编写 UI Component
- 定义 Model
- connect 连接 Model 和 Route 页面下的数据
安装 dva-cli
通过 npm 全局安装 dva-cli 并确保版本是 0.9.1 或以上。
npm install dva-cli -g
创建新应用
安装完 dva-cli 之后,就可以在命令行里访问到 dva 命令(不能访问?)。现在,你可以通过 dva new 创建新应用。
dva new dva-app
Dav目录
安装完成之后,能看到项目结构
├── mock // mock数据文件夹
├── node_modules // 第三方的依赖
├── public // 存放公共public文件的文件夹
├── src // 最重要的文件夹,编写代码都在这个文件夹下
│ ├── assets // 可以放图片等公共资源
│ ├── components // 就是react中的木偶组件
│ ├── models // dva最重要的文件夹,所有的数据交互及逻辑都写在这里
│ ├── routes // 就是react中的pages
│ ├── services // 放请求借口方法的文件夹
│ ├── utils // 自己的工具方法可以放在这边
│ ├── index.css // 入口文件样式
│ ├── index.js // 入口文件
│ └── router.js // 项目的路由文件
├── .eslintrc // bower安装目录的配置
├── .editorconfig // 保证代码在不同编辑器可视化的工具
├── .gitignore // git上传时忽略的文件
├── .roadhogrc.js // 项目的配置文件,配置接口转发,css_module等都在这边。
├── .roadhogrc.mock.js // 项目的配置文件
└── package.json // 当前整一个项目的依赖
然后在项目根目录输入 npm start 启动项目,可以看到下面的页面
使用 antd
通过 npm 安装 antd 和 babel-plugin-import 。
npm install antd babel-plugin-import --save
注意!!!
请在全局目录下找到 .webpackrc 文件,输入以下代码,使 babel-plugin-import 插件生效。
{+ "extraBabelPlugins": [
+ ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
+ ]
}
定义路由
我们通过import引入指定页面,在Route标签中引入。
import React from 'react';
import { Router, Route, Switch } from 'dva/router';
import IndexPage from './routes/IndexPage';function RouterConfig({ history }) {return (<Router history={history}><Switch><Route path="/" exact component={IndexPage} /></Switch></Router>);
}export default RouterConfig;
编写 UI Component
一般为我们创建出来的公共组件。
定义 Model
完成 UI 后,现在开始处理数据和逻辑。
dva 通过 model 的概念把一个领域的模型管理起来,包含同步更新 state 的 reducers,处理异步逻辑的 effects,订阅数据源的 subscriptions 。
export default {namespace: 'example',state: {},reducers: {save(state, action) {return { ...state, ...action.payload };},},effects: {*fetch({ payload }, { call, put }) { // eslint-disable-lineyield put({ type: 'save' });},},subscriptions: {setup({ dispatch, history }) { // eslint-disable-line},},
};
这个 model 里:
- namespace 表示在全局 state 上的 key
- state 是初始值,在这里是空数组
- reducers 等同于 redux 里的 reducer,接收 action,同步更新 state
- effects 用来处理异步操作。如果需要调取接口的话,前台页面就需要调用 effects 里的方法。
- subscription 相当于一个监听器,可以监听路由的变化、鼠标、键盘、服务器连接变化等。
connect 连接 Model 和 Route 页面下的数据
dva 有提供 connect 方法。只要在每个 Routes 页面导入下面的代码即可。
import { connect } from ‘dva’;
我们在最后导出时使用 connect 进行与 Models 的连接。
export default connect(({ example }) => ({ example }))(IndexPage);
example为 Model 层里面的 namespace。
IndexPage为路由。
React中的dav.js脚手架相关推荐
- react中引入html文件,在react中怎么引用js
在react中怎么引用js 推荐两种引入的方法,当然也可以自己编写一个JS类(ES6语法)实现动态插入JS到页面,然后在React项目引入. 第一种:使用插件 react-load-script 如果 ...
- React中的定时器-js
React中的定时器 react中每次状态改变都会导致页面更新,因此定时器得有特殊的配置,不然每次页面更新都会重开一个定时器 每个setTimeout用完之后都是立刻销毁的 并且由于setInterv ...
- react中webpack.config.js配置lessless-loader less
这是我第一次配置这些,没有学过webpack,出过很错,还好后来都一一改正.我觉得我遇到的大部分问题就是版本更新了,和老师教的时候用的有一些不一样,但是我想尽量不要去直接将那些包的版本降低,最好还是使 ...
- three.js script vertex和fragment在react中使用/纯js写法
html原生script写法 <script id="vs" type="x-shader/x-vertex"> -- </script> ...
- this指向、数据双向流、传递参数、JSX中循环、React中样式、路由、引入资源的其它方式、create-react-app脚手架、事件处理、获取数据、UI框架推荐、pc桌面应用electronjs
改变this指向的几种方式: //1.使用箭头函数代替原始函数写法:getState=()=>{}//2.在函数调用时给函数名加bind(this)方法:(bind中第一个参数表示修改this指 ...
- react项目中使用three.js(解决纹理贴图路径问题)
一,本文解决如下问题 1. 在react脚手架的项目中使用three.js 2. three.js在react中使用动态的纹理贴图遇到的路径问题 3. this.指向的丢失问题 二,在项目中使用thr ...
- js路由在php上面使用,React中路由使用详解
这次给大家带来React中路由使用详解,React中路由使用的注意事项有哪些,下面就是实战案例,一起来看一下. 路由 通过 URL 映射到对应的功能实现,React 的路由使用要先引入 react-r ...
- react中js文件中写html,javascript – 使用静态HTML与React
如果您希望在页面加载时加载所有html,则应在构建过程或服务器中动态创建脚本: var PAGE_HTML={"page1.html": "..."," ...
- [react] 你有在项目中使用过Yeoman脚手架吗?
[react] 你有在项目中使用过Yeoman脚手架吗? 前端工程化脚手架部分必备的依赖,用于初始化生成规范的项目目录 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷. ...
最新文章
- Go中的函数也是一种数据类型,可以赋值给一个变量
- HDU - 6601 Keen On Everything But Triangle(主席树)
- 信用社和民营银行存款利息都高,有5万块钱存哪个更安全?
- 安卓app与阿里云服务器的无线通信(非局域网)
- spring aop示例_Spring JpaRepository示例(内存中)
- nlp5-n-gram/语言模型(数据平滑方法
- 前端白屏问题_深入理解前端性能监控
- docker基本镜像添加mysql_Docker的Centos7容器配置Tomcat和MySQL并打成基础镜像
- 通用商业计划书PPT模板
- toolchain安装教程支持_Ubuntu安装ARM架构GCC工具链(ubuntu install ARM toolchain)最简单办法...
- UART、RS-232、RS-422、RS-485
- IO流和NIO流的区别
- itest软件测试工具,Monkey测试工具 - iTest99的个人空间 - 51Testing软件测试网 51Testing软件测试网-软件测试人的精神家园...
- Unity Shader - 搬砖日志 - URP PBR (抄作业篇,持续更新~)
- 华三防火墙配置端口地址转换_H3C SecPath 防火墙设置之端口映射(命令)
- windows11 数字键无法使用 修复办法 已解决
- 聚苯乙烯微球(PS)高分子微球材料
- python读取合并单元格并拆分合并单元格写出
- 阿里技术团队是如何打造的?
- Delphi 动态创建类