创建一个 React+Typescript 项目

news2024/11/26 5:51:59

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

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

npx create-react-app tsreapp --template typescript

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

npm run start

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/875913.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Java】2021 RoboCom 机器人开发者大赛-高职组(复赛)题解

7-8 人工智能打招呼 号称具有人工智能的机器人,至少应该能分辨出新人和老朋友,所以打招呼的时候应该能有所区别。本题就请你为这个人工智能机器人实现这个功能:当它遇到陌生人的时候,会说:“Hello X, how are you?”其…

终端里执行qtcreator命令报错xcb

使用rpm 安装libxkbcommon-x11-0.8.4-3.ky10.x86_64.rpm包

新能源充电桩运营管理平台解决方案含开源代码

标准化产品 、 快速接入 、 自主可控 、 安全合规 、 互联互通 √快速接入通过数据交互协议实现业务交互,提供专业的协议开发文档及Demo代码,助力桩企快速实现适配及开发工作。 √标准化产品通过私有化部署帮助企业快速构建自主可控的充电桩运营管理平台…

后院失火、持续亏损!Mobileye半年报「不回避」竞争压力

"客户在2023年上半年非常谨慎,导致增长率低于正常水平,但我们已经看到下半年回暖趋势,预计下半年交付将比去年同期增长16%,远高于上半年。"这是Mobileye在近日公司半年报发布会上的预判。 公开数据显示,今年…

好用的免费音频转换器大揭秘

你是否曾经遇到过这样的情况:你有一首喜欢的歌曲或者音频文件,但是你的播放器或设备不支持该文件格式?这时候,你需要一款好用的音频格式转换器来帮助你。说到这,你可能会问,“我都不知道免费的音频格式转换…

Java 中的强引用、弱引用、软引用和虚引用

一、继承结构 1.1 四大引用的继承关系 在 Java 中一共有四种引用类型,分别是强引用、弱引用、软引用和虚引用,其中,我们常用的是强引用,而其他三种引用都需要引入特定的 java.lang.ref 才能使用,他们的继承结构如下…

干货分享:制作婚礼请柬的技巧,从零基础起步

在现代社会,婚礼请柬已经成为了婚礼必备的一部分。而如何制作一个个性化的婚礼请柬呢?今天,我们将分享一个简便而可靠的制作方法,那就是使用乔拓云平台。 乔拓云平台是一个可靠的第三方制作工具,提供了丰富的H5模板&am…

教你如何为博客网站申请阿里云的免费域名HTTPS证书

如何为博客网站申请阿里云的免费域名HTTPS证书 文章目录 如何为博客网站申请阿里云的免费域名HTTPS证书前置条件:步骤1 例如阿里云控制台,选择SSL证书步骤2 申请购买免费证书步骤3 创建证书步骤3.1 证书申请步骤3.2 DNS域名验证 步骤4 等待证书审核成功&…

徐明君:品牌定位塑造独特价值与关键差异的新思维

在当今竞争激烈的市场环境中,品牌定位已成为企业生存与发展的关键要素。近年来,随着消费者需求的不断变化和市场的持续发展,品牌定位的内涵和方法也在不断演进。本文将探讨品牌定位的核心概念、作用以及如何有效运用品牌定位策略,…

手把手指点用piwigo与cpolar结合共同搭建一个能分享的旅行相册网站

文章目录 前言1. 使用piwigo这款开源的图片管理软件2. 需要将piwigi网页复制到phpstudy3. “开始安装”进入自动安装程序4. 创建新相册5. 创建一条空白数据隧道6.将cpolar云端保留的空白数据隧道与本地piwigo网页关联起来总结 前言 每逢节假日到各处去旅行,到不同的…

Nuxt.js快速上手

Nuxt.js快速上手 Nuxt.js快速上手1、为什么用nuxtvue-cli本身问题预渲染服务端渲染(通过SSR)项目解决seo的方案选择 2、Nuxt安装和使用Nuxt安装和使用nuxt安装和目录结构nuxt生命周期nuxt路由nuxt导航守卫nuxt Vuex状态树 3、Nuxt配置项nuxt配置之headnuxt配置之cssnuxt配置之p…

如何有效开展网络安全事件调查工作

网络安全事件调查是现代企业网络安全体系建设的关键组成部分。为了防止网络攻击,仅仅关注于安全工具的应用效果远远不够,因为安全事件一直都在发生。安全团队只有充分了解攻击者的行踪和攻击路径,才能更好地防范更多攻击时间的发生。 做好网…

Ffmpeg分布式视频转码问题总结

云原生分布式转码 在计算资源招之即来的云计算时代,正在重构着软件架构的方方面面。 对软件架构师或者运维管理者影响比较大的一个点便是不需要在做容量规划,不需要提前评估为了应对某个活动应该准备多少台机器,这个特点也深刻影响软件架构的…

航顺HK32F030M怎么样 航顺HK32F030M应用领域介绍

航顺HK32F030M是一款基于ARM Cortex-M0内核的32位微控制器,具有高性能、低功耗、经济适用等特点。以下是颖特新关于航顺HK32F030M的详细介绍: 一、性能表现 航顺HK32F030M采用ARM Cortex-M0内核,主频最高可达64MHz,具有出色的计算…

操作系统-笔记-第一章

目录 一、第一章——操作系统的概念 1、操作系统的概念、功能 (1)层次 (2)总结 2、操作系统的特征(4个) (1)并发与并行 (2)共享与互斥 (3…

vite创建打包预览Vue3流程

本文章只是走了一下创建》运行》打包》预览打包效果的流程步骤,不包含创建后配置vue3项目和打包优化等。 1.使用vite创建vue3项目 创建项目命令: npm init vitelatest写完项目名称后回车 键盘上下键选择Vue构建 根据项目需求选择ts还是js 创建完成 根…

在docker中安装nacos,很详细

在docker中安装nacos,很详细 一、安装docker二、拉取nacos镜像1、查看有那些nacos镜像2、获取最新版本镜像3、获取指定版本的镜像4、查看本地镜像5、删除镜像 三、创建挂载目录1、创建nacos配置文件挂载目录2、创建nacos日志文件挂载目录3、创建nacos数据文件挂载目…

大数据分析案例-基于KMeans和DBSCAN算法对汽车行业客户进行聚类分群

🤵‍♂️ 个人主页:艾派森的个人主页 ✍🏻作者简介:Python学习者 🐋 希望大家多多支持,我们一起进步!😄 如果文章对你有帮助的话, 欢迎评论 💬点赞&#x1f4…

W6100-EVB-PICO 做UDP Server进行数据回环测试(七)

前言 前面我们用W6100-EVB-PICO 开发板在TCP Client和TCP Server模式下,分别进行数据回环测试,本章我们将用开发板在UDP Server模式下进行数据回环测试。 UDP是什么?什么是UDP Server?能干什么? UDP (User Dataqram P…

安全问题「一锅端」,数据安全风险评估落地实践

数据安全风险评估是《数据安全法》明确的数据安全基础制度之一,也是重要数据处理者应尽的数据安全保护义务。今年5月,《网络安全标准实践指南—网络数据安全风险评估实施指引》发布,作为数据安全领域的一项重磅级指引,明确提出了网…