Comment peut-on connaître la version de React en cours d'exécution dans le navigateur?

Question

Y a-t-il un moyen de connaître la version d'exécution de React dans le navigateur?

Answer 1

React.version est ce que vous recherchez.

Cependant, ceci n'est pas documenté (autant que je sache) donc cela peut ne pas être une fonction stable (c'est-à-dire que, bien que peu probable, elle pourrait disparaître ou changer dans les versions futures).

Exemple avec React importé en tant que script

const REACT_VERSION = React.version;

let root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  Version de React : {REACT_VERSION}
);

Exemple avec React importé en tant que module

import { version } from 'react';

console.log(version);

Évidemment, si vous importez React en tant que module, il ne sera pas dans la portée globale. Le code ci-dessus est destiné à être regroupé avec le reste de votre application, par exemple en utilisant webpack. Il ne fonctionnera pratiquement jamais s'il est utilisé dans la console d'un navigateur (il utilise des imports nus).

Cette deuxième approche est celle recommandée. La plupart des sites Web l'utiliseront. create-react-app fait cela (il utilise webpack en arrière-plan). Dans ce cas, React est encapsulé et n'est généralement pas du tout accessible en dehors du bundle (par exemple, dans la console d'un navigateur).

Answer 2

Ouvrez les outils de développement Chrome ou équivalents et exécutez require('React').version dans la console.

Cela fonctionne également sur des sites web comme Facebook pour découvrir quelle version ils utilisent.

Answer 3

Il n'est pas certain que des variables ECMAScript globales aient été exportées et html/css ne signifie pas nécessairement React. Alors regardez dans le .js.

Méthode 1 : Regardez dans ECMAScript :

Le numéro de version est exporté à la fois par les modules react-dom et react mais ces noms sont souvent supprimés lors de l'emballage et la version est cachée à l'intérieur d'un contexte d'exécution inaccessible. Un point d'arrêt astucieux peut révéler directement la valeur, ou vous pouvez chercher dans l'ECMAScript :

1. Chargez la page Web (vous pouvez essayer https://www.instagram.com ce sont des Coolaiders totales)
2. Ouvrez les outils de développement Chrome dans l'onglet Sources (contrôle+shift+i ou commande+shift+i)
   1. Les outils de développement s'ouvrent sur l'onglet Sources
3. Tout à droite de la barre de menu supérieure, cliquez sur les trois points verticaux et sélectionnez rechercher dans tous les fichiers
4. Dans la boîte de recherche en bas à gauche, tapez FIRED en majuscules, décochez la case Ignorer la casse, tapez Entrée
   1. Un ou plusieurs correspondances apparaissent en dessous. La version est exportée très près de la chaîne de recherche ressemblant à version : "16.0.0"
5. Si le numéro de version n'est pas immédiatement visible : double-cliquez sur une ligne commençant par un numéro de ligne
   1. ECMAScript apparaît dans le volet central
6. Si le numéro de version n'est pas immédiatement visible : cliquez sur les deux crochets en bas à gauche du volet ECMAScript {}
   1. ECMAScript est reformaté et plus facile à lire
7. Si le numéro de version n'est pas immédiatement visible : faites défiler quelques lignes vers le haut et vers le bas pour le trouver ou essayez une autre clé de recherche
   1. Si le code n'est pas minifié, recherchez ReactVersion Il devrait y avoir 2 occurrences avec la même valeur
   2. Si le code est minifié, recherchez soit SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED soit react-dom
   3. Ou recherchez la chaîne de version probable elle-même : "15. ou "16. ou même "0.15

Méthode 2 : Utiliser un point d'arrêt DOM :

1. Chargez la page rendue par React

2. Cliquez avec le bouton droit sur un élément React (n'importe quoi, comme un champ de saisie ou une boîte) et sélectionnez Inspecter l'élément

   1. Les outils de développement Chrome affichent le volet Elements

3. Aussi haut que possible dans l'arborescence depuis l'élément sélectionné, mais pas plus haut que l'élément racine React (souvent une div directement à l'intérieur du corps avec l'id root :

   ), cliquez avec le bouton droit sur un élément et sélectionnez Interrompre sur… - modifications de sous-arborescence

   1. Remarque : Il est possible de comparer le contenu de l'onglet Elements (état actuel du DOM) avec la réponse pour la même ressource sur l'onglet Network. Cela peut révéler l'élément racine de React

4. Rechargez la page en cliquant sur Recharger à gauche de la barre d'adresse

   1. Les outils de développement Chrome s'arrêtent au point d'arrêt et affichent le volet Sources

5. Dans le volet le plus à droite, examinez le sous-volet Pile d'appels

6. Dans la pile d'appels aussi bas que possible, il devrait y avoir une entrée render, c'est ReactDOM.render

7. Cliquez sur la ligne en dessous de render, c'est-à-dire le code qui invoque le rendu

8. Le volet central affiche maintenant ECMAScript avec une expression contenant .render surlignée

9. Passez le curseur de la souris sur l'objet utilisé pour invoquer le rendu, c'est-à-dire l'objet exporté par le module react-dom

   1. si la ligne de code est : Object(u.render)(…, passez le curseur sur le u

10. Une fenêtre d'info s'affiche contenant version : "15.6.2", c'est-à-dire toutes les valeurs exportées par react-dom

La version est également injectée dans les outils de développement React, mais autant que je sache, elle n'est affichée nulle part.

Answer 4

Ouvrez la console, puis exécutez window.React.version.

Cela a fonctionné pour moi dans Safari et Chrome lors de la mise à jour de la version 0.12.2 à 16.2.0.

Answer 5

Pour une application créée avec create-react-app, j'ai réussi à voir la version :

1. Ouvrez les outils de développement de Chrome / Firefox,
2. Recherchez et ouvrez le fichier main.XXXXXXXX.js où XXXXXXXX est un hash de compilation / peut être différent,
3. Optionnel : formatez le code source en cliquant sur les {} pour afficher le code source formaté,
4. Recherchez le texte "react-dom" dans le code source,
5. dans Chrome, il a été trouvé : "react-dom": "^16.4.0",
6. dans Firefox, il a été trouvé : 'react-dom': '^16.4.0'

L'application a été déployée sans source map.