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

相关推荐
sunshine22 girl18 分钟前
Angular7,9,学习笔记四 父子组件传值,组件之间传值
笔记·学习
蒸蒸yyyyzwd1 小时前
cpp选手秋招学习笔记 day18
笔记·学习
Hotchip_MEMS1 小时前
从“手工作坊”到“全自动贴装”:MEMS如何重塑雾化器制造流程
人工智能·笔记·物联网·电脑·制造
维克兜率天2 小时前
【维克】技术指标是什么:从均线到MACD的数学原理
人工智能·笔记·python·算法·量化
摇滚侠3 小时前
《SpringBoot 3:入门与应用实战》第 9 章 使用 WebMvc 开发应用 阅读笔记 2
java·spring boot·笔记
_Narcissus_4 小时前
分治&递归
数据结构·c++·笔记·算法·leetcode·递归·分治
Capricorn19884 小时前
科研引用无法溯源怎么排查?知芽 Notebook Skill 技术机制拆解
大数据·论文阅读·人工智能·笔记·论文笔记
Capricorn19885 小时前
Agent 记忆层接入后引用仍不可信?知芽 Notebook Skill 排障指南
大数据·论文阅读·人工智能·笔记·架构
自小吃多5 小时前
PCB Editor放置元器件笔记
笔记·嵌入式硬件