¿Cómo se puede saber la versión de React que se ejecuta en tiempo de ejecución en el navegador?

¿Hay alguna forma de conocer la versión en tiempo de ejecución de React en el navegador?

React.version es lo que buscas.

Sin embargo, no está documentado (que yo sepa) por lo que puede que no sea una característica estable (es decir, aunque es poco probable, puede desaparecer o cambiar en versiones futuras).

Ejemplo con Reactimportado como script

const REACT_VERSION = React.version;

ReactDOM.render(
  <div>React version: {REACT_VERSION}</div>,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

Ejemplo con Reactimportado como módulo

import React from 'react';

console.log(React.version);

Obviamente, si importa Reactcomo módulo, no estará en el ámbito global. El código anterior está destinado a integrarse con el resto de su aplicación, por ejemplo, mediante webpack . Prácticamente nunca funcionará si se usa en la consola de un navegador (está usando entrada simple).

Este segundo enfoque es el recomendado. La mayoría de los sitios web lo usarán. create-react-app hace esto (está usando webpack detrás de escena). En este caso, Reactestá encapsulado y generalmente no es accesible fuera del paquete (por ejemplo, en la consola de un navegador).

Desde la línea de comando:

npm view react version
npm view react-native version

Abra Chrome Dev Tools o equivalente y ejecútelo require('React').versionen la consola.

Eso también funciona en sitios web como Facebook para averiguar qué versión están usando.

Con React Devtools instalado, puede ejecutar esto desde la consola del navegador:

__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.forEach(r => console.log(`${r.rendererPackageName}: ${r.version}`))

Lo que genera algo como:

react-dom: 16.12.0

No es seguro que se hayan exportado variables globales de ECMAScript y html / css no necesariamente indica React. Así que busque en el .js.

Método 1: busque en ECMAScript:

Ambos módulos, react-dom y react, exportan el número de versión, pero esos nombres a menudo se eliminan mediante la agrupación y la versión se oculta dentro de un contexto de ejecución al que no se puede acceder. Un punto de interrupción inteligente puede revelar el valor directamente, o puede buscar en ECMAScript:

1. Cargue la página web (puede probar https://www.instagram.com , son refrigerantes totales)
2. Abra Chrome Developer Tools en la pestaña Fuentes (control + shift + i o command + shift + i)
   1. Las herramientas de desarrollo se abren en la pestaña Fuentes
3. En el extremo derecho de la barra de menú superior, haga clic en la elipsis vertical y seleccione buscar todos los archivos
4. En el cuadro de búsqueda abajo a la izquierda, escriba FIRED en mayúsculas, desmarque la casilla de verificación Ignorar mayúsculas y minúsculas , escriba Enter
   1. A continuación, aparecen una o más coincidencias. La versión es una exportación muy cercana a la cadena de búsqueda que se parece a la versión: "16.0.0"
5. Si el número de versión no es visible de inmediato: haga doble clic en una línea que comience con un número de línea
   1. ECMAScript aparece en el panel central
6. Si el número de versión no es visible de inmediato: haga clic en las dos llaves en la parte inferior izquierda del panel de ECMAScript {}
   1. ECMAScript está reformateado y es más fácil de leer
7. Si el número de versión no es visible de inmediato: desplácese hacia arriba y hacia abajo algunas líneas para encontrarlo o pruebe con otra tecla de búsqueda
   1. Si el código no está reducido, busque ReactVersion Debería haber 2 resultados con el mismo valor
   2. Si el código está reducido, busque SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED o react-dom
   3. O busque la cadena de la versión probable: "15. o " 16. o incluso "0,15

Método 2: use un punto de interrupción DOM:

1. Cargue la página renderizada por React
2. Haga clic derecho en un elemento React (cualquier cosa, como un campo de entrada o un cuadro) y seleccione Inspect Element
   1. Chrome Developer Tools muestra el Elementspanel
3. Tan alto como sea posible en el árbol desde el elemento seleccionado, pero no más alto que el elemento raíz de React (a menudo un div directamente dentro del cuerpo con id root: <div id = "root"> ), haga clic derecho en un elemento y seleccioneBreak On… - subtree modifications
   1. Nota: Es posible comparar el contenido de la pestaña Elementos (estado actual del DOM) con la respuesta para el mismo recurso en la pestaña Redes. Esto puede revelar el elemento raíz de React.
4. Vuelva a cargar la página haciendo clic en Volver a cargar a la izquierda de la barra de direcciones
   1. Chrome Developer Tools se detiene en el punto de interrupción y muestra el Sourcespanel
5. En el panel de la derecha, examine el Call Stacksubpanel
6. Tan abajo como sea posible en la pila de llamadas, debería haber una renderentrada, esto esReactDOM.render
7. Haga clic en la línea de abajo render, es decir. el código que invoca render
8. El panel central ahora muestra ECMAScript con una expresión que contiene .render resaltado
9. Pase el cursor del mouse sobre el objeto utilizado para invocar render, is. el react-dommódulo exporta el objeto
   1. si la línea de código dice: Object (u.render) (… , pase el cursor sobre la u
10. Se muestra una ventana de información sobre herramientas que contiene version: "15.6.2", es decir. todos los valores exportados porreact-dom

La versión también se inyecta en las herramientas de desarrollo de React, pero hasta donde yo sé no se muestra en ninguna parte.

Abra la consola, luego ejecute window.React.version.

Esto funcionó para mí en Safari y Chrome mientras actualizaba de 0.12.2 a 16.2.0.

En el archivo index.js, simplemente reemplace el componente de la aplicación con "React.version". P.ej

ReactDOM.render(React.version, document.getElementById('root'));

He comprobado esto con React v16.8.1

Para una aplicación creada con create-react-app logré ver la versión:

1. Abra Chrome Dev Tools / Firefox Dev Tools,
2. Busque y abra el archivo main.XXXXXXXX.js donde XXXXXXXX es un hash de compilación / podría ser diferente,
3. Opcional: formatee la fuente haciendo clic en {} para mostrar la fuente formateada,
4. Buscar como texto dentro de la fuente para react-dom,
5. en Chrome se encontró: "react-dom": "^ 16.4.0",
6. en Firefox se encontró: 'react-dom': '^ 16.4.0'

La aplicación se implementó sin mapa de origen.

En un proyecto existente, una forma sencilla de ver la versión de React es ir a un rendermétodo de cualquier componente y agregar:

<p>{React.version}</p>

Esto supone que importa React así: import React from 'react'

Primero instale las herramientas de desarrollo de React si no están instaladas y luego use el código de ejecución a continuación en la consola del navegador:

__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.get(1).version