我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

利用create-react-app默认安装的cra模版,里面的react版本号是18.3.1。但是,目前安装依赖的时候,会各种报错,提示和react@19有关。那么,本文就致力于react的版本号问题。

苏南大叔:如何安装最新版React?如何代码判断React版本号? - react代码判断版本号
如何安装最新版React?如何代码判断React版本号?(图3-1)

苏南大叔的“程序如此灵动”博客,记录苏南大叔的代码编程经验总结。本文测试环境:nodejs@20.18.0create-react-app@5.0.1react@19.0.0

package.json 版本号

一般来说,都是从package.json或者package-lock.json里面找线索。一般来说,可以看到下面的字样:

{
  "dependencies": {
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  }
}

从而判断React版本号:19.0.0。参考文章:

代码查看版本号

在代码里面,引入React之后,直接打印react.version,这个是最靠谱的方案。

【1】基于各种工具的react项目,可以npm start自动编译import相关语句,所以可以执行代码:

import React from "react";
console.log(React.version);

【2】单文件执行React,这样的写法,虽然很罕见。但是,理论上来说,完全可行。直接node t.js即可。

const React = require("react");
console.log(React.version);

查看可用版本号

执行npm i命令的时候,因为不知道最新版本的react@19的小版本号,所以在指定版本号安装的时候,会有些畏手畏脚。可以通过下面的方法,查看所有的React的版本号。

npm view react versions --json

苏南大叔:如何安装最新版React?如何代码判断React版本号? - 安装react-19
如何安装最新版React?如何代码判断React版本号?(图3-2)

参考文章:

安装最新版

目前的React稳定版是18.3.1,所以正常情况下来说,不指定版本号的话,就直接安装得到这个版本。当然,如果不直接指定版本号。随着时间的变化,同样的命令安装得到的结果,也是不一样的。

苏南大叔:如何安装最新版React?如何代码判断React版本号? - 安装版本测试
如何安装最新版React?如何代码判断React版本号?(图3-3)

发稿日一看,npm i react默认就是19.0.0了,略显尴尬,本段文字可略过。
npm i react --save

如果想要体验最新版的19.0.0,可以指定版本号。

npm i react@19.0.0 --save

或者指定版本号为latest,就最靠谱了。

npm i react@latest --save

目前还有React@19.1.0,所以这段文章还是有点意义的。比如:

npm i react@19.1.0-canary-fc8a898d-20241226 --save

React 和 ReactDom

ReactReactDom,总是同时出现。那么,如果静下心来想想。两者的关系是啥呢?

  • React‌:包含React库的核心功能,用于构建和管理React组件,支持多平台(如Web、移动端、服务器端等)。

*‌ ReactDOM‌:专注于将React组件渲染到浏览器DOM上,提供与DOM互动的方法,支持服务器端渲染。

npm i react react-dom --save

下面的这些import命令,也可以从侧面上说明reactreact-dom的区别。

import React, { useCallback } from "react";
import ReactDOM from 'react-dom/client';
import { renderToPipeableStream } from "react-dom/server";

结语

更多苏南大叔总结的React经验文章,请点击:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   react