如何创建一个react项目

文章目录

  • 前言
  • 前言
  • 打开小黑窗口
  • npm init vite
  • 后言

前言

hello world欢迎来到前端的新世界


😜当前文章系列专栏:react.js
🐱‍👓博主在前端领域还有很多知识和技术需要掌握,正在不断努力填补技术短板。(如果出现错误,感谢大家指出)🌹
💖感谢大家支持!您的观看就是作者创作的动力

前言

通过vite创建一个react18版本的+vite工具 + ts编译的一个项目

打开小黑窗口

在这里插入图片描述

进入

在这里插入图片描述

npm init vite

输入npm init vite

在这里插入图片描述

选择项目类型 这里我们选择react

  • Vanilla:是指纯粹的JavaScript,也就是原始的、未经任何框架或库封装的JavaScript代码。它是JavaScript的标准实现,是Web开发中最基础、最原始的形式。
  • Vue: 一款渐进式 JavaScript 框架,专注于构建用户界面。它易于学习、灵活且性能高效,在中小型单页应用开发中广泛应用。
  • React:由 Facebook 开发的 JavaScript 库,专注于构建大规模、高效的用户界面。它采用了组件化思想和虚拟 DOM 技术,为复杂应用提供了高度的可维护性和可扩展性,并被广泛应用于 Web 开发、移动端开发、电视端开发等领域。
  • Preact:一个快速、轻量级的 React 替代品,可提供同样的 API 和生态系统,但是更小、更快。
  • Lit:一个基于 Web Components 标准的 JavaScript 模板库,提供了类似 React 的组件化编程体验,同时通过使用原生 Web Components 标准实现了更好的性能和可重用性。
  • svelte:一种编写原生 Web 应用程序的新方法,将组件的构建工作从运行时转移到了编译时,从而提高了性能,并减少了运行时的开销。
  • Awik:一个轻量级依赖注入容器,适用于 Node.js 和浏览器。它可以帮助你将代码分离成可重用的、易于测试的模块,并降低了模块之间的耦合度。
  • Others:一个泛指,用于指代除了已经讨论过或明确提及的选项之外的其他事物、工具、框架、库或相关内容。

在这里插入图片描述

然后选择项目的语言类型
TypeScript(缩写为TS)是一种开源的编程语言,它是JavaScript的一个超集。TypeScript由微软公司开发并于2012年首次发布。它添加了静态类型、类、模块和其他一些面向对象编程的特性,以提供更强大的工具和语言支持。
ts+swc”:这表示使用"swc"工具来编译TypeScript代码。"swc"能够以更快的速度编译TypeScript代码,并生成与Babel兼容的输出。这样,开发人员可以利用"swc"提供的性能优势,同时使用TypeScript的静态类型检查和其他语言特性。
JavaScript(缩写为JS)是一种广泛用于Web开发的脚本语言。它是一种动态类型、高级的解释性语言,最初由Netscape公司在1995年推出。JavaScript主要用于在网页上实现交互性和动态功能,但也可以在其他环境中使用,如服务器端开发(Node.js)和移动应用开发(React Native)。
js+swc”:这表示使用"swc"工具来编译纯JavaScript代码。"swc"是一个快速且可配置的JavaScript编译器,它可以将现代JavaScript语法转换为支持更旧版本浏览器的代码。使用"swc"可以在不依赖于传统的Babel编译器的情况下,编译JavaScript代码。

在这里插入图片描述

这里选择ts

在这里插入图片描述

后言

创作不易,要是本文章对广大读者有那么一点点帮助 不妨三连支持一下,您的鼓励就是博主创作的动力

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

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

相关文章

84.在排序数组中查找元素的第一个和最后一个位置(力扣)

目录 问题描述 代码解决以及思想 知识点 问题描述 代码解决以及思想 class Solution { public:vector<int> searchRange(vector<int>& nums, int target) {int left 0; // 定义左边界int right nums.size() - 1; // 定义右…

uniapp原生插件之安卓获取设备唯一标识

插件介绍 安卓获取设备唯一标识&#xff0c;集成了获取imei&#xff0c;获取安卓ID&#xff0c;获取GUID&#xff0c;获取获取OAID/AAID等 插件地址 安卓获取设备唯一标识 - DCloud 插件市场 超级福利 uniapp 插件购买超级福利 详细使用文档 uniapp 安卓获取设备唯一标…

安防视频监控平台EasyCVR服务器需要开启firewalld防火墙,该如何开放端口?

智能视频监控/视频云存储/集中存储/视频汇聚平台EasyCVR具备视频融合汇聚能力&#xff0c;作为安防视频监控综合管理平台&#xff0c;它支持多协议接入、多格式视频流分发&#xff0c;视频监控综合管理平台EasyCVR支持海量视频汇聚管理&#xff0c;可应用在多样化的场景上&…

MacOS安装git

文章目录 通过Xcode Command Lines Tool安装(推荐)终端直接运行git命令根据流程安装先安装Command Lines Tool后再安装git 官网下载二进制文件进行安装官方国外源下载二进制文件(不推荐)国内镜像下载二进制文件(推荐)安装git 通过Xcode Command Lines Tool安装(推荐) 简单来讲C…

Ubuntu 20.04设置虚拟内存 (交换内存swap)解决内存不足

数据库服务器程序在运行起来之后&#xff0c;系统内存不足。 在系统监控中发现&#xff0c;当数据库服务程序启动后&#xff0c;占用了大量内存空间&#xff0c;导致系统的剩余的内存往往只有几十MB。 在ubuntu系统中&#xff0c;swap空间就是虚拟内存&#xff0c;所以考虑在磁…

图数据库Neo4j——Neo4j简介、数据结构 Docker版本的部署安装 Cypher语句的入门

前言 MySQL是一种开源的关系型数据库管理系统&#xff0c;使用SQL作为其查询语言&#xff0c;常见的关系型数据库有MySQL、Oracle、SQL Server、PostgreSQL等。相关博客文章如下&#xff1a; 【合集】MySQL的入门进阶强化——从 普通人 到 超级赛亚人 的 华丽转身PostgreSQL数…

hustoj在线判题平台详细搭建二开及美化过程(ubuntu20.04 / centos7.9)常见问题解决

服务器配置需求 阿里云 腾讯云 华为云均可&#xff0c;腾讯云目前是最合适的。 腾讯云 2H4G 5M 60GB 轻量应用服务器 承载大约 200~400人使用&#xff0c;经过压力测试&#xff0c;评测并发速度可满足130人左右的在线比赛。 镜像选Ubuntu22.04LTS&#xff0c;物理机安装Ubun…

Windows下多Chrome谷歌浏览器版本共存

场景 某些年代久远的 WEB 应用&#xff0c;必须在指定的浏览器或版本才能正常运行&#x1f602;&#xff0c;此时就需要多个版本 chrome 浏览器共存。 解决方案 下载指定版本 可以从 https://www.chromedownloads.net/ 下载需要的版本&#xff0c;此处下载的是87.0.4280.14…

分布式锁-Redis红锁解决方案

一 分布式锁的概念 1&#xff1a;概念 分布式锁&#xff08;多服务共享锁&#xff09; 在分布式的部署环境下&#xff0c;通过锁机制来让多客户端互斥的对共享资源进行访问控制分布式系统不同进程共同访问共享资源的一种锁的实现。如果不同的系统或同一个系统的不同主机之间共…

虹科资讯 | 10月智能制造行业动态回顾

文章来源&#xff1a;虹科工业控制 阅读原文&#xff1a;https://mp.weixin.qq.com/s/0jR_QgmR6tmrRoTFAo8mFw 10月&#xff0c;虹科与PLCopen合作开展IEC 61131-3培训&#xff0c;目前正在火热报名中&#xff1b;人工智能领域的迅猛发展引起了智能制造业的广泛关注&#xff…

都2023年了,不会还有人不会设计软件测试用例叭?不会吧不会吧

一、概念 测试用例的基本概念&#xff1a; 测试用例&#xff08;Test Case&#xff09;是为了实施测试而向被测试的系统提供的一组集合&#xff0c;这组集合包含&#xff1a;测试环境、操作步骤、测试数据、预期结果等要素 。 主要步骤&#xff1a; 测试环境——测试步骤—…

逻辑(css3)_强制不换行

需求 如上图做一个跑马灯数据&#xff0c;时间、地点、姓名、提示文本字数都不是固定的。 逻辑思想 个人想法是给四个文本均设置宽度&#xff0c;不然会出现不能左对齐的现象。 此时四个文本均左对齐&#xff0c; 垂直排列样式也比较好看&#xff0c;但是出现一个缺点&#…

激光雷达标定板提高自主驾驶功能的感知精度

激光雷达&#xff08;LiDAR&#xff09;是一种通过发射激光束并测量反射回来的时间来测量目标距离和形状的传感器。为了提高激光雷达的感知精度和稳定性&#xff0c;需要进行激光雷达标定&#xff0c;以确定其激光束的准确性和稳定性。 如果没有激光雷达&#xff0c;自动驾驶的…

【Git】Git暂存使用

当我们正常使用Git切换分支时&#xff0c;会出现以下提示&#xff08;请在切换分支之前提交您的更改或隐藏它们&#xff09;&#xff1a; Please commit your changes or stash them before you switch branches. 这是由于你现有分支上有修改还没有commit&#xff0c;而你又选择…

GPT与人类共生:解析AI助手的兴起

随着GPT模型的崭新应用&#xff0c;如百度的​1​和CSDN的​2​&#xff0c;以及AI助手的普及&#xff0c;人们开始讨论AI对就业市场和互联网公司的潜在影响。本文将探讨GPT和AI助手的共生关系&#xff0c;以及我们如何使用它们&#xff0c;以及使用的平台和动机。 GPT和AI助手…

2127. 参加会议的最多员工数 (困难,基环内向树,拓扑排序)

思路&#xff1a; 将每个员工作为节点&#xff0c;喜欢的关系作为边&#xff0c;显然是能够组成若干张连通图的&#xff0c;关键就在于如何理解一张图首先要证明&#xff1a;任何一个第一步构成的图必是一个有且仅有一个环的连通图&#xff08;如下面图片所示&#xff0c;也称…

【uniapp】JavaScript基础学习-20231027

今天有找到一个比较好的网站 https://www.w3school.com.cn/js/index.asp 介绍也全面&#xff0c;内容也比较多。我觉得把最基本的语法看看&#xff0c;然后可以上手写代码了。其他的就是需要靠长期的学习和积累了。 基础语法的使用&#xff1a; 1、定义一个变量 2、对变量赋值 …

电子沙盘数字沙盘地理信息开发教程第17课

M3DGIS电子沙盘数字沙盘地理信息开发教程第17课新增加属性在MTGIS3d控件 public bool ShowFLGrid;//是否显 示方里网格。 public bool Atmosphere;//是否显示大气圈。&#xff08;因为WPF不支持shader功能&#xff0c;所以效果嘛。。。&#xff09; 在SDK中提供底层的模型访问接…

如何选择合适的进口跨境商城源码?揭秘电商平台的成功之道

了解进口跨境电商平台源码的重要性 在进口跨境电商行业的兴起中&#xff0c;选择合适的商城源码是创业者成功的关键之一。进口跨境商城源码可提供网站架构、功能模块、支付系统、物流管理等基础构建&#xff0c;帮助企业快速搭建属于自己的商城平台。然而&#xff0c;在众多商城…

区块链-蚂蚁链(阿里系产品),至信链(腾讯系),长安链(国家队)

目录 区块链-蚂蚁链&#xff08;阿里系产品&#xff09;,至信链&#xff08;腾讯系&#xff09;,长安链&#xff08;国家队&#xff09; ①蚂蚁链&#xff08;阿里系产品&#xff09; ②至信链&#xff08;腾讯系&#xff09; ③长安链&#xff08;国家队&#xff09; Hyp…