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.rhkb.cn/news/424366.html

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

相关文章

51单片机 - DS18B20实验1-读取温度

上来一张图&#xff0c;明确思路&#xff0c;程序整体裤架如下&#xff0c;通过单总线&#xff0c;单独封装一个.c文件用于单总线的操作&#xff0c;其实&#xff0c;我们可以把点c文件看成一个类操作&#xff0c;其属性就是我们面向对象的函数&#xff0c;也叫方法&#xff0c…

Vue.nextTick 的工作机制

Vue.nextTick 是异步执行的&#xff0c;它使用了微任务&#xff08;microtasks&#xff09;或宏任务&#xff08;macrotasks&#xff09;&#xff0c;具体使用哪种取决于 JavaScript 环境的支持情况。具体来说&#xff0c;Vue 优先选择使用微任务&#xff0c;如 Promise.then&a…

重生奇迹MU 浅析那些极具魔幻色彩的职业装备

沉稳厚重的剑士职业装备 剑士是所有喜欢近战作战方式的玩家首选的职业。作为来自勇者大陆的最强战士&#xff0c;剑士所穿戴的职业装备都偏向沉稳和厚重&#xff0c;通常全身覆盖重甲。这是因为剑士需要冲向敌人战斗&#xff0c;没有过硬的装备护身&#xff0c;他们很难承受住…

【车载开发系列】ParaSoft单元测试环境配置(三)

【车载开发系列】ParaSoft单元测试环境配置(三) 【车载开发系列】ParaSoft单元测试环境配置(三) 【车载开发系列】ParaSoft单元测试环境配置(三)一. 去插桩设置Step1:静态解析代码Step2:编辑Parasoft文件Step3:确认去插桩二. 新增测试用例Step1:生成测试用例Step2:执…

【Python第三方库】OpenCV库实用指南

文章目录 前言安装OpenCV读取图像图像基本操作获取图像信息裁剪图像图像缩放图像转换为灰度图图像模糊处理边缘检测图像翻转图像保存 视频相关操作方法讲解读取视频从摄像头读取视频 前言 OpenCV&#xff08;Open Source Computer Vision Library&#xff09;作为一个强大的计…

20 递归算法精髓解析:基准、性质、案例(阶乘、斐波拉契、猴子吃桃、汉诺塔等)、与循环的对比

目录 1 概述 2 递归的基本组成部分 2.1 基准情况 2.2 递归步骤 2.3 案例&#xff1a;循环实现阶乘的计算 2.4 案例&#xff1a;递归函数实现阶乘的计算 3 递归的性质 3.1 自我调用 3.2 栈的使用 3.3 问题分解 3.4 性能考虑 3.5 案例&#xff1a;递归的回溯 4 综合…

学习结构体的使用

对于结构体的创建&#xff0c;首先要创建一个结构体类型&#xff0c;像下面这样&#xff1a; 结构体对成员的访问&#xff0c;就是变量名.成员就可以了 当然对于结构体的声明还有一些特殊的声明 结构体的自引用 结构体的重命名

RK3562/3588系列之5—其他实用工具

RK3562/3588系列之5—其他实用工具 1. vmware 虚拟机与主机之间共享文件夹2.RK3588开发板与电脑进行adb连接参考文献1. vmware 虚拟机与主机之间共享文件夹 使用此功能前需要提前安装好vmware tools。 启动虚拟机,依次进行如下操作,在主机创建共享文件夹。 然后就可以在如下…

Java | Leetcode Java题解之第404题左叶子之和

题目&#xff1a; 题解&#xff1a; class Solution {public int sumOfLeftLeaves(TreeNode root) {if (root null) {return 0;}Queue<TreeNode> queue new LinkedList<TreeNode>();queue.offer(root);int ans 0;while (!queue.isEmpty()) {TreeNode node que…

记录一下,Vcenter清理/storage/archive空间

一、根因 vpostgres&#xff1a;这个目录可能包含与 vCenter Server 使用的 PostgreSQL 数据库相关的归档文件过多&#xff0c;导致空间被占用。 二、处理过程 1、SSH登陆到Vcenter. 2、df -Th **图中可以看到 /storage/archive 使用占比很高。 /storage/archive 目录通常用…

三明儿童自闭症寄宿制学校:关爱、教育、成长一站式服务

三明儿童自闭症寄宿制学校的启示&#xff1a;广州星贝育园——自闭症儿童的一站式成长乐园 在探讨自闭症儿童教育的道路上&#xff0c;寄宿制学校以其独特的优势&#xff0c;为孩子们提供了集关爱、教育、成长于一体的全方位服务。虽然文章开头提及了“三明儿童自闭症寄宿制学…

Leetcode面试经典150题-79.搜索单词

题目比较简单&#xff0c;回溯最基础的题&#xff0c;记得除非覆盖&#xff0c;否则一定要恢复现场就行 解法都在代码里&#xff0c;不懂就留言或者私信 class Solution {public boolean exist(char[][] board, String word) {int m board.length; int n board[0].length;i…

C++速通LeetCode简单第15题-有效的括号(全网最易懂代码注释)

解法分析&#xff1a; 越远的左括号匹配越远的右括号&#xff0c;越近的左括号匹配越近的右括号&#xff0c;正符合堆栈先进后出性质 。 因此利用堆栈保存左括号&#xff0c;通过循环逐个括号判断&#xff1a; class Solution { public:bool isValid(string s) {stack<…

Ubuntu20+Noetic+cartographer_ros编译部署

1 准备工作 &#xff08;1&#xff09;准备Ubuntu20系统。 &#xff08;2&#xff09;安装ROS系统,参考 https://blog.csdn.net/weixin_46123033/article/details/139527141&#xff08;3&#xff09;Cartographer相关软件包和源码下载&#xff1a; https://gitee.com/mrwan…

彻底理解浅拷贝和深拷贝

目录 浅拷贝实现 深拷贝实现自己手写 浅拷贝 浅拷贝是指创建一个新对象&#xff0c;这个对象具有原对象属性的精确副本 基本数据类型&#xff08;如字符串、数字等&#xff09;&#xff0c;在浅拷贝过程中它们是通过值传递的&#xff0c;而不是引用传递&#xff0c;修改值并不…

Java抽象类和接口的学习了解

目录 1. 抽象类 1.1 抽象类概念 1.2例子 1.3 抽象类语法 1.被 abstract 修饰的类--抽象类 2.抽象类中被 abstract 修饰的方法--抽象方法&#xff0c;该方法不用给出具体的实现体 3.当一个类中含有抽象方法时&#xff0c;该类必须要abstract修饰 4.抽象类也是类&#xff…

删除有序数组中的重复项(同向指针(快慢指针))

题目&#xff1a; 算法分析&#xff1a; 快慢指针从0出发若快慢指针不相同&#xff0c;快指针替换慢指针&#xff08;即慢指针后一位&#xff09;快指针每次都会增加题目求不重复的元素个数&#xff08;slow 为对应元素索引&#xff0c;故个数为slow1&#xff09; 算法图解…

算法练习题27——疫情下的电影院(模拟)

其实思路还好 就是输入有点难搞 Java import java.util.ArrayList; import java.util.Scanner;public class Main {public static void main(String[] args) {Scanner scanner new Scanner(System.in);String input scanner.nextLine();// 去掉输入字符串的方括号if (input.…

html+css+js网页设计 旅游 大理旅游7个页面

htmlcssjs网页设计 旅游 大理旅游7个页面 网页作品代码简单&#xff0c;可使用任意HTML辑软件&#xff08;如&#xff1a;Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad 等任意html编辑软件进行运行及修改编辑等操作&#xff09;。 获取源码 1&#…

爬虫逆向学习(六):补环境过某数四代

声明&#xff1a;本篇文章内容是整理并分享在学习网上各位大佬的优秀知识后的实战与踩坑记录 引用博客&#xff1a; https://blog.csdn.net/shayuchaor/article/details/103629294 https://blog.csdn.net/qq_36291294/article/details/128600583 https://blog.csdn.net/weixin_…