创建一个 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.mzph.cn/news/36853.shtml

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

相关文章

面向对象设计与分析40讲(20)消息驱动编程和事件驱动编程模型

文章目录 消息驱动编程事件驱动编程消息驱动和事件驱动的区别 消息驱动编程 消息驱动是一种编程模型,它基于事件和消息的传递来驱动程序的执行流程。在消息驱动的模型中,系统中的各个组件(或对象)通过发送和接收消息进行通信和协…

matplotlib绘制位置-时序甘特图

文章目录 1 前言2 知识点2.1 matplotlib.pyplot.barh2.2 matplotlib.legend的handles参数 3 代码实现4 绘制效果5 总结参考 1 前言 这篇文章的目的是,总结记录一次使用matplotlib绘制时序甘特图的经历。之所以要绘制这个时序甘特图,是因为22年数模研赛C…

【IDEA问题】下载不了源代码

引出问题 最近不知道怎么打开 IDEA,本想查看源代码,然后点击下载源码,总是报找不到此对象的源代码。百度找了半天,GPT问了半天还是解决不了,直到遇到了这篇:idea中无法下载源码问题解决,终于得…

取证--实操

2022年美亚杯个人赛 运用软件DB Browser for SQLite (一款用于查看SQLlite数据库文件的浏览器工具) 火眼,盘古石手机取证系统等 案件详情 于2022年10月,有市民因接获伪冒快递公司的电邮,不慎地于匪徒架设的假网站提…

网络安全 Day31-运维安全项目-容器架构下

容器架构下 6. Dockerfile6.1 Docker自动化DIY镜像之Dockerfile1) 环境准备2) 书写Dockerfile内容3) 运行Dockerfile生成镜像4) 运行容器5) 小结 6.2 案例14:Dockerfile-RUN指令1) 书写Dockerfile2) 构建镜像3) 启动容器4) 测试结果 6.3 Dockerfile指令 …

AI 绘画Stable Diffusion 研究(七) 一文读懂 Stable Diffusion 工作原理

大家好,我是风雨无阻。 本文适合人群: 想要了解AI绘图基本原理的朋友。 对Stable Diffusion AI绘图感兴趣的朋友。 本期内容: Stable Diffusion 能做什么 什么是扩散模型 扩散模型实现原理 Stable Diffusion 潜扩散模型 Stable Diffu…

【量化课程】02_4.数理统计的基本概念

2.4_数理统计的基本概念 数理统计思维导图 更多详细内容见notebook 1.基本概念 总体:研究对象的全体,它是一个随机变量,用 X X X表示。 个体:组成总体的每个基本元素。 简单随机样本:来自总体 X X X的 n n n个相互…

【leetcode】【图解】617. 合并二叉树

题目 难度:简单 给你两棵二叉树: root1 和 root2 。 想象一下,当你将其中一棵覆盖到另一棵之上时,两棵树上的一些节点将会重叠(而另一些不会)。你需要将这两棵树合并成一棵新二叉树。合并的规则是&#xf…

Python web实战之Django的AJAX支持详解

关键词:Web开发、Django、AJAX、前端交互、动态网页 今天和大家分享Django的AJAX支持。AJAX可实现在网页上动态加载内容、无刷新更新数据的需求。 1. AJAX简介 AJAX(Asynchronous JavaScript and XML)是一种在网页上实现异步通信的技术。通过…

一百五十四、Kettle——Linux上安装Kettle9.3(踩坑,亲测有效,附截图)

一、目的 由于kettle8.2在Linux上安装后,共享资源库创建遇到一系列问题,所以就换成kettle9.3 二、kettle版本以及安装包网盘链接 kettle9.3.0安装包网盘链接 链接:https://pan.baidu.com/s/1MS8QBhv9ukpqlVQKEMMHQA?pwddqm0 提取码&…

解决电脑声音正常但就是某些游戏没声音问题

电脑声音正常,玩普遍游戏也正常,就有游戏不出声音 详细介绍经过,不喜欢的请直接跳 第三部分。 一、先说下起因现象。 1 大富翁11 没声音。 前段时间无聊怀旧就买了个大富翁11玩玩,近二十年前的老台式机正常无问题。后来想在性能…

Java多线程编程:实现并发处理的高效利器

Java多线程编程:实现并发处理的高效利器 作者:Stevedash 发表于:2023年8月13日 20点45分 来源:Java 多线程编程 | 菜鸟教程 (runoob.com) ​ 在计算机领域,多线程编程是一项重要的技术,可以使程序同时执…

从小白到大神之路之学习运维第79天-------Kubernetes网络组件详解

第四阶段 时 间:2023年8月14日 参加人:全班人员 内 容: Kubernetes网络组件详解 目录 一、Kubernetes网络组件 (一)Flannel网络组件 (二)Calico 网络插件 (1)…

设计模式——建造者(Builder)模式

建造者模式(Builder Pattern),又叫生成器模式,是一种对象构建模式 它可以将复杂对象的建造过程抽象出来,使这个抽象过程的不同实现方法可以构造出不同表现的对象。建造者模式是一步一步创建一个复杂的对象,…

在单元测试中使用Jest模拟VS Code extension API

对VS Code extension进行单元测试时通常会遇到一个问题,代码中所使用的VS Code编辑器的功能都依赖于vscode库,但是我们在单元测试中并没有添加对vscode库的依赖,所以导致运行单元测试时出错。由于vscode库是作为第三方依赖被引入到我们的VS C…

[oneAPI] BERT

[oneAPI] BERT BERT训练过程Masked Language Model(MLM)Next Sentence Prediction(NSP)微调 总结基于oneAPI代码 比赛:https://marketing.csdn.net/p/f3e44fbfe46c465f4d9d6c23e38e0517 Intel DevCloud for oneAPI&…

React源码解析18(4)------ completeWork的工作流程【mount】

摘要 经过上一章,我们得到的FilberNode已经具有了child和return属性。一颗Filber树的结构已经展现出来了。 那我们最终是想在页面渲染真实的DOM。所以我们现在要在completeWork里,构建出一颗离屏的DOM树。 之前在说FilberNode的属性时,我们…

zabbix案例--zabbix监控Tomcat

目录 一、 部署tomcat 二、配置zabbix-java-gateway 三、配置zabbix-server 四、配置zabbix-web界面 一、 部署tomcat tar xf apache-tomcat-8.5.16.tar.gz -C /usr/local/ ln -sv /usr/local/apache-tomcat-8.5.16/ /usr/local/tomcat cd /usr/local/tomcat/bin开启JMX…

Vscode 常用操作教程

一、语言换成中文 这是我们可以直接点击左边栏第四个图标搜索插件 chinese ,也可以直接ctrlshiftp快捷键也会出来如图所示图标,出来chinese 插件之后选择安装install,安装完成之后重新ctrlshiftp会出现如图所示页面 找到我的鼠标在的地方对应的中文,此时…

win10下如何安装ffmpeg

安装ffmpeg之前先安装win10 绿色软件管理软件:scoop. Scoop的基本介绍 Scoop是一款适用于Windows平台的命令行软件(包)管理工具,这里是Github介绍页。简单来说,就是可以通过命令行工具(PowerShell、CMD等…