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

相关推荐
浩瀚地学33 分钟前
【面试算法笔记】0106-数组-区间和
笔记·算法·面试
疯狂打码的少年11 小时前
【软件工程】软件开发模型:增量模型与迭代模型
笔记·软件工程
Generalzy12 小时前
从本地 Demo 到生产级检索:Milvus 学习笔记(3)
笔记·学习·milvus
名字还没想好☜12 小时前
Next.js 中间件实战:鉴权、重定向与 A/B 分流
开发语言·前端·javascript·中间件·react·next.js
凉、介14 小时前
Virtio 系列(一):框架概览
笔记·学习·嵌入式·虚拟化·virtio
Yang_jie_0315 小时前
笔记:数据结构(栈是否使用底指针以及头指针的初始化值)
数据结构·笔记·算法
一杯奶茶¥16 小时前
c语言程序设计大学期末考试考研知识点重点笔记题库复习资料C语言重点考点题库资料合集
c语言·笔记·考研·c语言程序设计·c语言笔记
依然范特东16 小时前
动手学深度学习笔记--数据操作、线性代数
人工智能·笔记·深度学习
星栈17 小时前
LiveView 页面越写越卡,我最后抓到的凶手不是数据库,是我自己乱塞 `assigns`
前端·前端框架·elixir
疯狂打码的少年17 小时前
【软件工程】软件开发模型:敏捷开发(Scrum/XP)
笔记·软件工程·scrum·敏捷流程