React脚手架和dva

一. 构建react脚手架

     全局安装 npm i create-react-app -g

      创建 create-react-app   my-app (名)

      进入 cd my-app

      下包 npm start

二. 优化

     如果你的构建文件很大,你可以通过 analyze 命令构建并分析依赖模块的体积分布,从而优化你的代码。

     npm run analyze

三. 配置:

     1.打包之后每一个页面加载的速度都特别慢,在.webpackrc里面配置了ignoreMomentLocale: true, disableDynamicImport: false, 进行按需加载还是运行速度缓慢浏览器加载时有个js加载了1s多,打包了以后的js也很大

https://www.jianshu.com/p/8445be9696ed  dva搭建

在使用React、Umi和dva组合开发Web应用时,你需要遵循一系列步骤来构建和组织你的项目。这里是一个基本的介绍: 1. **创建项目**:首先,你需要创建一个新的Umi项目。Umi是一个可插拔的企业级React应用框架,它可以帮助你快速搭建项目结构,并提供了一些约定和最佳实践。你可以通过命令行使用Umi的脚手架工具来创建新项目: ``` npx umi init my-app cd my-app ``` 2. **安装dva**:dva是一个轻量级的前端框架,它基于Redux和Redux-Saga,提供了一种更简洁的方式来组织你的应用状态和处理数据流。在项目中安装dva: ``` npm install dva ``` 3. **配置路由**:Umi使用约定式路由,你只需要在`src`目录下创建对应的文件和目录来定义你的页面和路由。例如,创建一个`pages`文件夹,并在其中创建`user.js`文件,这将会被识别为一个用户页面,并且对应的路由会被自动生成。 4. **使用dva模型**:在dva中,模型(model)是应用中数据和逻辑的抽象。你需要定义模型来管理状态,并且定义effect来处理异步逻辑。在Umi项目中,你可以创建一个`models`目录来存放你的dva模型。 5. **连接视图和模型**:在React组件中,你可以使用`connect`方法来连接组件和dva模型。这样,你的组件就可以访问模型中的状态,并且可以触发模型中的dispatch来更新状态。 6. **数据流管理**:在dva中,使用Redux的`dispatch`来触发一个action,然后action会调用对应的reducer来更新状态,或者调用effect来处理异步逻辑。这是一个单向数据流的过程,有助于维护状态的一致性和可预测性。 7. **启动和构建项目**:在开发过程中,你可以使用以下命令来启动开发服务器: ``` npm start ``` 当你需要构建项目用于生产环境时,可以使用: ``` npm run build ``` 这将会生成优化后的静态文件,可以部署到任何静态文件服务器上。 这些步骤为你提供了如何使用React、Umi和dva组合进行Web应用开发的基础。随着项目的深入,你可能还需要了解更多的高级特性,比如插件、中间件、路由配置、布局组件等。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值