React添加到现有项目

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>

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

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

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

相关文章

上位机图像处理和嵌入式模块部署(qmacvisual缺失的光源控制)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 有些场景下面&#xff0c;是不需要光源和光源控制的&#xff0c;比如说利用摄像头识别对应区域的库位&#xff0c;这部分直接利用红外光采集对应的…

Nuttx系统在 imx6ul 开发板上的移植(一、环境准备和交叉编译)

Nuttx应该是一个不错的系统&#xff0c;有瓜可挖。小米的澎湃os底层内核使用的就是它。 翻出之前别人送我的imax6ul开发板&#xff0c;在那安安静静的吃灰&#xff0c;有了想动一动的冲动。于是想到给自己定一个小目标&#xff0c;逐步实现Nuttx内核系统在imax6ul的开发板上移植…

十五届web模拟题整理

模拟赛一期 1.动态的Tab栏 请在 style.css 文件中补全代码。 当用户向下滚动的高度没有超过标题栏&#xff08;即 .heading 元素&#xff09;的高度时&#xff0c;保持 Tab 栏在其原有的位置。当滚动高度超过标题栏的高度时&#xff0c;固定显示 Tab 栏在网页顶部。 /* TODO…

【题目】【信息安全管理与评估】2022年国赛高职组“信息安全管理与评估”赛项样题2

【题目】【信息安全管理与评估】2022年国赛高职组“信息安全管理与评估”赛项样题2 信息安全管理与评估 网络系统管理 网络搭建与应用 云计算 软件测试 移动应用开发 任务书&#xff0c;赛题&#xff0c;解析等资料&#xff0c;知识点培训服务 添加博主wx&#xff1a;liuliu548…

Python人工智能教学之掌握机器学习深度学习并提升实战能力(共72个视频教学+课程资料)云盘下载

人工智能是未来的发展方向&#xff0c;掌握了人工智能&#xff0c;就掌握了钱图。。。 Python人工智能教学之掌握机器学习深度学习并提升实战能力&#xff08;共72个视频教学课程资料&#xff09; 下载地址&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1ryJd5PNx1tLD…

私有化即时通讯软件,WorkPlus提供的私有化、安全通讯解决方案

在当今信息化快速发展的时代&#xff0c;安全问题已经成为各行各业关注的焦点。特别是在金融、政府单位和芯片等关键行业&#xff0c;信息安全的重要性不言而喻。这些行业涉及到大量的敏感数据和关键信息&#xff0c;一旦发生泄露&#xff0c;可能会对国家安全、企业利益甚至个…

DC-2渗透测试复现

DC-2渗透测试复现 目的&#xff1a; 获取最高权限以及5个flag 过程&#xff1a; 信息打点-ssh连接-git提权 环境&#xff1a; 攻击机&#xff1a;kali(192.168.85.136) 靶机&#xff1a;DC_2(192.168.85.132) 复现&#xff1a; 一.信息收集 nmap -sP 192.168.85.0/24 …

如何用个人电脑搭建一台本地服务器,并部署项目到服务器详细教程

服务器是一种高性能计算机&#xff0c;作为网络的节点&#xff0c;它存储、处理网络上80%的数据、信息&#xff0c;因此也被称为网络的灵魂。与普通计算机相比&#xff0c;服务器具有高速CPU运算能力、长时间可靠运行、强大I/O外部数据吞吐能力以及更好的扩展性。 服务器的主要…

c# refc# substring c# 反射c# split c# websocket c# datatable使用

在C#编程中&#xff0c;ref关键字、Substring方法、反射&#xff08;Reflection&#xff09;、Split方法、WebSocket通信以及DataTable的使用都是常见的技术和方法。下面我将逐一为您详解这些内容。 1. C# ref关键字 ref关键字在C#中用于按引用传递参数。这意味着当您将变量作…

原型模式:复制对象的智能解决方案

在软件开发过程中&#xff0c;对象的创建可能是一个昂贵的操作&#xff0c;特别是当对象的初始化包括从数据库加载数据、进行IO操作或进行复杂计算时。原型模式是一种创建型设计模式&#xff0c;它通过复制现有的实例来创建新的对象实例&#xff0c;从而避免了类初始化时的高成…

扭蛋机小程序:线上扭蛋机模式发展空间有多大?

潮玩行业近几年的发展非常快&#xff0c;推动了扭蛋机市场的发展&#xff0c;越来越多的人加入到了扭蛋机赛道中&#xff0c;市场迎来了新的发展期。如今&#xff0c;我国的二次元文化的发展不断成熟&#xff0c;扭蛋机主打的二次元商品迎来了更多的商业机会。 一、互联网扭蛋机…

httpsok-快速申请谷歌SSL免费证书

&#x1f525;httpsok-快速申请谷歌SSL免费证书 使用场景&#xff1a; 部署CDN证书、OSS云存储证书证书类型&#xff1a; 单域名 多域名 通配符域名 混合域名证书厂商&#xff1a; ZeroSSL Lets Encrypt Google证书加密类型&#xff1a; ECC、 RSA 一、证书管理 进入 证书管…

B站基于Apache Ranger的大数据权限服务的技术演进

01 背景 随着云计算、大数据技术的日趋成熟&#xff0c;复杂多元、规模庞大的数据所蕴含的经济价值和社会价值逐步凸显&#xff0c;数据安全也是企业面临的巨大挑战&#xff0c;B站一直致力于对用户隐私数据的保护。 02 Ranger概述 2.1 用户认证 提到安全&#xff0c;就不得不…

iMazing如何备份手机资料 iPhone的资料可以传到iPad里吗 iphone备份到mac 苹果导入备份

在当今信息化快速发展的时代&#xff0c;手机已经成为我们生活中不可或缺的一部分。随着资料的积累&#xff0c;备份手机数据成了一个重要的问题。本文将介绍iMazing如何备份手机资料&#xff0c;并为大家解答“iPhone的资料可以传到iPad里吗”这一问题。这不仅可以帮助你有效管…

2024-简单点-观察者模式

先看代码&#xff1a; # 导入未来模块以支持类型注解 from __future__ import annotations# 导入抽象基类模块和随机数生成器 from abc import ABC, abstractmethod from random import randrange# 导入列表类型注解 from typing import List# 定义观察者模式中的主体接口&…

出海企业如何从海外云手机中受益?

随着全球化的推进&#xff0c;越来越多的企业开始将目光投向海外市场。然而&#xff0c;不同国家和地区的网络环境、政策限制&#xff0c;以及语言文化的差异&#xff0c;给出海企业的市场拓展带来了诸多挑战。在这一背景下&#xff0c;海外云手机作为一种新兴解决方案&#xf…

Fastgpt配合chatglm+m3e或ollama+m3e搭建个人知识库

概述&#xff1a; 人工智能大语言模型是近年来人工智能领域的一项重要技术&#xff0c;它的出现标志着自然语言处理领域的重大突破。这些模型利用深度学习和大规模数据训练&#xff0c;能够理解和生成人类语言&#xff0c;为各种应用场景提供了强大的文本处理能力。AI大语言模…

ARL资产侦察灯塔系统

1、资产侦察灯塔系统搭建 1.1、系统要求 目前暂不支持 Windows&#xff0c;Linux 和 MAC 建议采用 Docker 运行&#xff0c;系统配置最低 2 核 4G。 由于自动资产发现过程中会有大量的的发包&#xff0c;建议采用云服务器可以带来更好的体验 实验环境&#xff1a; 系统&…

c++命令行解析开源库cxxopts上手教程

文章目录 cxxopts快速入门1. cmake环境配置2. 定义解析的规则3. 使用例子 cxxopts 简介 cxxopts是一个轻量级的C命令行解析库&#xff0c;它提供了易于使用的API来定义和解析命令行选项。它支持多种类型的选项&#xff0c;并且允许用户自定义选项的处理逻辑。 项目地址&#x…

微信小程序(六)定位搜索

一、引言 作者上一章讲了微信小程序的地图实现微信小程序&#xff08;五&#xff09;地图-CSDN博客&#xff0c;但是还有一个功能是和地图紧密结合的&#xff0c;那就是位置搜索定位&#xff0c;这里作者讲讲实现和原理&#xff0c;包括城市筛选。 二、定位搜索实现 1、位置搜…