React+dva+antd搭建及使用:

安装dva-cli用于初始化项目:

npm install  -g dva-cli (前提已经安装过node)

创建项目目录,并进入该目录

mkdir  dva-study 

cd dva-study

初始化项目

dva init

运行项目

npm start 

项目初始化之后目录结构如下:


mock 存放用于 mock 数据的文件;

public 一般用于存放静态文件,打包时会被直接复制到输出目录(./dist);

src 文件夹用于存放项目源代码;

asserts 用于存放静态资源,打包时会经过 webpack 处理;

components 用于存放 React 组件,一般是该项目公用的无状态组件;

models 用于存放模型文件

routes 用于存放需要 connect model 的路由组件;

services 用于存放服务文件,一般是网络请求等;

utils 工具类库

router.js 路由文件

index.js 项目的入口文件

index.css 一般是共用的样式

.editorconfig 编辑器配置文件

.eslintrc ESLint配置文件

.gitignore Git忽略文件

.roadhogrc.mock.js Mock配置文件

.webpackrc 自定义的webpack配置文件,JSON格式,如果需要 JS 格式,可修改为 .webpackrc.js

创建项目之后的步骤:

一,首先创建路由,路由就是组成应用的很多个不同的页面

1.创建routes文件夹,然后创建Products.js文件,这就是其中一个路由,即一个页面。

2.添加路由信息到路由表,路由信息统一在router.js里面

二,component 即UI元素,有时候需要在多个页面分享UI元素,或者在一个页面使用多次。

1,新建components文件夹

2,在components文件夹下创建ProductList.js文件

3,使用时在需要的页面import引入,然后再把它作为一个组件使用就可以

三,定义model,model里面是处理的数据和逻辑

里面包括同步更新的state和reducers,处理异步逻辑的effects,

订阅数据源的subscriptions.

1.新建models文件夹,在文件夹中新建products.js文件,里面写相应的数据处理和逻辑。

在products.js里面:namespace表示在全局的state上的key

state是初始值,在这里是空数组

reducers等同于redux里面的reducer,用于接收action,同步更新state

2.在models里面新建的处理数据的文件都要在index.js里面载入

// 3. Model+ app.model(require('./models/products').default);

四,连接数据处理和组件

编辑routes里面的显示页面,将数据传给UI元素,再将UI元素传给路由

五,编辑index.js文件,将要传的数据放进index.js里面的

const app = dva({+  initialState: {+    products: [+      { name: 'dva', id: 1 },+      { name: 'antd', id: 2 },+    ],+  },+ });

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • dva.js 简介 dva 是阿里前端架构师 sorrycc 带 team 研发的一套轻量级前端框架,其目的是尽量...
    那颗星_fcaf阅读 3,849评论 0 24
  • 一、开发环境 首先,请安装 NodeJS。NodeJS 是一个 JS 执行环境,umi 基于 JS 编写,并且需要...
    Lia代码猪崽阅读 48,689评论 7 44
  • 前两篇写了react各种基本操作和主要概念但其实没必要那么复杂直接用框架就好啦这年头前端框架真是一睁眼就多出好几个...
    saint37阅读 25,950评论 9 45
  • 学习笔记 原文地址:antDesignPro使用心得,快速开发必备。https://www.52pojie.cn/...
    kalshen阅读 44,957评论 8 85
  • 早上6点半没叫就醒了。和妈妈一起煮饺子,摊鸡蛋,摆碗筷。今天吃饭很香,比昨天多要了3个饺子,问妈妈,那妈妈你还够吃...
    慢蜗牛Erica阅读 288评论 0 1

友情链接更多精彩内容