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

如何查看react的版本号

方法一:通过 package.json 查看(静态查看)

  1. 打开项目根目录下的 package.json 文件
  2. dependenciesdevDependencies 字段中查找 reactreact-dom 的版本号:
    {
      "dependencies": {
        "react": "^18.2.0",     // React 核心库版本
        "react-dom": "^18.2.0"  // React DOM 渲染器版本
      }
    }
    
    特点
    ✅ 直接查看项目配置的预期版本
    ⚠️ 实际安装版本可能因锁文件(package-lock.json/yarn.lock)略有不同

方法二:通过命令行查看(动态验证)

使用 npmyarn
# 查看项目中实际安装的 React 版本
npm list react       # 本地项目版本
npm list -g react    # 全局安装版本(通常 React 不全局安装)

# 使用 yarn
yarn list react
输出示例:
my-react-app@0.1.0 /path/to/project
└── react@18.2.0 

特点
✅ 精准显示实际安装版本
⚠️ 需在项目根目录执行(确保存在 node_modules


方法三:在代码中动态打印版本

在 React 组件文件中添加以下代码:

import React from 'react';

console.log('React Version:', React.version);

function App() {
  return <div>Check console for React version</div>;
}

export default App;

运行结果
在浏览器控制台中会输出类似:

React Version: 18.2.0

特点
✅ 验证运行时实际使用的 React 版本
⚠️ 需确保 React 已正确引入且项目处于开发模式


方法四:通过浏览器开发者工具

  1. 打开浏览器的 开发者工具(F12)
  2. 切换到 Console 标签页
  3. 输入以下命令并回车:
    React.version
    

特点
✅ 直接查看当前页面使用的 React 版本
⚠️ 仅适用于开发环境(生产环境可能无法访问 React 全局对象)


版本查看场景对比

方法适用场景精度便捷性
package.json查看项目预期版本中等⭐⭐⭐⭐
npm list/yarn list验证实际安装版本⭐⭐⭐
代码打印验证运行时版本⭐⭐
浏览器控制台快速调试时查看⭐⭐⭐⭐

常见问题

  1. 为什么 package.jsonnpm list 显示的版本不一致?

    • 可能未执行 npm install 更新依赖
    • 版本号使用了语义化版本符号(如 ^18.2.0 允许安装 18.x.x 的最新版本)
  2. 如何升级 React 版本?

    npm install react@latest react-dom@latest
    # 或指定版本
    npm install react@18.2.0 react-dom@18.2.0
    
  3. 全局安装了 React,为什么项目中没有生效?

    • React 必须作为项目本地依赖安装,全局安装仅用于命令行工具(如 create-react-app

通过以上方法,您可以快速确认 React 版本,确保开发环境与依赖的一致性。

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

相关文章:

  • 计算机网络 第一章 概述(Overview)
  • 《机器学习数学基础》补充资料:矩阵的LU分解
  • 【解决】OnTriggerEnter/OnTriggerExit 调用匿名委托误区的问题
  • Wireshark:自定义类型帧解析
  • el-switch切换之前二次确认
  • HarmonyOS NEXT组件深度全解:十大核心组件开发指南与实战
  • 三个小时学完vue3 —— 简单案例(二)
  • 力扣 划分字母区间
  • linux有哪些常用命令?
  • 华为在不同发展时期的战略选择(节选)
  • 达梦数据库系列之安装及Mysql数据迁移
  • Spring 集成 MyBatis 操作指南(详细实例)
  • 数据结构:树的概念
  • React Router 完全指南:从基础到高级实践
  • 数据基础4: 线性代数基础行列式(矩阵)
  • ctfshow——域名TXT记录泄露
  • React状态管理进阶(四):从Redux到原子革命的终极指南
  • 基于django图书信息管理系统的搭建(增删改查)
  • MySQL系列之远程管理(安全)
  • 前端性能优化
  • 【Java】Tomcat日志
  • ERP系统的库存模块业务逻辑及设计
  • 剖析Kafka持久化底层原理
  • 使用 Kubeflow 和 Ray 构建机器学习平台
  • 使用Semantic Kernel:对DeepSeek添加自定义插件
  • 哈工大《计算机组成原理》第一章笔记
  • 网络参考模型(全)、ARP协议
  • 【Java面试】创建线程有哪几种方式
  • An Efficient Anti-Interference Imaging Technology for Marine Radar 论文阅读
  • 第6篇:面向对象编程重构系统