搭建react项目

---

#pic_center =400x
参考文章：
react开发环境搭建

系列文章：

---

---

create-react-app安装react

查看是否安装过create-react-app

npm list create-react-app
-- create-react-app@5.0.1 # 输出版本信息即安装过

npm版本管理

npm版本升级指南
npm -v显示版本：X.X.XX

升级npm

npm install -g npm

npm报错 npm WARN deprecated…的问题解决方式
可能npm版本 过高 或 过低

npm 镜像安装

直接使用官方镜像搭建react,比较慢, 所以使用国内镜像.
【npm淘宝镜像过期解决办法】
查看镜像

npm config get registry

临时使用：
在使用npm安装包的时候，可以通过–registry参数指定一个临时的镜像源。例如：

npm install [package_name] --registry=https://registry.npmmirror.com

永久设置：
可以通过修改npm的配置文件来永久设置镜像源。配置文件通常位于用户的家目录下，文件名为.npmrc。貌似.npmrc权限高于命令行。你可以使用文本编辑器打开这个文件，并添加或修改以下行：

registry=https://registry.npmmirror.com

或者命令行

npm config set registry https://registry.npmmirror.com

也就是说https://registry.npm.taobao.org该镜像已过期无法使用需要更换，需要更换其他如npm官方镜像源，淘宝更新后的新镜像源，已经阿里云，腾讯云其他镜像地址。
这里可以更换的镜像有：
npm 官方原始镜像网址是：https://registry.npmjs.org/ （这里是更换回npm官方镜像，下载依赖过慢不推荐使用）
npm新淘宝镜像：https://registry.npmmirror.com
阿里云 NPM 镜像：https://npm.aliyun.com
腾讯云 NPM 镜像：https://mirrors.cloud.tencent.com/npm/
华为云 NPM 镜像：https://mirrors.huaweicloud.com/repository/npm/
网易 NPM 镜像：https://mirrors.163.com/npm/
中科院大学开源镜像站：http://mirrors.ustc.edu.cn/
清华大学开源镜像站：https://mirrors.tuna.tsinghua.edu.cn/
这里通过npm config set registry 镜像地址，设置新的镜像

使用create-react-app搭建react, --template typescript通过–template typescript使得我们的项目支持ts,但是项目中package.json中没看到typescript,

npx create-react-app antd-demo --template typescript

npm安装typescript,将TypeScript作为开发依赖项安装到你的项目中。–save-dev标志表示TypeScript将被添加到你的package.json文件中的devDependencies部分。

# 不需要执行npm install typescript --save-dev 因为 --template typescript已经支持并且在react内置了typescipt
npm install typescript --save-dev

安装 antd

npm install antd --save

在写代码时发现导入组件时 如import {UseRefDemo}“./components/index.tsx” 必须写上 tsx后缀。因此想要配置默认解析一些文件拓展名，配置主要参看文章1，如下：

1- create-react-app 定义路径别名，默认识别 jsx格式文件
2-create-react-app设置路径别名

# 原先的脚本"scripts": {"start": "react-scripts start","build": "react-scripts build","test": "react-scripts test","eject": "react-scripts eject"},# 新的脚本"scripts": {"start": "react-app-rewired start","build": "react-app-rewired build","test": "react-app-rewired test --env=jsdom"},

原理是：使用create-react-app时，内部将一些配置文件封闭了，执行