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

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

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

相关推荐
且行志悠36 分钟前
Mysql的使用
mysql
xuxie1336 分钟前
SpringBoot文件下载(多文件以zip形式,单文件格式不变)
java·spring boot·后端
白鹭37 分钟前
MySQL源码部署(rhel7)
数据库·mysql
重生成为编程大王1 小时前
Java中的多态有什么用?
java·后端
666和7771 小时前
Struts2 工作总结
java·数据库
中草药z1 小时前
【Stream API】高效简化集合处理
java·前端·javascript·stream·parallelstream·并行流
野犬寒鸦1 小时前
力扣hot100:搜索二维矩阵 II(常见误区与高效解法详解)(240)
java·数据结构·算法·leetcode·面试
zru_96021 小时前
centos 系统如何安装open jdk 8
java·linux·centos
LiRuiJie2 小时前
深入剖析Spring Boot / Spring 应用中可自定义的扩展点
java·spring boot·spring