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

相关推荐
中年程序员一枚26 分钟前
nuxt安装出现certificate 错误
前端框架·npm·node.js
笑鸿的学习笔记40 分钟前
git笔记之默认使用vim以及修改倒数第二次的commit提交信息到远程
笔记·git·vim
saoys43 分钟前
Opencv 学习笔记:霍夫变换实现图像中圆的精准检测与绘制
笔记·opencv·学习
wdfk_prog1 小时前
[Linux]学习笔记系列 -- [driver][base]class
linux·笔记·学习
U-52184F691 小时前
机械加工新手入门笔记:车铣区别与五轴机床
笔记
@zulnger1 小时前
Django 框架(模板)
笔记·python·学习·django
今儿敲了吗1 小时前
计算机网络第四章笔记(二)
笔记·计算机网络
执行部之龙1 小时前
CSS3 技术拓展学习笔记
笔记·学习·css3
lkbhua莱克瓦241 小时前
Web前端开发核心认知与技术演进
开发语言·前端·笔记·javaweb
全栈前端老曹1 小时前
【前端】Hammer.js 快速上手入门教程
开发语言·前端·javascript·vue·react·移动端开发·hammer.js