如何创建一个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.hqwc.cn/news/156777.html

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

相关文章

【NLP】什么是语义搜索以及如何实现 [Python、BERT、Elasticsearch]

语义搜索是一种先进的信息检索技术,旨在通过理解搜索查询和搜索内容的上下文和含义来提高搜索结果的准确性和相关性。与依赖于匹配特定单词或短语的传统基于关键字的搜索不同,语义搜索会考虑查询的意图、上下文和语义。 语义搜索在搜索结果的精度和相关…

机器人入门(四)—— 创建你的第一个虚拟小车

机器人入门(四)—— 创建你的第一个虚拟小车 一、小车建立过程1.1 dd_robot.urdf —— 建立身体1.2 dd_robot2.urdf —— 添加轮子1.3 dd_robot3.urdf —— 添加万向轮1.4 dd_robot4.urdf —— 添加颜色1.5 dd_robot5.urdf —— 添加碰撞检测(Collision …

【机器学习可解释性】4.SHAP 值

机器学习可解释性 1.模型洞察的价值2.特征重要性排列3.部分依赖图4.SHAP 值5.SHAP值的高级使用 正文 理解各自特征的预测结果? 介绍 您已经看到(并使用)了从机器学习模型中提取一般解释技术。但是,如果你想要打破模型对单个预测的工作原理? SHAP 值…

Linux内核是如何创建进程?

目录 1.Linux如何创建进程 2.fork函数原理 2.1 fork函数原型 2.2 fork函数实现原理 2.3 父子进程虚拟地址空间(mm_struct)之间的关系 2.4 写时拷贝(copy-on-write)技术 2.5 父子进程如何共享文件(files_struct&…

Bootstrap

一、介绍 Bootstrap 是一个流行的开源前端框架,用于快速构建响应式和移动设备优先的网页。它由 Twitter 设计师和开发人员创建,提供了一套功能强大且易于使用的 CSS、JavaScript 组件和样式,可用于构建现代化的网站和应用程序。Bootstrap 是受…

图数据库Neo4j概念、应用场景、安装及CQL的使用

一、图数据库概念 引用Seth Godin的说法,企业需要摒弃仅仅收集数据点的做法,开始着手建立数据之间的关联关系。数据点之间的关系甚至比单个点本身更为重要。 传统的**关系数据库管理系统(RDBMS)**并不擅长处理数据之间的关系,那些表状数据模…

【Cocos新手进阶】使用cocos 的预制体创建动态的滚动框组件。

本篇文章主要讲解,使用cocos 游戏引擎制作动态生成的滚动框实例教程。 日期:2023年11月1日 作者:任聪聪 引擎版本:2.4.3 至 2.4.11 关于预制体的说明和概念 cocos中的预制体的作用是能够让你使用数据的形式进行控制界面的变化&am…

ubuntu配置 Conda 更改默认环境路径

我的需求是以后凡是新建一个虚拟环境都需要安装在一个挂载了大容量的分区/data里面 /home里面的是即将爆满但是还能塞点东西的硬盘. 如果您想要永久更改 Conda 的默认环境路径,可以编辑 Conda 的配置文件。首先,找到 Conda 的配置文件通常是 .condarc 文…

3201. 任务调度

有若干个任务需要在一台机器上运行。 它们之间没有依赖关系,因此可以被按照任意顺序执行。 该机器有两个 CPU 和一个 GPU。 对于每个任务,你可以为它分配不同的硬件资源: 在单个 CPU 上运行。在两个 CPU 上同时运行。在单个 CPU 和 GPU 上同时运行。在两…

LCD驱动程序——Framebuffer应用编程

1.LCD 操作原理 在 Linux 系统中通过 Framebuffer 驱动程序来控制 LCD。Frame 是帧的意思,buffer 是缓冲的意思,这意味着 Framebuffer 就是一块内存,里面保存着一帧图像。Framebuffer 中保存着一帧图像的每一个像素颜色值,假设 L…

Vue显示FFmpeg推的流

零、环境安装 小弟的另一篇文章: FFmpeg和rtsp服务器搭建视频直播流服务-CSDN博客 一、FFmpeg推流 1、拉取rtsp摄像头流 sudo ffmpeg -f v4l2 -input_format mjpeg -i /dev/video0 -c:v copy -f rtsp rtsp://10.168.3.196:8554/mystream2、推视频的rtmp流 sudo ffm…

智安网络|保护您的应用程序免受攻击:重要的安全强化措施

在今天的数字化时代,应用程序安全成为了企业和个人必须重视的重要领域。应用程序普遍存在的安全漏洞成为黑客们进行攻击的一个突破口。为了保护敏感数据和个人隐私,我们必须了解并实施一系列的关键措施来加固应用程序的安全性。 首先,一个关…