react项目初始化

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

npm install  -g dva-cli

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

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 },+    ],+  },+ });

https://www.jianshu.com/p/3c64bcffcead

作者：wuli_静哥哥
链接：https://www.jianshu.com/p/3c64bcffcead
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。