React脚手架是基于webpak基础，所以前提条件是安装好npm或者yarn版本管理器。
目录
yarn基于npm安装
安装React脚手架步骤
React脚手架项目结构
当运行React项目卡住
yarn基于npm安装
//全局安装：npm install -g yarn
//查看版本：yarn --version
//淘宝镜像安装：
yarn config set registry https://registry.npm.taobao.org -g
yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g
//常见的yarn命令：
- yarn start 运行项目
- yarn build 打包
- yarn eject react ：把webpack的配置文件都隐藏起来了，这个命令是将所有webpack相关的配置文件都暴露出来，并且这个命令是不可逆转的，不能再隐藏webpack的配置文件。
安装React脚手架步骤
- 打开cmd输入：npm i -g create-react-app //全局安装
- 切换到想要创建项目的目录，cmd后输入：create-react-app hello-react // hello-react是你自定义的项目名称
- 安装成功后cd到项目文件夹
- 启动项目：yarn start 或者 npm start
React脚手架项目结构
|--node_modules---第三方依赖模块文件夹
|--public
favicon.icon ------ 网站页签图标
index.html -------- 主页面
logo192.png ------- logo图
logo512.png ------- logo图
manifest.json ----- 应用加壳的配置文件
robots.txt -------- 爬虫协议文件
|--scripts
App.css -------- App组件的样式（以后可以存放路由样式）
App.js --------- App组件（以后可以存放路由组件）
App.test.js ---- 用于给App做测试
index.css ------ 样式
index.js ------- 入口文件
logo.svg ------- logo图
reportWebVitals.js — 页面性能分析文件(需要web-vitals库的支持)
setupTests.js ---- 组件单元测试的文件(需要jest-dom库的支持)
api — 项目引入ts的话可以用于存放前后台交互的文件
- consts.ts：存放常量
- index.d.ts：存放数据类型限制条件
- index.tsx：存放前后台交互的函数
- transfrom.ts：存放前后台数据类型的转换
components：存放公共组件
mock：存放模拟数据
pages：存放路由组件文件
utils：存放工具公共函数
|--src------------源码文件夹
|--components-----------------react组件
|--index.js-------------------应用入口js
|--.gitignore------git版本管制忽略的配置
|--package.json----应用包配置文件
|--README.md-------应用描述说明的readme文件
React 项目启动卡在Starting the development server…的问题
遇到启动项目后卡在Starting the development server...不动,不自动弹出浏览器也没有弹出网址，有可能是被电脑管家给禁用了。所以我们需要打开电脑管家，如图点击进去，将powershell.exe添加到信任项。
一般powershell.exe的具体位置在这个文件夹下：C:\Windows\System32\WindowsPowerShell\v1.0
然后重启VScode即可
