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

相关推荐
摇滚侠1 小时前
《计算机是如何工作的:人人都能懂的计算机软硬件工作原理》第 9 章 机器码与汇编语言 阅读笔记 9
java·开发语言·笔记
xier_ran1 小时前
【infra之路】AI 编译器学习笔记(六):重拾 C++——lambda 与 MLIR 中的回调
c++·笔记·学习
志尊宝1 小时前
Vue3 零基础每日笔记(078):首屏加载速度优化汇总——清单化方案
笔记
Java后端的Ai之路2 小时前
08_React组件API
前端·react.js·前端框架
ZZHow10244 小时前
Ascend C算子开发(高级)笔记
c++·人工智能·笔记·深度学习·华为云
PC2005-cloud5 小时前
Mysql学习笔记:InnoDB Cluster 集群从零搭建实战,基于 Docker 实现高可用读写分离架构
笔记·学习·mysql
小陈phd5 小时前
深入理解agent学习笔记(七)——动态提示词与Skills
笔记·学习
我命由我123455 小时前
田野笔记极简理解
经验分享·笔记·学习·职场和发展·求职招聘·职场发展·学习方法
小陈phd6 小时前
深入理解agent学习笔记(六)——提示工程-优化系统提示词
笔记·学习
霖霖7146 小时前
【ESP32笔记】RGB灯WS2812实验
笔记·单片机·mcu·物联网