1、使用create-react-app my-react

目前使用create-react-app会遇到以下错误提示:

该错提示我们 您正在运行 create-react-app 5.0.0,它落后于最新版本 (5.0.1)。

react 不再支持全局安装 Create React App

让我们先把 Create React App 删除。我们运行npm uninstall -g create-react-app

然后通过 官方提供的文档地址,查看新的创建react项目的方式
链接: https://create-react-app.dev/docs/getting-started/

2、然后通过 npm init react-app my-react 创建项目,运行报错如下:


该错提示我们 网络存在异常,主要原因是 npm 在国内不好用,所以这时候就要靠 国内的淘宝镜像了。
淘宝镜像安装如下: npm install -g cnpm -registry=https://registry.npm.taobao.org;

3、安装好淘宝镜像运行 cnpm init react-app my-react

结果如下:

提示我们安装成功,以及运行方式,打包方式等。
提示我们安装成功,以及运行方式,打包方式等。
提示我们安装成功,以及运行方式,打包方式等。
提示我们安装成功,以及运行方式,打包方式等。
提示我们安装成功,以及运行方式,打包方式等。
提示我们安装成功,以及运行方式,打包方式等。

新版react安装及问题解析结束了。如果有用,请点个爱心吧


(1)后续:

想要使用ts方式的react,即:typescript和react同时安装,可以使用官方提供的npx;

如果想要使用 npx 安装 typescript ,命令:npx create-react-app my-app --template typescript

会发生安装不成功的问题,原因:npm(npx) 的包 是国外的,所以会出现网络问题,导致失败

解决方式

1、查看npm的镜像来源

npm config get registry
// 默认是:https://registry.npmjs.org/

2、修改成淘宝的镜像源
npm config set registry https://registry.npm.taobao.org

3、运行 npx create-react-app my-app --template typescript

这时候你就如愿以偿了 react + ts 项目就完成了

搭建react项目,react+ts,react+typescript相关推荐

  1. react项目添加ts

    新项目创建 1.react + antd + ts yarn create react-app xxx --template typescript 安装antd yarn add antd 2.rea ...

  2. 在vue项目或者react项目中实现图形验证码功能

    效果演示 使用说明 我对这个图形验证码做了一个组件的封装,如果你的项目是vue项目就粘贴vue章节的组件代码,是react项目就粘贴react章节的组件代码.组件的使用很简单,只需要传递一个prop, ...

  3. React 全家桶(react脚手架 redux react-redux react-router-dom ui库 reactHook)含 自定义hook的方法及使用

    文章目录 React 入门 React 简介 React 为何物 为何学习 React React 初体验 来一发 Hello React 创建虚拟 DOM 的两种方式:JS 和 JSX 虚拟 DOM ...

  4. vue使用ts 引入组件_vue项目中使用ts(typescript)入门教程

    最近项目需要将原vue项目结合ts的使用进行改造,这个后面应该是中大型项目的发展趋势,看到一篇不错的入门教程,结合它并进行了一点拓展记录之.本文从安装到vue组件编写进行了说明,适合入门. 1.引入T ...

  5. react项目搭建,步骤最全,附源码git地址(react+router+typescript+redux+axios+antdesign+mock+eslint)

    企业级react项目搭建流程,基于官网推荐脚手架create-react-app搭建的项目基本框架,在该基础上增加项目所需要的功能插件等.代码git地址base分支:https://github.co ...

  6. 搭建react项目 搭建ts react项目 使用vite搭建react项目

    创建react 项目 注意: 网上有一些生成react 的方法,但是也有一些是过时的. 使用官方脚手架creact-react-app 全局安装 creact-react-app 这个脚手架 这个脚手 ...

  7. 搭建react项目教程(二)

    搭建react项目教程(二) 一:概述 二:配置 1:配置依赖包 2:添加与后台交互的配置文件 3:封装API调用方法 4:与后台交互 5:启动项目验证接口 一:概述 1:书接上文搭建react项目教 ...

  8. 前端项目搭建部署全流程(一):搭建React项目

    1.前言 前段时间突发一个想法,想尝试从零开始搭建一个React项目模板,发布到GitHub,再编写脚手架命令拉取模板以及编写脚本命令快速生成业务模块,然后再用这个模板结合之前的一套组件库,完成编译打 ...

  9. React项目中应用TypeScript

    说说如何在React项目中应用TypeScript? 一.前言: 使用 TypeScript 编写 React 代码,除了需要 TypeScript 这个库之外,还需要安装 @types/react. ...

最新文章

  1. 百度地图api的密钥申请地址
  2. 【每日一题】8月28日题目精讲 编号
  3. 千人千面之3D立体个人数据营销
  4. 具体数学-第7课(取整基础)
  5. javascript DOM对象转jquery对象
  6. 华为认证hcnp题库多久更新一次?华为hcnp认证值不值得考?
  7. Python绘图实例33:太极图绘制
  8. 阿里云代码管理平台 Teambition Codeup(行云)亮相,为企业代码安全护航
  9. Transforms的使用
  10. 【Struck】论文阅读笔记
  11. 支付清算体系介绍(下)
  12. Linux下自动化运维工具ansible
  13. matlab中caitu_tiqu,源码交流=图像处理 车牌号码识别[Tested]
  14. 实验6   实现数据完整性
  15. 多个域名指向同一个网站实现方法
  16. 远程计算机 函数不支持,远程桌面连接提示:要求的函数不受支持解决方法(The function requestred is not support)...
  17. macbook电脑连接Wi-Fi网速慢
  18. vue index.html 缓存,解决vue单页面 回退页面 keeplive 缓存问题
  19. 交换机-Exchanges
  20. NC与单一窗口数据对接丨外贸软件

热门文章

  1. 苹果原壁纸高清_动漫 | 神奇宝贝全面屏壁纸
  2. abap CA CO CS 模式匹配的使用方法
  3. 【CS224W】(task9)图神经网络的表示能力(GIN图同构模型)
  4. Animation,Animator学习
  5. Taiko taiko
  6. Mac文件搜索工具Scherlokk中文版
  7. SQL2012连接字符串
  8. 多网段多通道IP地址和通讯端口转换
  9. 基于python 的电子防抖01 ——使用opencv和vidstab
  10. 可编程控制器怎么定义的