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

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

React.version est ce que vous recherchez.

Cependant, il n'est pas documenté (pour autant que je sache) donc ce n'est peut-être pas une fonctionnalité stable (c'est-à-dire bien que peu probable, il peut disparaître ou changer dans les versions futures).

Exemple avec Reactimporté sous forme de 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>

Exemple avec Reactimporté en tant que module

import React from 'react';

console.log(React.version);

Évidemment, si vous importez en Reacttant que module, il ne sera pas dans la portée globale. Le code ci-dessus est destiné à être fourni 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 une entrée nue).

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

Depuis la ligne de commande:

npm view react version
npm view react-native version

Ouvrez Chrome Dev Tools ou équivalent et exécutez-le require('React').versiondans la console.

Cela fonctionne également sur des sites Web comme Facebook pour savoir quelle version ils utilisent.

Une fois React Devtools installé, vous pouvez l'exécuter à partir de la console du navigateur:

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

Qui produit quelque chose comme:

react-dom: 16.12.0

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

Méthode 1: Rechercher dans ECMAScript:

Le numéro de version est exporté par les deux modules react-dom et react mais ces noms sont souvent supprimés par regroupement et la version est masquée dans un contexte d'exécution inaccessible. Un point d'arrêt intelligent peut révéler la valeur directement, ou vous pouvez rechercher l'ECMAScript:

1. Chargez la page Web (vous pouvez essayer https://www.instagram.com, ce sont des Coolaiders totaux)
2. Ouvrez les outils de développement Chrome sur l'onglet Sources (Ctrl + Maj + i ou Commande + Maj + i)
   1. Les outils de développement s'ouvrent dans l'onglet Sources
3. Tout à droite de la barre de menu supérieure, cliquez sur les points de suspension verticaux et sélectionnez rechercher tous les fichiers
4. Dans la zone de recherche en bas à gauche, tapez FIRED en majuscules, décochez la case Ignorer la casse , tapez Entrée
   1. Une ou plusieurs correspondances apparaissent ci-dessous. La version est une exportation très proche de la chaîne de recherche ressemblant à la 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 accolades 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 résultats avec la même valeur
   2. Si le code est minifié, recherchez SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED ou 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: utilisez un point d'arrêt DOM:

1. Charger 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 Inspect Element
   1. Les outils de développement Chrome affichent le Elementsvolet
3. Aussi haut que possible dans l'arborescence à partir de l'élément sélectionné, mais pas plus haut que l'élément racine React (souvent un div directement à l'intérieur du corps avec id root: <div id = "root"> ), cliquez avec le bouton droit sur un élément et sélectionnezBreak On… - subtree modifications
   1. Remarque: Il est possible de comparer le contenu de l'onglet Eléments (état actuel du DOM) avec la réponse pour la même ressource sur l'onglet Réseaux. 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. Chrome Developer Tools s'arrête au point d'arrêt et affiche le Sourcesvolet
5. Dans le volet le plus à droite, examinez le Call Stacksous-volet
6. Aussi loin que possible dans la pile d'appels, il devrait y avoir une renderentrée, c'estReactDOM.render
7. Cliquez sur la ligne ci render- dessous , ie. le code qui appelle render
8. Le volet central affiche maintenant ECMAScript avec une expression contenant .render en surbrillance
9. Passez le curseur de la souris sur l'objet utilisé pour appeler le rendu, est. le react-dommodule exporte l'objet
   1. si la ligne de code va: Object (u.render) (… , survolez le u
10. Une fenêtre d'info-bulle s'affiche contenant version: "15.6.2", ie. toutes les valeurs exportées parreact-dom

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

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

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

Dans le fichier index.js, remplacez simplement le composant App par "React.version". Par exemple

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

J'ai vérifié cela avec React v16.8.1

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

1. Ouvrez Chrome Dev Tools / Firefox Dev Tools,
2. Recherchez et ouvrez le fichier main.XXXXXXXX.js où XXXXXXXX est un hachage de builds / pourrait être différent,
3. Facultatif: formatez la source en cliquant sur {} pour afficher la source formatée,
4. Rechercher sous forme de texte dans la source pour react-dom,
5. dans Chrome a été trouvé: "react-dom": "^ 16.4.0",
6. dans Firefox a été trouvé: 'react-dom': '^ 16.4.0'

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

Dans un projet existant, un moyen simple de voir la version React consiste à accéder à une renderméthode de n'importe quel composant et à ajouter:

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

Cela suppose que vous importez React comme ceci: import React from 'react'

Installez d'abord les outils de développement React s'ils ne sont pas installés, puis utilisez le code ci-dessous dans la console du navigateur:

__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.get(1).version