react学习笔记(一) react项目的三种创建方式

最新推荐文章于 2025-05-20 14:32:22 发布

lxw_powerfulCat

最新推荐文章于 2025-05-20 14:32:22 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签： react.js javascript 前端

本文链接：https://blog.youkuaiyun.com/lxw_hk2_zy/article/details/122297669

本文介绍了React项目的三种创建方式：1）使用create-react-app快速初始化；2）结合dva构建轻量级数据流框架应用；3）利用umi.js打造企业级前端框架。此外，还提及了重定义router和umi.js中redux异步请求接口的方法，适合React初学者和开发者参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

react项目的三种创建方式

程序猿都一样, 明明是vue的小前端, 是不是就被派遣到react项目组, 是不是就被派遣到小程序项目组, 有时候还要代替后台写接口, 莫慌莫慌, 先把react搞定再说

react版本 react@17.0.2 | MIT | deps: 2 | versions: 739 // npm info react
node版本 v16.4.2 // node -v
yarn版本 1.22.11 // yarn -version
dva版本 dva-cli version 0.10.1 // dva -v
nmi版本 ^2.9.0 // umi -v
react创建的三种方式: https://blog.youkuaiyun.com/lxw_hk2_zy/article/details/122297669
重定义router 路由的两种方式: https://blog.youkuaiyun.com/lxw_hk2_zy/article/details/122301216
umi.js redux 异步(effects)请求接口 https://blog.youkuaiyun.com/lxw_hk2_zy/article/details/122302297

1, create-react-app

温馨提示 全局安装yarn
npm install -g yarn
yarn --version (检测, 查看版本)

// 全局安装 create-react-app(类似于vue-cli)
	yarn global add create-react-app
	npm install -g create-react-app
// 用 create-react-app 创建项目
	create-react-app projectName // ( 注意版本问题, 很有可能安装不上, 建议使用yarn安装 )

	yarn create react-app 项目名
	// 或者 or
	npx create-react-app 项目名

2, react + dva

dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架。

特性

易学易用，仅有 6 个 api，对 redux 用户尤其友好，配合 umi 使用后更是降低为 0 API

elm 概念，通过 reducers, effects 和 subscriptions 组织 model

插件机制，比如 dva-loading 可以自动处理 loading 状态，不用一遍遍地写 showLoading 和 hideLoading

支持 HMR，基于 babel-plugin-dva-hmr 实现 components、routes 和 models 的 HMR

// 全局安装 dva-cli 
	npm install dva-cli -g
	// 或者 
	yarn global add dva-cli
// 新建项目
	dva new 项目名

3, react + dva + umi

① 什么是Umi.js?

umi，中文可发音为乌米，是一个可插拔的企业级 react 应用框架。你可以将它简单的理解为一个专注性能的类 next.js 前端框架，并通过约定、自动生成和解析代码等方式来辅助开发，减少我们开发者的代码量。

② 为什么使用Umi.js?

我们做react开发的时候会不会遇到以下问题？
1.项目做大的时候，开发调试的启动和热更新时间会变得很长。
2.大应用下，网站打开很慢，有没有办法基于路由做到按需加载。
3.dva的model每次都要手写载入，能否一开始就同项目初始化好？

使用Umi.js，即可解决以上问题，并且还能提供如下优势：

开箱即用，内置 react、react-router 等
类 next.js 且功能完备的路由约定，同时支持配置的路由方式
完善的插件体系，覆盖从源码到构建产物的每个生命周期
一键兼容到 IE9
完善的 TypeScript 支持
与 dva 数据流的深入融合

// 全局安装umi
	cnpm install umi -g
	// 或者
	yarn global add umi
// 创建项目
	yarn create umi

创建成功之后, 在package.json中查看启动方式