当前位置: 首页 > news >正文

创建一个 React+Typescript 项目

接下来 我们来一起探索一下用TypeScript 来编写react
在这里插入图片描述
这也是一个非常好的趋势,目前也非常多人使用
那么 我们就先从创建项目开始

首先 我们先找一个 或者 之前创建一个目录 用来放我们的项目
在这里插入图片描述
然后 在这个目录下直接输入
例如 这里 我想创建一个叫 tsReApp 的项目就可以输入

npx create-react-app tsreapp --template typescript

这个没办法 这个命令是不支持大写的 所以 名字就只好将大写部分换成小写了
在这里插入图片描述
然后 我们查看目录 发现项目就已经创建好了
这里 大家一定要搞清楚 npx的概念
他的意思是 如果你的项目中有执行这个命令需要的依赖 他就用依赖 如果没有 他就自己先将依赖装好 再创建
在这里插入图片描述
然后 我们聊个题外话
官方推荐我们使用 VSCode 一般前端电脑里应该都有 这个工具还是非常好用的
在这里插入图片描述
然后 我们用VSCode打开刚刚创建的项目
在 package.json 中 我们可以看到 启动命令是start
在这里插入图片描述
我们直接终端执行

npm run start

在这里插入图片描述
然后 浏览器端 也正常起来了
在这里插入图片描述
但这个不得不承认 Ts项目的编译速度 会比ES项目会稍微慢一些

http://www.lryc.cn/news/128334.html

相关文章:

  • Java课题笔记~ 数据提交的方式
  • VUE3给页面添加按钮事件
  • 基于centos7.9通过nginx实现负载均衡以及反向代理
  • 前端原生写自定义旋转变换轮播图
  • linux tomcat server.xml 项目访问路径变更不生效
  • 介绍原型模式:快速构建和复制对象的设计模式
  • Unity的TimeScale的影响范围分析
  • 爬虫逆向实战(五)--猿人学第三题
  • [虚幻引擎] UE使用虚拟纹理在模型上显示挖空效果
  • vue3中reactive和ref的比较
  • Beats:使用 Filebeat 将 golang 应用程序记录到 Elasticsearch - 8.x
  • 【STM32+ESP8266上云连载①】给ESP8266烧录AT固件
  • 深入解析Spring基本概念和核心思想
  • Redis数据结构——快速列表quicklist、快表
  • excel统计函数篇3之rank系列
  • Flink 火焰图
  • kubectl get 中英文对照
  • R语言APSIM模型进阶应用与参数优化、批量模拟实践技术
  • 无涯教程-Perl - times函数
  • 《计算机网络:自顶向下方法》第五章--网络层:控制平面
  • Mysql存储引擎中InnoDB与Myisam的主要区别
  • 数据仓库 ODS->DWD->DWS->ADS
  • 【SpringBoot】SpringBoot获取不到用户真实IP怎么办
  • LightDB 23.3 plorasql 函数支持inout参数输出
  • SpringBoot第41讲:SpringBoot集成Redis - 基于RedisTemplate+Jedis的数据操作
  • 用 React+ts 实现无缝滚动的走马灯
  • 三维模型OSGB格式轻量化重难点分析
  • C#__事件event的简单使用:工具人下楼问题
  • 初识Spring-ioc
  • windows10 安装WSL2, Ubuntu,docker