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

© 著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务

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

相关推荐
喂完待续10 分钟前
【序列晋升】45 Spring Data Elasticsearch 实战:3 个核心方案破解索引管理与复杂查询痛点,告别低效开发
java·后端·spring·big data·spring data·序列晋升
郑重其事,鹏程万里13 分钟前
commons-exec
java
龙茶清欢14 分钟前
具有实际开发参考意义的 MyBatis-Plus BaseEntity 基类示例
java·spring boot·spring cloud·mybatis
神龙斗士24018 分钟前
Java 数组的定义与使用
java·开发语言·数据结构·算法
计算机学姐18 分钟前
基于微信小程序的扶贫助农系统【2026最新】
java·vue.js·spring boot·mysql·微信小程序·小程序·mybatis
白露与泡影18 分钟前
2025互联网大厂高频Java面试真题解析
java·开发语言·面试
forever銳20 分钟前
java中如何保证接口幂等性
java·后端
蓝莓味的口香糖20 分钟前
【企业微信】VUE项目在企微中自定义转发内容
前端·vue.js·企业微信
柯南二号21 分钟前
【Java后端】MyBatis 和 MyBatis-Plus (MP) 的区别
java·数据库·tomcat
C++chaofan25 分钟前
游标查询在对话历史场景下的独特优势
java·前端·javascript·数据库·spring boot