react18基础教程系列--安装环境及packagejson文件分析

一个React项目中,默认会安装:

  • react:React框架的核心
  • react-dom:React 视图渲染的核心「基于React构建WebApp(HTML页面)J—>react-native:构建和渲染App的
  • react-scripts: 脚手架为了让项目目录看起来干净一些,把webpack打包的规则及相关的插件/LOADER等都隐藏到了node_modules目录下,react-scripts就是脚手架中自己对打包命令的一种封装,基于它打包,会调用node_modules中的webpack等进行处理!!
  • web-vitals: 性能检测工具
{"name": "r18app","version": "0.1.0","private": true,"dependencies": {"@testing-library/jest-dom": "^5.17.0","@testing-library/react": "^13.4.0","@testing-library/user-event": "^13.5.0","react": "^18.2.0","react-dom": "^18.2.0","react-scripts": "5.0.1","web-vitals": "^2.1.4"},"scripts": {"start": "react-scripts start", // 开发环境"build": "react-scripts build", //生产环境"test": "react-scripts test", // 测试环境"eject": "react-scripts eject" // 这个可以弹出隐藏的webapck配置文件,但是要小心,过程是不可逆的},"eslintConfig": {  // eslint语法检测相关配置"extends": ["react-app","react-app/jest"]},"browserslist": { // 基于browserlist规范,设置浏览器的兼容情况"production": [">0.2%",  // 使用率超0.2%的浏览器"not dead", // 不考虑ie"not op_mini all" // 不考虑欧朋浏览器],"development": ["last 1 chrome version","last 1 firefox version","last 1 safari version"]}
}

环境变量配置

如果需要自定义环境变量,必须加上前缀 REACT_APP_,否则不会生效。

"scripts": {"start": "cross-env PORT=8888 REACT_APP_MODE=DEV API_URL=http://www.baidu.com react-scripts start","build": "react-scripts build","test": "react-scripts test","eject": "react-scripts eject"},

在这里插入图片描述

可以看到REACT_APP_MODE有值,API_URL没有写入到本地环境变量中。

在这里插入图片描述
加上这个REACT_APP_就可以在项目中获取到了

代理服务的实现

  • 在src目录下面添加setupProxy.js文件,注意版本的问题,这里有坑,会导致页面不显示,低版本的处理方法可以去搜下别的教程,高版本 `“http-proxy-middleware”: "^3.0.2"使用方法如下:

在这里插入图片描述

const { createProxyMiddleware } = require("http-proxy-middleware"); //引入http-proxy-middleware,react脚手架已经安装
module.exports = function (app) {app.use("/api",createProxyMiddleware({//遇见/api1前缀的请求,就会触发该代理配置target: "http://localhost:3001", //请求转发给谁changeOrigin: true, //控制服务器收到的请求头中Host的值pathRewrite: { "^/api": "" }, //重写请求路径,下面有示例解释}));
};
function App() {useEffect(() => {console.log(process.env);// 请求接口fetch("/api/v1/users").then((res) => res.json()).then((res) => console.log(res));}, []);return (<div className="App"><h1>Hello World</h1><p>当前的环境是:{process.env.NODE_ENV}</p><p>当前的环境是:{process.env.REACT_APP_API_URL}</p></div>);
}

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
这样就完成了,开发环境下的后端服务接口的联调配置。

参考文献

http-proxy-middleware最新使用教程

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

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

相关文章

《OpenCV计算机视觉》—— 图像金字塔

文章目录 什么是图像金字塔&#xff1f;一、定义与基本原理二、主要类型三、构建过程四、应用领域 图像金字塔中的下采样和上采样一、下采样&#xff08;Downsampling&#xff09;二、上采样&#xff08;Upsampling&#xff09;三、总结 代码实现 什么是图像金字塔&#xff1f;…

YOLOv8目标检测模型——遥感小目标检测经验分享

小目标检测——YOLOV8 一、引言 背景介绍 &#xff08;1&#xff09;目标检测的重要性 目标检测在许多领域都具有极其重要的作用。在自动驾驶中&#xff0c;目标检测能够识别道路上的障碍物和行人&#xff0c;确保行车安全。在视频监控中&#xff0c;目标检测能够实时发现异…

从登录到免登录:JSP与Servlet结合Cookie的基本实现

前言 JSP中应用Cookie解析&#xff1a; 用户登录成功后&#xff0c;将用户信息保存到Cookie中&#xff0c;在页面读取Cookie并显示&#xff0c;不需要再次登录可以直接进入页面 第一步&#xff1a;创建JavaWeb项目&#xff0c;配置pom.xml文件 创建maven项目&#xff0c;项目名…

DB-GPT部署和试用

前言 DB-GPT是一个开源的AI原生数据应用开发框架(AI Native Data App Development framework with AWEL(Agentic Workflow Expression Language) and Agents)。 目的是构建大模型领域的基础设施&#xff0c;通过开发多模型管理(SMMF)、Text2SQL效果优化、RAG框架以及优化、Mu…

Element UI入门笔记(个人向)

Element UI入门笔记 将页面分割为一级菜单、二级菜单、导航栏三个部分&#xff1b;使用npm下载安装&#xff0c;使用语句npm i element-ui -s; 布局组件 el-form 用于创建和管理表单&#xff1b;从属性上看&#xff1a; :model&#xff1a;用于双向数据绑定&#xff0c;将表单…

打造古风炫酷个人网页:用HTML和CSS3传递笔墨韵味

需要用到的背景大家可以自己找喜欢的风格!!! 当然俺把俺用的背景放到文章最后了哦&#xff01;&#xff01;&#xff01;&#xff01;&#xff01; 感谢关注和支持 长期更新哦~~~ 1. 简洁的页面布局&#xff1a;保持优雅和对称 在古风设计中&#xff0c;布局的对称性非常重要…

Linux - 探秘/proc/sys/net/ipv4/ip_local_port_range

文章目录 Pre概述默认值及其意义评估需求如何调整临时修改永久修改测试和验证 修改的潜在影响 Pre Linux - 探秘 Linux 的 /proc/sys/vm 常见核心配置 计划&#xff1a; 简要解释 /proc/sys/net/ipv4/ip_local_port_range 文件的功能和作用。介绍该文件的默认值及其影响。说明…

螺丝、螺母、垫片等紧固件常用类型详细介绍

螺钉、螺母、垫片等紧固件介绍 螺钉 杯头内六角 首先介绍一下杯头内六角&#xff0c;杯头内六角是我们用的最常见的一种螺钉&#xff0c;如果你对选择螺钉没有什么想法&#xff0c;可以直接无脑选杯头内六角去使用。 比如说我们有一个零件加工了通孔&#xff0c;另一个零件加…

Vue3.0组合式API:setup()函数

1、什么是组合式API Vue 3.0 中新增了组合式 API 的功能&#xff0c;它是一组附加的、基于函数的 API&#xff0c;可以更加灵活地组织组件代码。通过组合式 API 可以使用函数而不是声明选项的方式来编写 Vue 组件。因此&#xff0c;使用组合式 API 可以将组件代码编写为多个函…

CPU 和 GPU:为什么GPU更适合深度学习?

目录 什么是 CPU &#xff1f; 什么是 GPU &#xff1f; GPU vs CPU 差异性对比分析 GPU 是如何工作的 &#xff1f; GPU 与 CPU 是如何协同工作的 &#xff1f; GPU vs CPU 类型解析 GPU 应用于深度学习 什么是 CPU &#xff1f; CPU&#xff08;中央处理器&#xff09;…

git push : RPC failed; HTTP 400 curl 22 The requested URL returned error: 400

git push 出现RPC failed; HTTP 400 curl 22 The requested URL returned error: 400 问题 git push Enumerating objects: 11, done. Counting objects: 100% (11/11), done. Delta compression using up to 8 threads Compressing objects: 100% (10/10), done. error: RPC …

对中文进行文本分类的常用方法

一&#xff1a;关键词分类和基于规则的分类 关键词分类和基于规则的分类是两种常见的文本分类方法&#xff0c;它们可以应用于中文文本的分类。下面我将详细介绍这两种方法&#xff1a; 关键词分类 原理&#xff1a;这种方法通过识别文本中出现的特定关键词或短语来确定文本的…

STM32常用数据采集滤波算法

例如&#xff0c;STM32进行滤波处理时&#xff0c;主要目的是处理数据采集过程中可能产生的噪声和尖刺信号。这些噪声可能来自电源干扰、传感器自身的不稳定性或其他外部因素。 1.一阶互补滤波 方法&#xff1a;取a0~1,本次滤波结果&#xff08;1-a&#xff09;本次采样值a上…

基于 jenkins 的持续集成、持续部署方案

工具介绍 python3.12 fastapi 0.92.0 uvicorn 开发部署web项目&#xff1b;git gitee 实现代码版本管理&#xff1b;jenkins docker 实现持续集成、持续部署&#xff1b;centos7 作为jenkins服务器 & 部署服务器&#xff1b;有条件的可以再启动一台服务器作为部署测试…

学习笔记(一)

前言 一、对象 1、由类建模而成&#xff0c;是消息、数据和行为的组合 2、可以接收和发送消息&#xff0c;并利用消息进行彼此的交互。消息要包含传送给对象接收的信息 3、类的实例化&#xff1a;把类转换为对象的过程叫类的实例化。 4、对象的特性 (1) 对象有状态&#…

RabbitMQ Spring客户端使用

注解声明式队列和交换机 java自带序列化工具类&#xff0c;将java对象序列化为字节数组&#xff0c;用于网络传输。 jdk序列号存在缺陷&#xff0c;&#xff08;不安全&#xff0c;占用空间大等&#xff09; 推荐使用JSON的序列化&#xff1a; springboot扫描包使配置生效&…

windows下自启springboot项目(jar+nginx)

1、将springboot项目打包为jar 2、新建文本文档 test.txt&#xff0c;并输入 java -jar D:\test\test.jar&#xff08;修改为自己的jar包位置&#xff09; 保存 然后修将后缀名改为 .bat 3、在同一目录再新建 文本文档test.txt&#xff0c;输入以下内容&#xff0c;&…

图数据库的力量:深入理解与应用 Neo4j

图数据库的力量&#xff1a;深入理解与应用 Neo4j 文章目录 图数据库的力量&#xff1a;深入理解与应用 Neo4j1、什么是 Neo4j&#xff1f;版本说明 2、Neo4j 的部署和安装Neo4j Web 工具介绍 3、体验 Neo4j加载数据查询数据数据结构 4、Cypher 入门创建数据查询数据关系深度查…

【数据结构篇】~排序(1)之插入排序

排序~插入排序 前言插入排序1.直接插入排序&#xff08;时间复杂度&#xff1a;O(N^2)&#xff09;1.思想2.代码 2.希尔排序(时间复杂度&#xff1a;O(N∙))1.思路简易证明希尔排序的复杂度 2.代码 前言 四大排序&#xff0c;今天解决插入排序 堆排序和冒泡排序已经写过了&am…

从安装ffmpeg开始,把一个视频按照每秒30帧fps剪切为图片

ffmpeg -i demo.mp4 -vf fps1 -start_number 0 %5d.jpg没有ffmpeg 的去官网下载&#xff0c; ffmpeg.org/download.html 下载好之后&#xff0c;解压进入bin文件夹 复制当前路径&#xff0c;下一步 配置环境 进入本机环境变量&#xff0c;把地址添加到path中 之后进入anacond…