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

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

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

相关推荐
rzl024 分钟前
SpringBoot总结
spring boot·后端·firefox
月亮不月亮18 分钟前
月亮商场购物打折Java
java·eclipse
moxiaoran575320 分钟前
Springboot+MongoDB简单使用示例
spring boot·mongodb·spring
guozhetao28 分钟前
【ST表、倍增】P7167 [eJOI 2020] Fountain (Day1)
java·c++·python·算法·leetcode·深度优先·图论
技术思考者28 分钟前
基础很薄弱如何规划考研
java·经验分享·考研
江城开朗的豌豆38 分钟前
Vue和React中的key:为什么列表渲染必须加这玩意儿?
前端·vue.js·面试
江城开朗的豌豆44 分钟前
前端路由傻傻分不清?route和router的区别,看完这篇别再搞混了!
前端·javascript·vue.js
iVictor1 小时前
分享一个 MySQL binlog 分析小工具
mysql
●VON1 小时前
重生之我在暑假学习微服务第二天《MybatisPlus-下篇》
java·学习·微服务·架构·mybatis-plus
老华带你飞1 小时前
口腔助手|口腔挂号预约小程序|基于微信小程序的口腔门诊预约系统的设计与实现(源码+数据库+文档)
java·数据库·微信小程序·小程序·论文·毕设·口腔小程序