React脚手架的安装

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即可