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

创建一个 React+Typescript 项目

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

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

npx create-react-app tsreapp --template typescript

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

npm run start

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

相关文章:

创建一个 React+Typescript 项目

接下来 我们来一起探索一下用TypeScript 来编写react 这也是一个非常好的趋势,目前也非常多人使用 那么 我们就先从创建项目开始 首先 我们先找一个 或者 之前创建一个目录 用来放我们的项目 然后 在这个目录下直接输入 例如 这里 我想创建一个叫 tsReApp 的项目…...

Java课题笔记~ 数据提交的方式

前四种数据注入的方式,会自动进行类型转换。但无法自动转换日期类型。 (1)单个数据(基本数据类型)注入 在方法中声明一个和表单提交的参数名称相同的参数,由框架按照名称直接注入。 (2&#x…...

VUE3给页面添加按钮事件

在Vue 3中&#xff0c;可以通过使用setup函数来添加事件和自定义逻辑。下面是一个示例代码&#xff0c;演示了如何添加页面上的altb事件 <template><div><p>Press Alt B to trigger the event!</p></div> </template><script setup&g…...

基于centos7.9通过nginx实现负载均衡以及反向代理

摘要&#xff1a;负载均衡&#xff1a; 负载均衡是一种技术&#xff0c;用于在多个服务器之间分发传入的网络流量&#xff0c;以平衡服务器的负载&#xff0c;提高系统的可用性和性能。当您有多台服务器时&#xff0c;您可以使用负载均衡将请求分发到这些服务器上&#xff0c;从…...

前端原生写自定义旋转变换轮播图

html部分&#xff1a; <div class"banner_box"><div class"swiperWrapper" v-show"bannerList.length>0"><div class"swiper-item" :id"swiperSlide${index}" :class"{active:index0,next:index1,pr…...

linux tomcat server.xml 项目访问路径变更不生效

如果想改成默认的127.0.0.1:8080 访问项目 先确定更改的作用文件 server.xml 的 host:appBase 标签 默认找到appBase webapps 下的war包&#xff0c;并解压&#xff0c;解压后的appname为访问路径 也就变成了 127.0.0.1:8080/appname host:Context:path 标签 appBase的 优先…...

介绍原型模式:快速构建和复制对象的设计模式

经过瀑布模式之后&#xff0c;我们不禁想要用模型解决更多的问题&#xff0c;最重要的就是不再单向行径。 由此&#xff0c;介绍 原型模式&#xff0c; 所谓原型&#xff0c;就是我们有一个框架或者初始角色。我们可以根据项目的不同&#xff0c;对它进行不同的修改&#xff0…...

Unity的TimeScale的影响范围分析

大家好&#xff0c;我是阿赵。 这期来说一下Unity的TimeScale。 一、前言 Unity提供了Time这个类&#xff0c;来控制时间。其实我自己倒是很少使用这个Time&#xff0c;因为做网络同步的游戏&#xff0c;一般是需要同步服务器时间&#xff0c;所以我比较多是在使用System.Date…...

爬虫逆向实战(五)--猿人学第三题

一、数据接口分析 主页地址&#xff1a;猿人学第三题 1、抓包 通过抓包可以发现数据接口是api/match/3 2、判断是否有加密参数 请求参数是否加密&#xff1f; 无请求头是否加密&#xff1f; 无响应是否加密&#xff1f; 无cookie是否加密&#xff1f; 无 二、发送请求 …...

[虚幻引擎] UE使用虚拟纹理在模型上显示挖空效果

此教程是记录如在UE中使用虚拟纹理&#xff0c;实现模型挖洞的效果。 1. 新建项目&#xff0c;开启项目支持虚拟纹理并并重启。 2. 新建一个基础关卡 3. 拖动“运行时虚拟纹理体积” 进入场景&#xff0c;并把体积修改变大&#xff0c;以可以完全包括到地板。 4. 创建一个虚拟纹…...

vue3中reactive和ref的比较

1.reactive和ref函数的共同作用是什么&#xff1f; 用函数调用的方式生成响应式数据 2. reactive vs ref? 1.reactive不能处理简单类型的数据 2.ref参数类型支持更好但是必须通过.value访问修改 3.ref函数的内部实现依赖于reactive函数 3. 在实际工作中推荐使用哪个? …...

Beats:使用 Filebeat 将 golang 应用程序记录到 Elasticsearch - 8.x

毫无疑问&#xff0c;日志记录是任何应用程序最重要的方面之一。 当事情出错时&#xff08;而且确实会出错&#xff09;&#xff0c;我们需要知道发生了什么。 为了实现这一目标&#xff0c;我们可以设置 Filebeat 从我们的 golang 应用程序收集日志&#xff0c;然后将它们发送…...

【STM32+ESP8266上云连载①】给ESP8266烧录AT固件

文章目录 一、给NodeMCU烧录固件1.1硬件准备1.2软件准备1.3AT固件下载1.4配置设置1.5开始烧录 二、给ESP8266-01S烧录固件2.1硬件准备2.2AT固件下载2.3连线2.4烧录配置 三、给ESP-12E/F/S单片烧录固件四、指令测试4.1HTTP测试4.2MQTT测试 我在使用ESP8266的时候遇到了一些问题&…...

深入解析Spring基本概念和核心思想

文章目录 基本概念IoCIoc容器IoC理解IoC的步骤Spring中使用ioc的步骤 AopAop的理解Aop的步骤 控制反转谁控制谁? 控制什么?为何叫反转(对应于正向)?哪些方面反转了?为何需要反转? 依赖什么是依赖(按名称理解、按动词理解)? 谁依赖于谁? 为什么需要依赖? 依赖什么东西?…...

Redis数据结构——快速列表quicklist、快表

定义 Redis中的数据结构&#xff0c;链表和压缩列表这两种数据结构是列表对象的底层实现方式。 当时考虑到链表的附加空间太大&#xff0c;节点的内存都是单独分配的&#xff0c;还会导致内存碎片化问题严重。 因此从Redis3.2开始&#xff0c;对列表的底层数据结构进行了改造&…...

excel统计函数篇3之rank系列

下面这三个函数都是返回指定数据在指定范围中的数据中的名次 1、RANK(number,ref,[order]):返回一列数字的数字排位&#xff08;数字排位是相对于列表中其他值的大小&#xff09; rank(数字&#xff0c;数字序列&#xff0c;升序/降序) – 数字在数字序列中的名次 2、RANK.AV…...

Flink 火焰图

方式一 使用 Flink Web UI 的 Flame Graph Flink 自己也支持了 Task 粒度的 Flame Graphs 功能&#xff0c;并且可以细化到 subtask 粒度。 第一步&#xff1a;配置启用功能 Flink 作业动态参数里增加配置&#xff1a;“rest.flamegraph.enabled”: “true” 并重启作业。当前…...

kubectl get 中英文对照

wlzx059node01:~$ kubectl get --help Display one or many resources. (显示一个或多个资源。)Prints a table of the most important information about the specified resources. You can filter the list using a label selector and the --selector flag. If the desired …...

R语言APSIM模型进阶应用与参数优化、批量模拟实践技术

随着数字农业和智慧农业的发展&#xff0c;基于过程的农业生产系统模型在模拟作物对气候变化的响应与适应、农田管理优化、作物品种和株型筛选、农田固碳和温室气体排放等领域扮演着越来越重要的作用。APSIM (Agricultural Production Systems sIMulator)模型是世界知名的作物生…...

无涯教程-Perl - times函数

描述 此函数返回一个四元素列表,为当前进程及其子进程提供用户,系统,子进程和子系统时间。 语法 以下是此函数的简单语法- times返回值 此函数返回ARRAY,($usertime,$systemtime,$childsystem,$childuser) 例 以下是显示其基本用法的示例代码- #!/usr/bin/perl -w($use…...

弯腰系鞋带:动作虽细微,脊柱 “被折得濒临损伤”!

频繁弯腰系鞋带、捡拾地面物品、整理鞋盒、照顾幼儿&#xff0c;颈腰椎损伤风险显著。弯腰时腰椎瞬间弯曲&#xff0c;椎间盘承受压力骤增&#xff1b;单腿站立弯腰时&#xff0c;身体平衡依赖腰部肌肉&#xff0c;受力不均易导致拉伤&#xff1b;反复弯腰起身动作&#xff0c;…...

2026年6月PMP考试:70天冲刺,这5个“备考误区”正在偷偷浪费你的时间

大家好&#xff0c;我是老陈。 今天这篇&#xff0c;我不想再写什么“每天学几小时、刷多少题”了。 前面写了好几篇&#xff0c;该说的都说了。今天咱们换个角度&#xff0c;聊聊那些看似正确、实则坑人的备考误区。 为什么聊这个&#xff1f;因为我发现一个规律&#xff1…...

Granite TimeSeries FlowState R1 模型效果深度评测:与传统统计方法的对比

Granite TimeSeries FlowState R1 模型效果深度评测&#xff1a;与传统统计方法的对比 时间序列预测这事儿&#xff0c;听起来挺专业&#xff0c;其实离我们生活很近。比如&#xff0c;电商平台要预测下个月的销售额&#xff0c;电力公司要预估明天的用电负荷&#xff0c;甚至…...

从零到一:OpCore-Simplify如何让黑苹果配置变得如此简单?

从零到一&#xff1a;OpCore-Simplify如何让黑苹果配置变得如此简单&#xff1f; 【免费下载链接】OpCore-Simplify A tool designed to simplify the creation of OpenCore EFI 项目地址: https://gitcode.com/GitHub_Trending/op/OpCore-Simplify 还在为复杂的OpenCor…...

OpenClaw+GLM-4.7-Flash智能书签:自动归档网页内容

OpenClawGLM-4.7-Flash智能书签&#xff1a;自动归档网页内容 1. 为什么需要智能书签管理 作为一个每天需要浏览大量技术文档和行业资讯的开发者&#xff0c;我发现自己陷入了"收藏即遗忘"的困境。Chrome书签栏里堆满了未分类的链接&#xff0c;Evernote里塞着杂乱…...

教育软件控制突破:JiYuTrainer的内核级反控制解决方案

教育软件控制突破&#xff1a;JiYuTrainer的内核级反控制解决方案 【免费下载链接】JiYuTrainer 极域电子教室防控制软件, StudenMain.exe 破解 项目地址: https://gitcode.com/gh_mirrors/ji/JiYuTrainer 副标题&#xff1a;技术原理、实现路径与教育场景应用指南 一、…...

有关数组的学习

数组的概念简介数组是编程中最基础也最常用的数据结构之一&#xff0c;理解它能帮你高效管理一组同类型的数据。1. 什么是数组&#xff1f;核心概念同类型&#xff1a;数组里的所有元素必须是相同的数据类型&#xff08;如全是 int 或全是 float&#xff09;。连续内存&#xf…...

模型微调加持:百川2-13B+OpenClaw定制化个人助手实践

模型微调加持&#xff1a;百川2-13BOpenClaw定制化个人助手实践 1. 为什么需要定制化个人助手&#xff1f; 去年我尝试用现成大模型搭建自动化助手时&#xff0c;发现一个尴尬现象&#xff1a;当我让AI帮我整理会议纪要时&#xff0c;它总把技术术语解释得像科普读物&#xf…...

旧Mac升级终极指南:用OpenCore Legacy Patcher解锁新系统完整方案

旧Mac升级终极指南&#xff1a;用OpenCore Legacy Patcher解锁新系统完整方案 【免费下载链接】OpenCore-Legacy-Patcher 体验与之前一样的macOS 项目地址: https://gitcode.com/GitHub_Trending/op/OpenCore-Legacy-Patcher 当你的老款Mac提示"此设备不支持最新ma…...

OpenClaw性能对比:GLM-4.7-Flash与其他模型实测数据

OpenClaw性能对比&#xff1a;GLM-4.7-Flash与其他模型实测数据 1. 测试背景与实验设计 最近在优化个人自动化工作流时&#xff0c;我注意到OpenClaw对不同大模型的表现差异显著。特别是当任务链较长时&#xff0c;模型响应速度和稳定性直接影响最终效果。本次测试聚焦于GLM-…...