React和umi搭建项目的操作步骤

​​​​​​一、react脚手架新建项目

(1.1)、命令行

前提:react ES2015,nodejs v8+

npx create-react-app myReactName //2022年v16以下版本 myReactName(自定义项目名)

react中文官网,快速上手:react中文官网

react框架,脚手架命令行:脚手架创建项目命令行

(1.2)、项目目录结构

(1.3)、浏览器运行,端口号3000:

npm start

http://localhost:3000

二、umi脚手架

前提:组件库Atn-design和react框架是捆绑在一起,就像element+Vue2框架,就像element-plus+Vue3框架捆绑在一起。

参考官网:Ant-design官网

**(1.1)、**安装umi

命令行: npx @umijs/create-umi-app 或 yarn create @umijs/umi-app

目录结构:

浏览器运行,端口号3000:yarn start

**(1.2)、**全局安装umi

安装umi: npm install umi -g 或 yarn global add umi

查看umi是否安装成功: umi -v

相关推荐
循环过三天1 小时前
3-1 PID算法改进(积分部分)
笔记·stm32·单片机·学习·算法·pid
伍哥的传说2 小时前
鸿蒙系统(HarmonyOS)应用开发之手势锁屏密码锁(PatternLock)
前端·华为·前端框架·harmonyos·鸿蒙
之歆2 小时前
Python-封装和解构-set及操作-字典及操作-解析式生成器-内建函数迭代器-学习笔记
笔记·python·学习
DKPT3 小时前
Java组合模式实现方式与测试方法
java·笔记·学习·设计模式·组合模式
青松学前端4 小时前
vue-2.7源码解读之初始化流程和响应式实现
前端·vue.js·前端框架
杨进军4 小时前
前端线上问题的那些事儿
前端·javascript·前端框架
受之以蒙4 小时前
Rust & WASM 之 wasm-bindgen 基础:让 Rust 与 JavaScript 无缝对话
前端·笔记·rust
一笑code5 小时前
vue/微信小程序/h5 实现react的boundary
微信小程序·vue·react
茫忙然5 小时前
【WEB】Polar靶场 6-10题 详细笔记
笔记
eric*16885 小时前
尚硅谷张天禹老师课程配套笔记
前端·vue.js·笔记·vue·尚硅谷·张天禹·尚硅谷张天禹