搭建react项目,react+ts,react+typescript
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相关推荐
- react项目添加ts
新项目创建 1.react + antd + ts yarn create react-app xxx --template typescript 安装antd yarn add antd 2.rea ...
- 在vue项目或者react项目中实现图形验证码功能
效果演示 使用说明 我对这个图形验证码做了一个组件的封装,如果你的项目是vue项目就粘贴vue章节的组件代码,是react项目就粘贴react章节的组件代码.组件的使用很简单,只需要传递一个prop, ...
- React 全家桶(react脚手架 redux react-redux react-router-dom ui库 reactHook)含 自定义hook的方法及使用
文章目录 React 入门 React 简介 React 为何物 为何学习 React React 初体验 来一发 Hello React 创建虚拟 DOM 的两种方式:JS 和 JSX 虚拟 DOM ...
- vue使用ts 引入组件_vue项目中使用ts(typescript)入门教程
最近项目需要将原vue项目结合ts的使用进行改造,这个后面应该是中大型项目的发展趋势,看到一篇不错的入门教程,结合它并进行了一点拓展记录之.本文从安装到vue组件编写进行了说明,适合入门. 1.引入T ...
- react项目搭建,步骤最全,附源码git地址(react+router+typescript+redux+axios+antdesign+mock+eslint)
企业级react项目搭建流程,基于官网推荐脚手架create-react-app搭建的项目基本框架,在该基础上增加项目所需要的功能插件等.代码git地址base分支:https://github.co ...
- 搭建react项目 搭建ts react项目 使用vite搭建react项目
创建react 项目 注意: 网上有一些生成react 的方法,但是也有一些是过时的. 使用官方脚手架creact-react-app 全局安装 creact-react-app 这个脚手架 这个脚手 ...
- 搭建react项目教程(二)
搭建react项目教程(二) 一:概述 二:配置 1:配置依赖包 2:添加与后台交互的配置文件 3:封装API调用方法 4:与后台交互 5:启动项目验证接口 一:概述 1:书接上文搭建react项目教 ...
- 前端项目搭建部署全流程(一):搭建React项目
1.前言 前段时间突发一个想法,想尝试从零开始搭建一个React项目模板,发布到GitHub,再编写脚手架命令拉取模板以及编写脚本命令快速生成业务模块,然后再用这个模板结合之前的一套组件库,完成编译打 ...
- React项目中应用TypeScript
说说如何在React项目中应用TypeScript? 一.前言: 使用 TypeScript 编写 React 代码,除了需要 TypeScript 这个库之外,还需要安装 @types/react. ...
最新文章
- 百度地图api的密钥申请地址
- 【每日一题】8月28日题目精讲 编号
- 千人千面之3D立体个人数据营销
- 具体数学-第7课(取整基础)
- javascript DOM对象转jquery对象
- 华为认证hcnp题库多久更新一次?华为hcnp认证值不值得考?
- Python绘图实例33:太极图绘制
- 阿里云代码管理平台 Teambition Codeup(行云)亮相,为企业代码安全护航
- Transforms的使用
- 【Struck】论文阅读笔记
- 支付清算体系介绍(下)
- Linux下自动化运维工具ansible
- matlab中caitu_tiqu,源码交流=图像处理 车牌号码识别[Tested]
- 实验6 实现数据完整性
- 多个域名指向同一个网站实现方法
- 远程计算机 函数不支持,远程桌面连接提示:要求的函数不受支持解决方法(The function requestred is not support)...
- macbook电脑连接Wi-Fi网速慢
- vue index.html 缓存,解决vue单页面 回退页面 keeplive 缓存问题
- 交换机-Exchanges
- NC与单一窗口数据对接丨外贸软件