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

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

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

相关推荐
Le1Yu8 小时前
雪崩问题及其解决方案(请求限流、线程隔离、服务熔断、fallback、sentinel实现以上功能)
java·开发语言
徐子童9 小时前
基于微服务的在线判题系统重点总结
java·微服务·架构
别或许9 小时前
在centos系统下,安装MYSQL
linux·mysql·centos
青衫码上行9 小时前
【从0开始学习Java | 第21篇】网络编程综合练习
java·网络·学习
丁丁丁梦涛9 小时前
CentOS修改MySQL数据目录后重启失败的问题及解决方案
linux·mysql·centos
disanleya9 小时前
怎样安全地开启MySQL远程管理权限?
数据库·mysql
鸽鸽程序猿9 小时前
【项目】【抽奖系统】注册功能实现
java·开发语言
梵得儿SHI10 小时前
Vue 开发环境搭建全指南:从工具准备到项目启动
前端·javascript·vue.js·node.js·pnpm·vue开发环境·nvm版本管理
沐浴露z10 小时前
【JVM】详解 运行时数据区
java·jvm
云泽80810 小时前
C/C++内存管理详解:从基础原理到自定义内存池原理
java·c语言·c++