做淘宝美工和网站设计那个好技成培训网

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

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

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

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