创建一个 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.rhkb.cn/news/90769.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

docker部署springboot

基础知识 什么是docker 官网: Docker Docs: How to build, share, and run applications | Docker Documentation Docker 是一个基于go语言开发的开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到…

指针---进阶篇(二)

指针---进阶篇(二) 前言一、函数指针1.抛砖引玉2.如何判断函数指针?(方法总结) 二、函数指针数组1.什么是函数指针数组?2.讲解函数指针数组3.模拟计算器:讲解函数指针数组 三、指向函数指针数组…

组态王-实现语音播报告警点位信息及语音通知-语音播报器|声光报警器|工业报警方案|语音报警器|工业报警器|语音播报模块

需求简介 本文将介绍组态王如何对产生的告警实现声光语音播报,根据不同的告警点位,朗读具体的告警内容。 本文使用大连英仕博科技有限公司生产的博灵语音通知终端A4与北京亚控开发的组态王进行联动。 本文章分2部分讲解 第一部分为demo调用演示第二部…

调试 SELinux

semanage port -a -t http_port_t -p tcp 82 题目: 非标准端口 82 上运行的 WEB 服务器在提供内容时遇到问题。根据需要调试并解决问题, 并使其满足以下条件: 系统上的 web 服务器能够提供/var/www/html 中所有现在有的 html 文件&#xff…

无涯教程-Perl - getpwnam函数

描述 此函数基于EXPR指定的用户名,从/etc/passwd文件提取的列表context中返回字段列表。通常这样使用- ($name,$passwd,$uid,$gid,$quota,$comment,$gcos,$dir,$shell) getpwnam($user); 在标量context中,返回数字用户ID。如果尝试访问整个/etc/passwd文件,则应使用getpwent…

Python 3 使用Hadoop 3之MapReduce总结

MapReduce 运行原理 MapReduce简介 MapReduce是一种分布式计算模型,由Google提出,主要用于搜索领域,解决海量数据的计算问题。 MapReduce分成两个部分:Map(映射)和Reduce(归纳)。…

idea常见错误大全之:解决全局搜索失效+搜索条件失效(条件为空)+F8失灵

问题一:全局搜索快捷键ctrlshiftf 突然失灵了,键盘敲烂了 都没反应,这是为什么呢? 肯定不是idea本身的原因,那么就是其它外在因素影响到了idea的快捷键,那么其它的快捷键为什么没失效呢,原因只有…

IDEA简单拷贝一份新项目记录

IDEA简单拷贝项目记录 拷贝后改项目名,然后iml 配置文件改项目名,然后 .idea 中的compiler.xml 里面的name标签改项目名。 就可以了

ubuntu中安装python

最简单方便的是 apt 使用第三方的 ppa 源,然后直接 apt 安装 python3.9 安装 software-properties-common 获取add-apt-repository命令:apt install -y software-properties-common添加第三方的 ppa 源:add-apt-repository ppa:deadsnakes/p…

el-table分页后序号连续的两种方法

实现效果&#xff1a; 第一页排序到10&#xff0c;第二页的排序应从11开始 实现方法一&#xff1a; 在el-table的序号列中使用template定义 <el-table><el-table-columnmin-width"10%"label"序号"><template slot-scope"scope"…

平板选择什么电容笔比较好?ipad手写笔推荐品牌

在现在的生活上&#xff0c;有了iPad平板&#xff0c;一切都变得简单了许多&#xff0c;也让我们的学习以及工作都更加的便利。这其中&#xff0c;电容笔就起到了很大的作用&#xff0c;很多人都不知道&#xff0c;到底要买什么牌子的电容笔&#xff1f;哪些电容笔的性价比比较…

uniApp引入vant2

uniApp引入vant2 1、cnpm 下载&#xff1a;cnpm i vantlatest-v2 -S2、main.js文件引入 import Vant from ./node_modules/vant/lib/vant;Vue.use(Vant);3.app.vue中引入vant 样式文件 import /node_modules/vant/lib/index.css;

静态网页和动态网页区别

1&#xff0c;静态网页和动态网页有何区别 1) 更新和维护 静态网页内容一经发布到网站服务器上&#xff0c;无论是否有用户访问&#xff0c;这些网页内容都是保存在网站服务器上的。如果要修改网页的内容&#xff0c;就必须修改其源文件&#xff0c;然后重新上传到服务器上。…

软考高级架构师下篇-11信息系统架构设计理论与实践

目录 1. 考情分析2. 基本概念3. 信息系统架构风格与分类4. 信息系统常用架构模型5. 企业信息系统总体框架6. 信息系统架构设计方法7. 前文回顾1. 考情分析 下半年软考要改成机考了,已经有几个省份确认了机考信息,虽然解决了论文手写不好修改的问题,但是考试的难度肯定加大了…

mysql 索引 区分字符大小写

mysql 建立索引&#xff0c;特别是unique索引&#xff0c;是跟字符集、字符排序规则有关的。 对于utf8mb4_0900_ai_ci来说&#xff0c;0900代表Unicode 9.0的规范&#xff0c;ai表示accent insensitivity&#xff0c;也就是“不区分音调”&#xff0c;而ci表示case insensitiv…

Unity 实现2D地面挖洞!涂抹地形(碰撞部分,方法二)

文章目录 前言一、初始化虚拟点1.1点结构:1.2每个点有的状态:1.3生成点结构: 二、实例化边缘碰撞盒2.1计算生成边缘碰撞盒 三、涂抹部分3.1.虚拟点3.2.鼠标点3.3.内圈3.4.外圈 四、关于优化结语: 前言 老规矩先上效果图 继上一篇涂抹地形文章讲解发出后&#xff0c;有不少网友…

文献综述|NLP领域后门攻击、检测与防御

前言&#xff1a;在信息安全中后门攻击&#xff08;Backdoor Attack&#xff09;是指绕过安全控制而获取对程序或系统访问权的方法。而随着深度学习以及各种神经网络模型的广泛应用&#xff0c;神经网络中存在的后门问题也引起了研究人员的广泛关注。神经网络后门攻击就是使网络…

机器学习深度学习——循环神经网络RNN

&#x1f468;‍&#x1f393;作者简介&#xff1a;一位即将上大四&#xff0c;正专攻机器学习的保研er &#x1f30c;上期文章&#xff1a;机器学习&&深度学习—语言模型和数据集 &#x1f4da;订阅专栏&#xff1a;机器学习&&深度学习 希望文章对你们有所帮助…

ASP.NET Core - 缓存之分布式缓存

分布式缓存是由多个应用服务器共享的缓存&#xff0c;通常作为访问它的应用服务器的外部服务进行维护。 分布式缓存可以提高 ASP.NET Core 应用的性能和可伸缩性&#xff0c;尤其是当应用由云服务或服务器场托管时。 与其他将缓存数据存储在单个应用服务器上的缓存方案相比&am…

如何保证数据传输的安全?

要确保数据传输的安全&#xff0c;您可以采取以下措施&#xff1a; 使用加密协议&#xff1a;使用安全的传输协议&#xff0c;如HTTPS(HTTP over SSL/TLS)或其他安全协议&#xff0c;以保护数据在传输过程中的安全性。加密协议可以有效防止数据被窃听或篡改。 强化身份验证&…