TypeScript + React 环境搭建

news2024/11/25 13:25:08

React

  • 安装 vscode 或者 webstrom 代码编辑器
  • TypeScript 开发环境搭建
    • 1.1、下载 node.js
    • 1.2、安装 node.js
    • 1.3、npm 安装 typeScript
    • 1.4、创建和编写 ts 文件
    • 1.5、编译
    • 1.6、运行 js文件
  • React 环境搭建
    • 2.1、homebrow
    • 2.2、安装 cnpm:
    • 2.3、安装yarn:
    • 2.4、安装创建React App脚手架
    • 2.5、搭建环境
      • 2.5.1、测试环境,非正式场合使用
      • 2.5.2、正式版本使用

安装 vscode 或者 webstrom 代码编辑器

https://code.visualstudio.com/

https://www.jetbrains.com/webstorm/

TypeScript 开发环境搭建

1.1、下载 node.js

https://nodejs.org/en

1.2、安装 node.js

一顿下一步,npm 也会直接安装上,现在的版本环境变量也无需自己配置

node -v
npm -v

检测是否安装成功。

1.3、npm 安装 typeScript

sudo npm install -g typescript

然后再检测是否安装成功

tsc -v

1.4、创建和编写 ts 文件

1.5、编译

当前目录编译,编译成JS代码

tsc ts文件.ts

1.6、运行 js文件

node 02_basis.js

React 环境搭建

2.1、homebrow

https://zhuanlan.zhihu.com/p/607620531

2.2、安装 cnpm:

npm install -g cnpm -registry=https://registry.npm.taobao.org

2.3、安装yarn:

cnpm install -g yarn

2.4、安装创建React App脚手架

为2.5.2准备

cnpm install -g create-react-app

实在不行使用:

npx create-react-app create-react-app 

https://blog.csdn.net/qq_28838891/article/details/124574626

2.5、搭建环境

2.5.1、测试环境,非正式场合使用

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>

</body>
</html>

2.5.2、正式版本使用

执行以下命令创建项目:
create-react-app my-app
cd my-app/
npm start

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

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

相关文章

[oeasy]python0074[专业选修]字节序_byte_order_struct_pack_大端序_小端序

进制转化 回忆上次内容 上次 总结了 计算字符串值的函数 eval 四种进制的转化函数 binoctinthex 函数名前缀目标字符串所用进制bin0b二进制oct0o八进制hex0x十六进制eval无前缀十进制 数字41 和 字符串"41" 的不同 字符串"41" 两个字符字符存储依据是…

部署ELK+Kafka+Filebeat日志收集分析系统

部署ELKKafkaFilebeat日志收集分析系统 文章目录 部署ELKKafkaFilebeat日志收集分析系统一、ELK 简介1、ELK日志分析系统组成2、Elasticsearch&#xff08;es&#xff09;3、Logstash4、Kibana5、日志处理步骤 二、Elasticsearch介绍1、Elasticsearch核心概念2、开启分片副本的…

AcWing 244. 谜一样的牛—树状数组、二分

题目链接 AcWing 244. 谜一样的牛 题目描述 分析 这道题挺巧妙的&#xff0c;感觉树状数组方面的题就是比较难想&#xff0c;先分析一下样例&#xff0c;样例中每头牛前面比自己低的牛的数量分别为 0 1 2 1 0牛的高度是1~n的排列&#xff0c;如何分析出每头牛的高度呢&…

Linux学习之if判断的使用

if的基本用法 if后边可以直接跟着命令。 echo "good" > ifecho.txt把good输出到当前目录下ifecho.txt文件里边&#xff0c;cat ifecho.txt首先可以看一下这个文件里边的内容。 然后依次输入&#xff1a; if cat ifecho.txt thenecho "right" fi可以看…

Windows系统实现唤醒+合成+命令词智能语音交互

1、之前写过离线能力调用&#xff0c;今天来个终极版&#xff0c;实现智能交互或者结合大模型的智能交互示例&#xff0c;下面进入正题。上B站效果离线唤醒离线合成离线命令词实现智能交互_哔哩哔哩_bilibili 2、到讯飞开放平台下载唤醒合成命令词的离线组合包&#xff0c;找到…

关于正则表达式的简单介绍以及使用

一、介绍 正则表达式通常被用来检索匹配某种模式&#xff08;规律&#xff09;的文本 日常文本检索&#xff0c;如果单纯检索某个数字&#xff0c;字母&#xff0c;或者单词匹配出来的结果较多&#xff0c;而面对目标文件内容较大的时&#xff0c;我们也不可能肉眼对检索出来的…

Kotlin 新版本 1.9.0重要更新预览

释放 Kotlin 新版本 1.9.0 的强大功能 1. Kotlin K2编译器用于多平台 对K2编译器进行了进一步的改进&#xff0c;使其更加稳定。K2编译器针对JVM目标现已进入Beta版本&#xff0c;并且也可以在多平台项目中使用。 您可以通过将K2配置添加到项目的gradle.properties中&#x…

pytest-allure 生成测试报告

目录 前言&#xff1a; pytest 中 yield 和 return 的区别和相同点 共同点 区别 usefixtures 与传 fixture 区别 Pytest 常用的插件 一键安装多个模块 前言&#xff1a; 在软件测试中&#xff0c;生成清晰、易读的测试报告是非常重要的。pytest-allure是一个流行的测试…

centos逻辑分区磁盘扩展

最近碰到服务器磁盘空间不足&#xff0c;需要扩展逻辑分区的需求&#xff0c;特地做下小笔记&#xff0c;方便后续自己回忆。下图是磁盘的相关概念示意图&#xff1a; 1、查看磁盘空间 [rootlocalhost ~]# df -h #查看磁盘空间&#xff0c;根分区的大小是18G&#xff0c;已经用…

微服务——Eureka和Nacos

目录 提供者和消费者 ​编辑 Eureka注册中心——远程调用的问题 Eureka注册中心——原理分析 Eureka注册中心——搭建eureka服务 步骤: Eureka注册中心——服务注册 Eureka注册中心——服务发现 总结 Ribbon负载均衡——原理 流程: Ribbon负载均衡——策略 Ribbon负载均衡—…

ChatGPT:人工智能语言模型的革命性进步

&#x1f337;&#x1f341; 博主 libin9iOak带您 Go to New World.✨&#x1f341; &#x1f984; 个人主页——libin9iOak的博客&#x1f390; &#x1f433; 《面试题大全》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33…

idea中回退远程push过的提交(详细图文操作)

目录 git基本知识回顾git中本地文件保存的3个地方工作区暂存区本地仓库代码提交到远程仓库的流转 reset命令的3个参数softmixedhard 具体操作模拟两次提交远程分支回退到第一次提交第一次reset hard第二次reset soft/mixed git基本知识回顾 git中本地文件保存的3个地方 工作区…

CSS :nth-child

CSS :nth-child :nth-child 伪类根据元素在同级元素中的位置来匹配元素. CSS :nth-child 语法 值是关键词 odd/evenAnB最新的 [of S] 语法权重 浏览器兼容性 很简单的例子, 来直觉上理解这个伪类的意思 <ul><li class"me">Apple</li><li>B…

陪诊小程序搭建|陪诊接单平台开发|医疗陪诊小程序

陪诊小程序是一种提供陪同就诊服务的在线平台&#xff0c;具有广阔的发展前景。下面是对陪诊小程序发展前景的介绍&#xff1a;   随着社会的发展和人们生活水平的提高&#xff0c;人们对医疗服务的需求也越来越高。然而&#xff0c;由于工作繁忙、时间紧张等原因&#xff0c…

【C++】通过栈和队列学会使用适配器和优先队列学会仿函数的使用

&#x1f307;个人主页&#xff1a;平凡的小苏 &#x1f4da;学习格言&#xff1a;命运给你一个低的起点&#xff0c;是想看你精彩的翻盘&#xff0c;而不是让你自甘堕落&#xff0c;脚下的路虽然难走&#xff0c;但我还能走&#xff0c;比起向阳而生&#xff0c;我更想尝试逆风…

网络超时导致namenode被kill的定位

交换机升级导致部分网络通信超时, 集群的namenode主从切换后,主namenode进程被杀死。 网络问题导致namenode与zk间的连接超时触发了hadoop集群的防脑裂机制而主动kill掉了超时的namenode进程。 日志分析发现zk和namenode之间的网络连接超时: 超时触发了namenode切换,并将超时…

flex布局进阶

推荐看一下阮一峰老师的flex布局博客【Flex 布局教程&#xff1a;语法篇】(https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html#)&#xff0c;讲的非常清晰。 一、多行布局大小相同的子盒子技巧 使用弹性布局实现多行均匀布局时&#xff0c;如若子盒子数量不能被每行…

AI Chat 设计模式:9. 命令模式

本文是该系列的第九篇&#xff0c;采用问答式的方式展开&#xff0c;问题由我提出&#xff0c;答案由 Chat AI 作出&#xff0c;灰色背景的文字则主要是我的一些思考和补充。 问题列表 Q.1 介绍下命令模式A.1Q.2 详细说说命令模式适用于啥场景呢A.2Q.3 举一个命令模式的例子&a…

网络知识点之-BGP协议

边界网关协议&#xff08;BGP&#xff09;是运行于 TCP 上的一种自治系统的路由协议。 BGP 是唯一一个用来处理像因特网大小的网络的协议&#xff0c;也是唯一能够妥善处理好不相关路由域间的多路连接的协议。 BGP 构建在 EGP 的经验之上。 BGP 系统的主要功能是和其他的 BGP 系…

SQL 连接(JOIN)

SQL 连接&#xff08;JOIN&#xff09;是一种用于将两个或多个表中的数据相互匹配的操作&#xff0c;从而形成一个新的数据集合。JOIN 操作常用于查询和分析数据库中的数据&#xff0c;可以根据不同的连接方式返回不同的结果集。 SQL join 用于把来自两个或多个表的行结合起来…