reactjs开发环境搭建

news2025/1/11 12:57:02

Reactjs是一个前端web页面应用开发框架工具集,其支持前端构建页面以及后端构建页面两种常用的开发场景,其中,支持reactjs的开发框架包括next.js、remix、gatsby以及其他,本文主要描述next.js开发环境的搭建,next.js是一个全栈式的web开发框架,可以开发出不同规模的、易于扩展的、响应式的web页面应用。

运行环境搭建

npx create-next-app@latest

图片

图片

如上所示,在本地开发环境中,使用nodejs运行时环境、使用npm包管理工具、使用next.js开发框架创建一个reactjs项目工程

npm run dev

图片

图片

如上所示,在本地开发环境中,运行项目工程test2023成功、在浏览器中访问test2023项目工程响应成功

项目工程构建

npm run build

图片

图片

如上所示,在本地开发环境中,使用npm构建.next项目工程、可以部署server项目工程到web运行时环境中

代码编辑工具

图片

图片

如上所示,使用visual studio code集成开发工具开发test2023项目工程、在工具终端中运行test2023项目工程成功

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

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

相关文章

java docker图片叠加水印中文乱码

java docker图片叠加水印中文乱码 技术交流博客 http://idea.coderyj.com/ 1.由于项目需要后端需要叠加图片水印,但是中文乱码,导致叠加了之后 中文是框框 2.经过多方查找基本都说在 linux下安装字体就解决了,但是尝试了均无效 3.后来忽然想到我的项目是用docker打包部署的,不…

seata框架

Seata简介:(Seata | Seata(官方网站)) Seata 是一款开源的分布式事务解决方案,致力于在微服务架构下提供高性能和简单易用的分布式事务服务。 相关术语: TC (Transaction Coordinator) - 事务…

嵌入式养成计划-32-网络编程----域套接字模型------抓包工具--wireshark

六十九、 域套接字模型 69.1 域套接字的概念 只能做一台主机内的进程间通信,协议族(地址族)指定为:AF_UNIX AF_LOCALbsp-lcd: s类型文件,就是域套接字如果客户端不手动绑定,则操作系统不会创建…

力扣刷题 day37:10-07

1.二分查找 给定一个 n 个元素有序的(升序)整型数组 nums 和一个目标值 target ,写一个函数搜索 nums 中的 target,如果目标值存在返回下标,否则返回 -1。 方法一:二分法 #方法一:二分法 def…

数百个下载能够传播 Rootkit 的恶意 NPM 软件包

供应链安全公司 ReversingLabs 警告称,最近观察到的一次恶意活动依靠拼写错误来诱骗用户下载恶意 NPM 软件包,该软件包会通过 rootkit 感染他们的系统。 该恶意软件包名为“node-hide-console-windows”,旨在模仿 NPM 存储库上合法的“node-…

vue3+elementPlus ElMessageBox消息框取消按钮位置调整

要求所有的ElMessageBox消息弹出框的取消按钮放在右边&#xff0c;如图 代码如下 <script lang"ts" setup> import { ElMessageBox } from element-plus const btnHandle () >{ElMessageBox.confirm(确定要删除该人员吗&#xff1f;,提示,{cancelButtonCl…

嵌入式养成计划-35------C++绪论------C++数据类型------array容器------命名空间

七十三、 工具QT 73.1 安装步骤 73.2 什么是 Qt Qt 是一个跨平台的 C图形用户界面应用程序框架。 它为应用程序开发者提供建立艺术级图形界面所需的所有功能。 它是完全面向对象的&#xff0c;很容易扩展&#xff0c;并且允许真正的组件编程。 73.3 Qt 的优点 跨平台&…

深入了解快速排序:原理、性能分析与 Java 实现

快速排序&#xff08;Quick Sort&#xff09;是一种经典的、高效的排序算法&#xff0c;被广泛应用于计算机科学和软件开发领域。本文将深入探讨快速排序的工作原理、步骤以及其在不同情况下的性能表现。 什么是快速排序&#xff1f; 快速排序是一种基于分治策略的排序算法&am…

【虚拟机栈】

文章目录 1. 虚拟机栈概述2. 局部变量表(Local Variables)3. 操作数栈4. 动态链接4.1 方法的调用&#xff1a;解析与分配 1. 虚拟机栈概述 每个线程在创建时都会创建一个虚拟机栈&#xff0c;其内部保存一个个的栈帧&#xff08;Stack Frame&#xff09;&#xff0c;对应着一次…

【Solidity】智能合约案例——①食品溯源合约

目录 一、合约源码分析&#xff1a; 二、合约整体流程&#xff1a; 1.部署合约 2.管理角色 3.食品信息管理 4.食品溯源管理 一、合约源码分析&#xff1a; Producer.sol:生产者角色的管理合约&#xff0c;功能为&#xff1a;添加新的生产者地址、移除生产者地址、判断角色地址…

阿里云轻量应用服务器流量价格表(计费/免费说明)

阿里云轻量应用服务器套餐有的限制月流量&#xff0c;有的不限制月流量&#xff0c;限制每月流量的套餐&#xff0c;如果自带的免费月流量包用完了&#xff0c;流量超额部分需要另外支付流量费&#xff0c;阿里云百科aliyunbaike.com分享阿里云轻量应用服务器月流量超额收费价格…

信号量机制实现进程互斥,进程同步,进程的前驱关系

信号量机制 一个信号量对应一种资源。 信号量的值这种资源的剩余数量&#xff08;信号量的值如果小于0&#xff0c;说明此时有进程在等待这种资源) P(S )&#xff1a;申请一个资源S&#xff0c;如果资源不够就阻塞等待V(S)&#xff1a;释放一个资源S&#xff0c;如果有进程在…

Linux 磁盘管理+实例

目录 一、文件系统 二、添加磁盘 三、查看磁盘信息&#xff08;块设备&#xff09; 四、分区 1、格式 1&#xff09;MBR分区 2&#xff09;GPT分区 2、管理分区 1&#xff09;使用fdisk 2&#xff09;使用gdisk 3&#xff09;使用parted a.交互式 b.非交互式 3、…

Django 前端模板显示换行符、日期格式

linebreaksbr 显示换行符 <td>{{ data.sku_list|default:"无"|linebreaksbr }}</td> date:"Y年m月d日 H:i" 设置日期格式 <td>{{ data.submit_time|date:"Y年m月d日 H:i" }}</td> 其他语法 forloop 获取循环的索引 …

CSP-J第二轮试题-2019年-3题

文章目录 参考&#xff1a;总结 [CSP-J2019] 纪念品题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1 样例 #2样例输入 #2样例输出 #2 提示答案 现场真题注意事项 参考&#xff1a; P5662 CSP-J2019纪念品 总结 本系列为CSP-J/S算法竞赛真题讲解&#xff0c;会按照年…

[极客大挑战 2019]BabySQL 1

#做题方法# 进去之后做了简单的注入发现有错误回显&#xff0c;就进行注入发现过滤了sql语 后面进行了双写and payload&#xff1a; ?usernameadmin%27%20aandnd%20updatexml(1,concat(0x7e,dAtabase(),0x7e,version()),1)%20--&passwordadmi 接下来又 ?usernameadm…

Python大数据之PySpark(七)SparkCore案例

文章目录 SparkCore案例PySpark实现SouGou统计分析 总结后记 SparkCore案例 PySpark实现SouGou统计分析 jieba分词&#xff1a; pip install jieba 从哪里下载pypi 三种分词模式 精确模式&#xff0c;试图将句子最精确地切开&#xff0c;适合文本分析&#xff1b;默认的方…

华为云云耀云服务器L实例评测|部署私有网盘 Nextcloud

华为云云耀云服务器L实例评测&#xff5c;部署私有网盘 Nextcloud 一、云耀云服务器L实例介绍1.1 云服务器介绍1.2 产品规格1.3 应用场景 二、云耀云服务器L实例配置2.1 重置密码2.2 服务器连接2.3 安全组配置 三、部署 Nextcloud3.1 Nextcloud 介绍3.2 Docker 环境搭建3.3 Nex…

趣味工具箱小程序源码

趣味工具箱小程序源码&#xff0c;支持功能去水印&#xff0c;精选壁纸&#xff0c;图片压缩&#xff0c;文字生成二维码&#xff0c;图片加水印&#xff0c;模拟来电&#xff0c;手持弹幕&#xff0c;掷骰子…等 使用小工具&#xff0c;一个小程序有几十个功能。 源码下载&am…

掌握 BERT:自然语言处理 (NLP) 从初级到高级的综合指南(1)

简介 BERT&#xff08;来自 Transformers 的双向编码器表示&#xff09;是 Google 开发的革命性自然语言处理 (NLP) 模型。它改变了语言理解任务的格局&#xff0c;使机器能够理解语言的上下文和细微差别。在本文[1]中&#xff0c;我们将带您踏上从 BERT 基础知识到高级概念的旅…