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

相关推荐
xiaoxue..7 分钟前
从 “手动搬砖“ 到 “自动施法“:界面开发的三次 “渡劫“ 升级记
前端·前端框架·vue
CS Beginner8 分钟前
【单片机】orange prime pi开发板与单片机的区别
笔记·嵌入式硬件·学习
zore_c10 分钟前
【C语言】数据结构——顺序表超详解!!!(包含顺序表的实现)
c语言·开发语言·数据结构·c++·经验分享·笔记·线性回归
im_AMBER8 小时前
Leetcode 74 K 和数对的最大数目
数据结构·笔记·学习·算法·leetcode
断剑zou天涯9 小时前
【算法笔记】蓄水池算法
笔记·算法
老前端的功夫9 小时前
前端高可靠架构:医疗级Web应用的实时通信设计与实践
前端·javascript·vue.js·ubuntu·架构·前端框架
【上下求索】9 小时前
学习笔记095——Ubuntu 安装 lrzsz 服务?
运维·笔记·学习·ubuntu
Benmao⁢9 小时前
C语言期末复习笔记
c语言·开发语言·笔记·leetcode·面试·蓝桥杯
2401_8345170710 小时前
AD学习笔记-27 泪滴的添加和移除
笔记·学习
zyq~11 小时前
【课堂笔记】凸优化问题-2
笔记