当前位置： 首页 > news >正文

React添加到现有项目

news 文章来源：https://blog.csdn.net/qq_35976548/article/details/137685149 2025/4/27 6:41:59

1.检查现有项目的根目录下是否有package.json文件

如果没有，则在项目的根目录下初始化一个package.json配置文件
在这里插入图片描述

2.在根目录下安装react和react-dom依赖

npm install --save react react-dom react-scripts

安装成功后，react、react-dom以及react-scripts的相关信息会被写到package.json配置文件里。

3. 在根目录下安装@babel/plugin-transform-private-property-in-object和babel-preset-es2015依赖

npm install --save-dev @babel/plugin-transform-private-property-in-object
npm install --save-dev babel-cli babel-preset-es2015

之前安装babel-preset-react-app和babel-preset-es2015就可以，但我npm run build的时候提示babel-preset-react-app不再维护了，如下如：
在这里插入图片描述
所以就用@babel/plugin-transform-private-property-in-object做了替换。

4.检查项目根目录下是否有public文件夹

没有的话，手动创建一个，并将你的html文件放到这个文件夹下。
public存放都是静态文件不会被编译，所以如果有静态公共配置文件就放在这里。

题外话-如何在react中使用公用配置文件

  1. 假设有个公共配置文件config.js，将其放入public，
  2. 在需要用config配置的html引入此配置文件
  1. 在入口的js文件中把配置文件的内容挂载到全局
    React.Component.prototype.$config = window.config
  2. 组件中使用
//假设config.js中有个prjName的配置
let  prjName = this.$config.prjName 
<div>{`${process.env.PUBLIC_URL}/${prjName }`}</div>

process.env是Nodejs提供的API，用于返回一个包含用户环境信息的对象。如果给Nodejs设置一个环境变量，并把它挂载在 process.env 返回的对象上，便可以在代码中进行相应的环境判断。
例如有时会看到这样的代码，就是判断当前是生产还是开发环境来决定mode字段的定义：
module.exports = {
mode: process.env.NODE_ENV === ‘production’ ? ‘production’ : ‘development’
}

5.检查项目根目录下是否有src文件夹

没有的话，手动创建一个，并将你的js文件放到这个文件夹下。

基于以上五个步骤，基本可以实现在现有项目里使用react。

最后

react 18以前的版本，可以通过普通的js引用达到为现有项目添加react代码的需要。但react18添加了许多新特性，语法也有了很大的改变，17的语法倒是还可以用，但浏览器会一直提醒用18的语法替换。
如果使用的是react 18的方式去编写代码，会一直提示类似“Inline Babel script:4 Uncaught ReferenceError: XXX is not defined”。
所以猜测，18以后各种依赖拆的比较碎，需要引入各种各样的js来满足开发需求。（此处还需验证，如果你们有解决的办法一定要告诉我哦，对于react我还是个小白，起初就十分不想用npm，觉得太繁重，最后还是妥协了。另外，如果有说的不对的地方，欢迎指正，感谢！）

react 17的语法

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Insert title here</title><!-- 使用的是react 18 --><script src="js/react.development.js"       ></script><script src="js/react-dom.development.js"   ></script><script src="js/babel.min.js"   ></script>
</head>
<body><div id="root"></div><script  type="text/babel">const Element = <h1>Hello, world!~~~~~~~~~</h1>;ReactDOM.render(Element,document.getElementById('root'));</script>
</body>
</html>

结果如图所示：
在这里插入图片描述
react 18的语法

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Insert title here</title><!-- 使用的是react 18 --><script src="js/react.development.js"       ></script><script src="js/react-dom.development.js"   ></script><script src="js/babel.min.js"   ></script>
</head>
<body><div id="root"></div><script  type="text/babel">import { createRoot } from 'react-dom/client';const container = document.getElementById('root');const root      = createRoot(container); root.render(<h1>Hi~~~~~</h1>);</script>
</body>
</html>

结果如图所示：
在这里插入图片描述

相关文章：

React添加到现有项目

1.检查现有项目的根目录下是否有package.json文件 如果没有&#xff0c;则在项目的根目录下初始化一个package.json配置文件 2.在根目录下安装react和react-dom依赖 npm install --save react react-dom react-scripts安装成功后&#xff0c;react、react-dom以及react-scr…...

编程日记 2024/4/12 23:03:46

java 邮件发送表格

邮件发送表格 问题导入效果图 实现方案1. 拼接HTML文件&#xff08;不推荐&#xff09;2. excel 转HTML使用工具类来转化依赖工具类代码示例 使用已工具包 如 aspose-cells依赖代码示例 3.使用模板生成流程准备模板工具类代码示例 问题导入 在一些定时任务中&#xff0c;经常会…...

编程日记 2024/4/12 23:02:44

鸿蒙ArkTS小短剧开源项目进行中

鸿蒙小短剧开源项目进行中 短剧项目名称&#xff1a;CCShort-TV 短剧项目名称&#xff1a;CCShort-TV 使用ArtTS语言&#xff0c;API9以上&#xff0c;HarmonyOS系统的短剧开源代码&#xff0c;使用GSYVideoPlayer作为核心播放器的小短剧。主要以ArkTS&#xff0c;ArkUI编写为…...

编程日记 2024/4/12 23:01:43

Go 项目依赖注入wire工具最佳实践介绍与使用

文章目录 一、引入二、控制反转与依赖注入三、为什么需要依赖注入工具3.1 示例3.2 依赖注入写法与非依赖注入写法 四、wire 工具介绍与安装4.1 wire 基本介绍4.2 安装 五、Wire 的基本使用5.1 前置代码准备5.2 使用 Wire 工具生成代码 六、Wire 核心技术5.1 抽象语法树分析5.2 …...

编程日记 2024/4/12 23:00:41

地推网推拉新致富是真的吗？靠谱平台揭秘

在互联网时代&#xff0c;各种平台层出不穷。为了吸引更多用户&#xff0c;这些平台常常会推出各种地推网推拉新活动。如果你懂得如何利用&#xff0c;那么你也有机会从中获得一笔不小的收入。 当然&#xff0c;在地推网推拉新赚钱的过程中&#xff0c;也需要注意一些问题。首…...

编程日记 2024/4/12 22:58:39

VTK使用交互器来从三维体数据中提取二维切片

VTK中鼠标消息是在交互类型对象&#xff08;interactorstyle&#xff09;中响应&#xff0c;因此通过为交互类型对象&#xff08;interactorstyle&#xff09;添加观察者&#xff08;observer&#xff09;来监听相应的消息&#xff0c;当消息触发时&#xff0c;由命令模式执行相…...

编程日记 2024/4/12 22:55:36

NCBI 数据下载

网上介绍的那几种直接下载NCBI数据的方法大都下载速度很慢&#xff0c;但是EBI (European Bioinformatics Institute) 下载很快&#xff0c;而且它的数据库和NCBI是共享的&#xff0c;所以我们可以直接从 EBI 下载。 1 、 确定要下载的 SRA 编号&#xff1b; 2 、 EBI (https…...

编程日记 2024/4/12 22:54:35

【Rust】基础语法

变量&#xff0c;基本类型&#xff0c;函数&#xff0c;注释和控制流&#xff0c;这些几乎是每种编程语言都具有的编程概念。 这些基础概念将存在于每个 Rust 程序中&#xff0c;及早学习它们将使你以最快的速度学习 Rust 的使用。 变量 首先必须说明&#xff0c;Rust 是强类…...

编程日记 2024/4/12 22:53:34

JVM基础：类的生命周期详解

JDK版本&#xff1a;jdk8 IDEA版本&#xff1a;IntelliJ IDEA 2022.1.3 文章目录 一. 生命周期概述二. 加载阶段(Loading)2.1 加载步骤2.2 查看内存中的对象 三. 连接阶段(Linking)3.1 连接之验证3.2 连接之准备3.3 连接阶段之解析 四. 初始化阶段(Initialization)4.1 单个类的…...

编程日记 2024/4/12 22:52:31

【Canvas技法】在Canvas按圆周绘制图形或是标注文字时，角度累加的方向为顺时针，起点为x轴正向

【图解说明】 【核心代码】 // 画圆弧及方向for(var i0;i<4;i){var startMath.PI/2*i;var endstartMath.PI/2;var x1180*Math.cos(start);var y1180*Math.sin(start);var x2180*Math.cos(end);var y2180*Math.sin(end);ctx.beginPath();ctx.arc(0,0,180,start,end,false);ct…...

编程日记 2024/4/12 22:51:29

计算机网络-TCP断开连接阶段错误应对机制

连接断开阶段 四次挥手机制&#xff1a;TCP连接的断开需要四次挥手&#xff0c;这是因为双方都需要独立地关闭数据传输。第二次和第三次挥手不能合并&#xff0c;因为在回复第二次挥手的时候&#xff0c;可能还有数据没有接收完成&#xff0c;所以需要先回复ACK报文&#xff0c…...

编程日记 2024/4/12 22:49:28

springboot动态使用DruidDataSource切换数据源（动态配置多个数据源）

1、添加依赖&#xff0c;在pom文件中添加 <dependency><groupId>com.baomidou</groupId><artifactId>dynamic-datasource-spring-boot-starter</artifactId><version>2.5.0</version></dependency><dependency><grou…...

编程日记 2024/4/12 22:47:26

P8786 [蓝桥杯 2022 省 B] 李白打酒加强版

【dfs题解】---只有50分 (头一回自己用dfs做出来了dp的hard等级的大题&#xff0c;从来没有拿50分这么高兴过哈哈哈哈哈) #include <bits/stdc.h> using namespace std; int n,m; long long ans0; const long long mol1e97; void dfs(int h,int d,int sum) {if(h<0|…...

编程日记 2024/4/12 22:45:24

没有网没有移动存储的情况下两台电脑如何互相传输数据

无网无移动存储情况下两台电脑数据互传探秘 一、直连网线传输数据二、局域网文件共享其他 在信息化时代的今天&#xff0c;电脑作为重要的数据处理工具&#xff0c;在日常生活和工作中扮演着不可或缺的角色。然而&#xff0c;有时我们会遇到一些特殊情况&#xff0c;如没有网络…...

编程日记 2024/4/12 22:43:22

如何用putty通过ssh连接ubuntu

1. 下载和安装PuTTY 访问PuTTY官网下载PuTTY的最新版本。 2. 打开PuTTY 解压下载的文件后&#xff0c;找到PuTTY文件并双击打开。 3. 配置SSH连接 在ubuntu下安装ssh服务在安装ssh时&#xff0c;我一直遇到一个问题&#xff0c;原因是我的虚拟机连不上网&#xff0c;反复实…...

编程日记 2024/4/12 22:42:21

java如何实现rabbitmq的消息确认机制和消息持久化机制配置和示例

在Java中&#xff0c;使用RabbitMQ的客户端库&#xff08;通常是AMQP客户端库&#xff0c;如RabbitMQ的Java客户端&#xff09;可以方便地实现消息确认机制和消息持久化机制。以下是如何实现这两个机制的示例。 1、消息确认机制 RabbitMQ支持两种类型的确认&#xff1a;生产者…...

编程日记 2024/4/12 22:41:20

react 组件：Suspense

允许在子组件完成加载前展示后备方案。 children&#xff1a;真正的 UI 渲染内容。如果 children 在渲染中被挂起&#xff0c;Suspense 边界将会渲染 fallback。 fallback&#xff1a;真正的 UI 未渲染完成时代替其渲染的备用 UI&#xff0c;它可以是任何有效的 React 节点。后…...

编程日记 2024/4/12 22:40:19

2024-4-5修改vscode的代理

今天在vs code 上面配置go环境的时候出现了以下的报错&#xff1a; 2024-04-05 16:18:00.786 [info] Installing golang.org/x/tools/goplslatest FAILED 2024-04-05 16:18:00.786 [info] { “code”: 1, “killed”: false, “signal”: null, “cmd”: “E:\Go\bin\go.exe in…...

编程日记 2024/4/12 22:34:13

python字符切片的规则

跟range一样有三个参数&#xff0c;分别是x:y:z&#xff0c;代表的含义分别为左边界&#xff0c;右边界&#xff08;注意该范围是左闭右开的&#xff0c;也就是说取不到右值&#xff09;和步长。 1. 切片是从左往右还是从右往左&#xff0c;看的是步长的正负&#xff0c;如果步…...

编程日记 2024/4/12 22:33:12

C++ 的内存安全与效率

在C编程中&#xff0c;内存安全和效率是两个至关重要的考虑因素。 内存安全涉及确保程序在分配和使用内存时不会发生错误&#xff0c;如内存泄漏、悬挂指针、越界访问、空指针解引用等&#xff1b; 效率则关注如何有效地使用内存资源&#xff0c;减少不必要的内存分配和释放操…...

编程日记 2024/4/12 22:31:10

Go 实战｜使用 Wails 构建轻量级的桌面应用：仿微信登录界面 Demo

概述 本文探讨 Wails 框架的使用&#xff0c;从搭建环境到开发&#xff0c;再到最终的构建打包&#xff0c;本项目源码 GitHub 地址&#xff1a;https://github.com/mazeyqian/go-run-wechat-demo 前言 Wails 是一个跨平台桌面应用开发框架&#xff0c;他允许开发者利用 Go …...

编程日记 2024/4/12 22:30:09

c++取经之路(其五)——类和对象拷贝构造函数

概念&#xff1a;拷贝构造函数&#xff0c;只有单个形参&#xff0c;该形参是对本类类型对象的引用(一般常用const修饰)&#xff0c;在用已存在的类类型对象创建新对象时由编译器自动调用。 特征&#xff1a; 1. 拷贝构造函数是构造函数的一个重载形式 如&#xff1a; 2. 拷贝…...

编程日记 2024/4/12 22:29:07

YOLOv8最新改进系列:融合最新顶会提出的HCANet网络中卷积和注意力融合模块(CAFM)，有效提升小目标检测性能，大幅度拉升目标检测效果！遥遥领先！

YOLOv8最新改进系列&#xff1a;YOLOv8最新改进系列:融合最新顶会提出的HCANet网络中卷积和注意力融合模块(CAFM)&#xff0c;有效提升小目标检测性能&#xff0c;大幅度拉升目标检测效果&#xff01;遥遥领先&#xff01; B站全文戳这里&#xff01; 详细的改进教程以及源码…...

编程日记 2024/4/12 22:25:04

【计算机毕业设计】网上宠物商店管理系统——后附源码

&#x1f389;**欢迎来到我的技术世界&#xff01;**&#x1f389; &#x1f4d8; 博主小档案&#xff1a; 一名来自世界500强的资深程序媛&#xff0c;毕业于国内知名985高校。 &#x1f527; 技术专长&#xff1a; 在深度学习任务中展现出卓越的能力&#xff0c;包括但不限于…...

编程日记 2024/4/12 22:24:02

详解Qt添加外部库

在Qt项目中添加外部库是一项常见任务&#xff0c;无论是静态库还是动态库都需要正确的配置才能让项目顺利编译链接。以下是详细步骤和不同场景下的配置方法&#xff1a; 方法一&#xff1a;手动编辑.pro文件 添加头文件路径&#xff1a; 在Qt项目中的.pro文件中使用INCLUDEPAT…...

编程日记 2024/4/12 22:22:00

深入理解JVM垃圾收集器

相关系列 深入理解JVM垃圾收集算法-CSDN博客 目前市面常见的垃圾收集器有Serial、ParNew、Parallel、CMS、Serial Old、Parallel Old、G1、ZGC以及有二种不常见的Epsilon、Shenandoah的&#xff0c;从上图可以看到有连线的的垃圾收集器是可以组合使用&#xff0c;是年轻代老年代…...

编程日记 2024/4/12 22:20:59

macU盘在电脑上读不出来 u盘mac读不出来怎么办 macu盘不能写入 Tuxera NTFS for Mac免费下载

对于Mac用户来说&#xff0c;使用U盘是很常见的操作&#xff0c;但有时候可能会遇到Mac电脑无法读取U盘的情况&#xff0c;这时候就需要使用一些特定的工具软件来帮助我们解决问题。本文就来告诉大家macU盘在电脑上读不出来是怎么回事&#xff0c;u盘mac读不出来怎么办。 一、m…...

编程日记 2024/4/12 22:18:57

448.找到所有数组中消失的数字（原地修改）

给你一个含 n 个整数的数组 nums &#xff0c;其中 nums[i] 在区间 [1, n] 内。请你找出所有在 [1, n] 范围内但没有出现在 nums 中的数字&#xff0c;并以数组的形式返回结果。 示例 1&#xff1a; 输入&#xff1a;nums [4,3,2,7,8,2,3,1] 输出&#xff1a;[5,6] 原地修改 …...

编程日记 2024/4/12 22:17:56

Redis学习从入门到掌握（基础篇）

文章目录 一、初识Redis1.认识 Redis2.Redis常见命令&#xff08;1&#xff09;Redis 数据结构介绍&#xff08;2&#xff09;Redis 通用命令&#xff08;3&#xff09;String 类型&#xff08;4&#xff09;String 类型的常见命令&#xff08;5&#xff09;Hash 类型&#xff…...

编程日记 2024/4/12 22:15:54

redis主从复制、哨兵

目录 1. 主从复制 特点&#xff1a; 工作原理&#xff1a; 配置&#xff1a; 2. 哨兵 特点&#xff1a; 工作原理&#xff1a; 配置&#xff1a; ​编辑 1. 主从复制 特点&#xff1a; 主从复制是 Redis 最基本的高可用性方案。主节点&#xff08;Master&#xff09…...

编程日记 2024/4/12 22:12:51