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命令：

1. yarn start 运行项目
2. yarn build 打包
3. yarn eject react ：把webpack的配置文件都隐藏起来了，这个命令是将所有webpack相关的配置文件都暴露出来，并且这个命令是不可逆转的，不能再隐藏webpack的配置文件。

 安装React脚手架步骤

1. 打开cmd输入：npm i -g create-react-app //全局安装
2. 切换到想要创建项目的目录，cmd后输入：create-react-app hello-react // hello-react是你自定义的项目名称
3. 安装成功后cd到项目文件夹
4. 启动项目：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即可