当前位置: 首页 > news >正文

React方向:react脚手架的使用

脚手架去搭建项目会使得项目结构层次更清晰,也更加方便使用者去开发。

1、全局安装脚手架
    // 全局安装后,在任意目录下都能运行create-react-app命令初始化项目yarn global add create-react-app
2、安装完成后检查脚手架版本
    create-react-app -V

当提示create-react-app -V不是内部命令时,是由于未配置环境变量导致的。

3、查看全局安装位置目录

npm root -g

image.png

4、查看全局安装位置目录

yarn global dir

image.png

5、开始配置环境变量

进入上述的全局安装的位置目录地址,然后返回两次,看到bin目录,点击进入bin目录文件,当看到有create-react-app时,拷贝当前的位置目录。
点开 电脑 -> 高级配置选项 -> 环境变量 -> path -> 新建 -> C:\Users\15590\AppData\Local\Yarn\bin将位置地址放进去

找到bin目录.png

找到create-react-app.png

新建环境变量.png

环境变量新建好了之后,就 重新打开cmd命令,使用 create-react-app -V的命令查看版本,有版本号了,那么就可以使用命令创建react项目了。
版本号.png

6、初始化项目

使用命令初始化项目
create-react-app demo

7、react项目的目录结构
  • node_modules
    包含整个项目所需要用到的依赖(依赖包、模块、或是插件等)
  • public
    项目访问目录
    其中的index.html是项目访问的入口
  • src
    项目的源码目录
    index.js是项目程序的入口
    App.js是整个项目的根组件
  • package.json
    包文件(记录着项目的所有信息,包含了安装了哪些依赖以及一些运行或者打包项目的命令等)
  • README.md
    项目信息的记录,展示出去的项目信息内容
  • yarn.lock
    锁文件(记录着项目的依赖以及下载地址,后面几次的下载速度会更加快)
8、react项目运行

使用项目的运行命令 :yarn start

执行成功.png



喜欢的朋友记得点赞、收藏、关注哦!!!

http://www.xdnf.cn/news/517987.html

相关文章:

  • 【快速解决】彻底卸载VMWare
  • 2025.5.17总结
  • 时间服务器深度解析与实战指南:从原理到企业级部署
  • GO学习指南
  • INA226 高侧/低侧测量、双向电流/功率监视器,具有I2C兼容接口
  • 处理金融数据,特别是股票指数数据,以计算和分析RSRS(相对强度指数)
  • NE555双音门铃实验
  • 电子电路:阻抗是什么,容抗又是什么?
  • Python打卡 DAY 29
  • Baklib赋能企业知识资产AI化升级
  • Python 中二维列表(list)(嵌套列表)详解
  • 3Dmax中用RayFire实现破碎动画效果
  • Python黑魔法与底层原理揭秘:突破语言边界的深度探索
  • TensorRT
  • 提取YOLO检测框-以车牌识别为例
  • 远程文件传输解决方案:用群晖NAS Cloud Sync实现跨地区传输与多人同时传输时的优化
  • 什么是 Boosting
  • BOM知识点
  • 加密芯片法(一)ATSHA204A 特性理解
  • 使用Redission来实现布隆过滤器
  • 【八股战神篇】MySQL高频面试题
  • FreeTex v0.3.0:支持静默运行/软件体积压缩
  • LLM笔记(八)Transformer学习
  • 2025年- H29-Lc137- 19.删除链表的倒数第N个节点(快慢指针)---java版
  • WebSocket解决方案的一些细节阐述
  • 国内人工智能行业研究报告 目录
  • 三相逆变器下垂均流控制策略simulink仿真
  • 通过觅思文档项目实现Obsidian文章浏览器在线访问
  • 基于OpenCV的实时文档扫描与矫正技术
  • Embedding 模型详解:架构、训练与 LLM 的区别