web-dev-qa-db-fra.com

Comment savoir 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?

javascriptreactjs
55
leojh

React.version est ce que vous recherchez.

Toutefois, il n’est pas documenté (pour autant que je sache), donc il se peut que ce ne soit pas une fonctionnalité stable (c’est-à-dire qu’elle soit improbable mais qu’elle puisse disparaître ou changer dans les prochaines versions).

Exemple avec React importé en tant que script

const REACT_VERSION = React.version;

ReactDOM.render(
  <div>React version: {REACT_VERSION}</div>,
  document.getElementById('content')
);
<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="content"></div>

Exemple avec React importé en tant que module

const React = require('react');

console.log(React.version);

Évidemment, si vous importez React en tant que module, cela ne sera pas dans la portée globale. Le code ci-dessus est destiné à être intégré au reste de votre application, par exemple. en utilisant webpack . Cela ne fonctionnera pratiquement jamais s'il est utilisé dans la console d'un navigateur.

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

75
Quentin Roy

Ouvrez Chrome Dev Tools ou son équivalent et exécutez require('React').version dans la console. 

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

12
Johan Henriksson

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 de rupture intelligent peut révéler la valeur directement, ou vous pouvez rechercher le script 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 (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 menus supérieure, cliquez sur les ellipses verticales et sélectionnez rechercher dans tous les fichiers.
  4. Dans le champ de recherche situé à gauche, tapez TIR&EACUTE; en lettres 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 à 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 de quelques lignes vers le haut ou le bas 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 limité, 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: Utiliser un point d'arrêt DOM:

  1. Charger la page rendue par React
  2. Cliquez avec le bouton droit de la souris sur un élément React (tout ce qui ressemble à un champ de saisie ou une zone) et sélectionnez Inspect Element
    1. Chrome Developer Tools affiche le volet Elements.
  3. Aussi haut que possible dans 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 l'id root: <div id = "root">), cliquez avec le bouton droit de la souris sur un élément. et sélectionnez Break 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 sous 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. 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 Call Stack.
  6. Aussi loin que possible de la pile d'appels, il devrait y avoir une entrée render, c'est ReactDOM.render
  7. Cliquez sur la ligne ci-dessous render, c'est-à-dire. le code qui appelle le rendu
  8. Le volet du milieu affiche maintenant ECMAScript avec une expression contenant .render en surbrillance
  9. Placez le curseur de la souris sur l'objet utilisé pour appeler le rendu, is. le module react-dom exporte un objet
    1. si la ligne de code va: Object (u.render) (…, survolez le u 
  10. Une fenêtre d'info-bulle contenant version: "15.6.2" est affichée. toutes les valeurs exportées par react-dom

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

5
Harald Rudell

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

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

3
jgrumps

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

  1. Ouvrez Outils de développement Chrome/Outils de développement Firefox,
  2. Rechercher et ouvrir le fichier main.XXXXXXXX.js où XXXXXXXX est un hachage de construction/pourrait être différent
  3. Facultatif: formatez la source en cliquant sur {} pour afficher la source formatée,
  4. Rechercher en tant que texte dans le 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.

1
Fierascu Gheorghe

Dans un projet existant, un moyen très simple de voir la version de React consiste à accéder à la méthode render de tout composant et à ajouter:

<p>{React.version}<p>

Je suppose que vous importez Réagir comme ceci: import React from 'react'

0
DrNio

Dans le fichier index.js, remplacez simplement App Component par "React.version" .

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

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

0
Faiyaz Alam