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

相关推荐
sakiko_4 小时前
Swift学习笔记42-SwiftUI的属性包装器(讲解+面试)
笔记·学习·ios·swiftui·swift
自小吃多5 小时前
器件移动、旋转、镜像、对齐、等间距操作笔记
笔记·嵌入式硬件
存在morning6 小时前
【Paimon 学习笔记 三】工作流程:Paimon 的批写、流写、批读与流读
笔记·学习
老当益壮梁奶奶7 小时前
Linux软件编程学习笔记(八):进程间通信详解(1)
linux·c语言·笔记·学习·算法
weixin_466068119 小时前
《十分钟冥想》精读笔记(上):每天10分钟,给大脑做一次“系统减负”
笔记
凯尔萨厮9 小时前
Java学习笔记十(注解)
java·笔记·学习
一条破秋裤11 小时前
STM32 学习笔记:GPIO 输出实验——LED 闪烁、流水灯与蜂鸣器
笔记·stm32·学习
存在morning11 小时前
【Paimon 学习笔记 二】存储架构:快照、manifest、LSM 树、bucket
笔记·学习·架构
双眼鈹12 小时前
周报8.31
笔记·学习
eokred12 小时前
图片预览组件的另一种设计:Headless、可组合、开箱即用
前端·react