reactjs开发环境搭建

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.mzph.cn/news/98007.shtml

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

相关文章

c++中的map和set

文章目录 1. 关联式容器2. 键值对3. 树形结构的关联式容器3.1 set3.1.1 set的介绍3.1.2 set的使用 3.2 map3.2.1 map的介绍3.2.2 map的使用 3.3 multiset3.3.1 multiset的介绍3.3.2 multiset的使用 3.4 multimap3.4.1 multimap的介绍3.4.2 multimap的使用 1. 关联式容器 在初阶…

java socket实现代理Android App

实现逻辑就是转发请求和响应。 核心代码 // 启动代理服务器private void startProxyServer() {new Thread(new ProxyServer()).start();}// 代理服务器static class ProxyServer implements Runnable {Overridepublic void run() {try {// 监听指定的端口int port 8098; //一…

CSS 实现:常见布局

1 设备与视口 设备屏幕尺寸是指屏幕的对角线长度。像素是计算机屏幕能显示一种特定颜色的最小区域,分为设备像素和逻辑像素。 在 Apple 的视网膜屏(Retina)中,默认每 4 个设备像素为一组,渲染出普通屏幕中一个像素显示…

HTML5+CSS3+JS小实例:鼠标滚轮水平滚动

实例:鼠标滚轮水平滚动 技术栈:HTML+CSS+JS 效果: 源码: 【html】 <!DOCTYPE html> <html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="viewport" content="…

《游戏编程模式》学习笔记(十二)类型对象 Type Object

定义 定义类型对象类和有类型的对象类。每个类型对象实例代表一种不同的逻辑类型。 每种有类型的对象保存对描述它类型的类型对象的引用。 定义往往不是人能看懂的&#xff0c;我们需要例子才能够理解。 举例 假设你要为一款游戏制作一些怪物敌人。这些敌人有不同的血量及攻…

Stable Diffusion云服务器部署完整版教程

Stable Diffusion云服务器部署完整版教程 2023年07月04日 22:30 3607浏览 18喜欢 22评论 <span class"bili-avatar-icon bili-avatar-right-icon "></span> </div>薯片_AI 粉丝&#xff1a; 1513 文章&#xff1a; 1 设置分组取消关注 已关注 …

四位十进制频率计VHDL,DE1开发板验证,仿真和源码

名称&#xff1a;四位十进制频率计VHDL&#xff0c;DE1开发板验证 软件&#xff1a;Quartus 语言&#xff1a;VHDL 要求&#xff1a; 数字频率计设计要求 1、四位十进制数字显示的数学式频率计,其频率测量范围为10~9999khz,测量单位为kHz。 2、要求量程能够转换。即测几十…

CDN体系架构及部署方案探索

如今是科技技术飞速发展的时代&#xff0c;特别是互联网技术在各个方面都得到了质的提升。对于CDN技术来说&#xff0c;该项技术的基本功能、体系构架以及运营部署等方面都取得了长足的发展&#xff0c;不仅技术日新月异&#xff0c;而且整个体系日趋成熟&#xff0c;并且不断朝…

Tasmota系统之外设配置

Tasmota系统之外设配置 &#x1f388;相关篇《ESP32/ESP8266在线刷写Sonoff Tasmota固件以及配置简要》&#x1f516;这里以ESP32配置DS18B20温度传感器和dht11温湿度传感器为例。 ✨如果想接特定型号的显示屏幕&#xff0c;需要下载指定的固件&#xff0c;目前官方所提供的固件…

学计算机Java和c语言哪个出路比较好?

学计算机Java和c语言哪个出路比较好&#xff1f; 首先&#xff0c;这两者相比来说&#xff0c;个人更推荐你学习Java。 C比较复杂一些&#xff0c;难学一些。 Java相对于更适合大多数人&#xff0c;适合非高等学府出来的人。 第一、按Java目前的需求来说最近很多小伙伴找我&…

jar 命令启动java 指定配置文件路径 jar如何启动

一、各种启动方式 1.java -jar # 例子 java -jar test.jar 1. 2. 这是最简单的启动方式&#xff0c;同时弊端也是很多的。 弊端1&#xff1a;exit 退出终端会导致java进程中断。 弊端2&#xff1a;ctrlc 退出启动展示页会导致java进程中断。 弊端3&#xff1a;直接关闭终端会…

P1540 [NOIP2010 提高组] 机器翻译(模拟)

[NOIP2010 提高组] 机器翻译 题目背景 小晨的电脑上安装了一个机器翻译软件&#xff0c;他经常用这个软件来翻译英语文章。 题目描述 这个翻译软件的原理很简单&#xff0c;它只是从头到尾&#xff0c;依次将每个英文单词用对应的中文含义来替换。对于每个英文单词&#xf…

多功能频率计周期/脉宽/占空比/频率测量verilog,视频/代码

名称&#xff1a;多功能频率计周期、脉宽、占空比、频率测量verilog 软件&#xff1a;Quartus 语言&#xff1a;Verilog 代码功能&#xff1a; 多功能频率计&#xff0c;可测量信号的周期、脉冲宽度、占空比、频率&#xff0c;语言为verilog&#xff0c;quartus软件设计仿真…

Text embedding 模型总结

文章目录 MTEB榜单8个嵌入任务三种数据集类别 C_METB榜单文本向量表示模型 目前&#xff0c;随着 Langchain LLM模型 的火热&#xff0c;除了层出不穷的大模型外&#xff0c;因为检索的能力会很大程度影响最终的问答效果&#xff0c;文本的嵌入模型也是大家比较关注的。本文主…

2023年【A特种设备相关管理(锅炉压力容器压力管道)】新版试题及A特种设备相关管理(锅炉压力容器压力管道)试题及解析

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 A特种设备相关管理&#xff08;锅炉压力容器压力管道&#xff09;新版试题是安全生产模拟考试一点通生成的&#xff0c;A特种设备相关管理&#xff08;锅炉压力容器压力管道&#xff09;证模拟考试题库是根据A特种设备…

打造完美家庭空间,让生活更加舒适

在现代繁忙的都市生活中&#xff0c;家是人们温暖而舒适的避风港。而如何打造一个恰到好处的家庭空间&#xff0c;成为了许多人心中的追求。今天&#xff0c;就让我们来探索一些空间布局方案&#xff0c;为您的家庭营造一个完美融合功能与美感的舒适空间。 &#x1f3e0;&…

javaee之Elasticsearch相关知识

简单说一下Elasticsearch相关知识 其余的参考官网文档 我们还可以用下面的方式来查 看一下原始索引库的模板 下面看一下数据库映射关系 下面就是更改了id1的所有数据 下面是我索引库中的内容 说一下查询之后&#xff0c;一些属性的含义 上面案例是这样理解的 match查询类型会对…

windows redis 自启动 Redis服务无法启动报错1067问题

如果你的系统服务里面已经有redis服务并且无法启动&#xff0c;则使用下面的命令卸载此服务 ! 1、停止Redis服务&#xff1a; redis-server --service-uninstall 2、删除系统服务 sc delete redis 进入到你的Redis安装目录&#xff0c;我的在以下目录&#xff0c;谨记此时不…

【UE】在游戏运行时,通过选择uasset来生成静态网格体

目录 主要流程 步骤 一、创建用于包含静态网格体的Actor蓝图 二、按钮点击事件 效果 主要流程 用户点击按钮后产生一个文件对话框&#xff0c;用户通过文件对话框选择指定的文件夹&#xff0c;我们获取到这个文件夹路径后处理成“按路径获取资产”节点所需的输入&#x…

Vue3+TypeScript

一、Vue3带来的变化(源码&#xff09; 源码通过monorepo的形式来管理源代码 口Mono:单个 口Repo : repository仓库 口主要是将许多项目的代码存储在同一个repository中; 口这样做的目的是多个包本身相互独立&#xff0c;可以有自己的功能逻辑、单元测试等&#xff0c;同时又在…