Come si può sapere la versione di React in esecuzione in fase di esecuzione nel browser?

C'è un modo per conoscere la versione runtime di React nel browser?

React.version è quello che stai cercando.

Tuttavia, non è documentato (per quanto ne so) quindi potrebbe non essere una funzionalità stabile (ovvero, sebbene improbabile, potrebbe scomparire o cambiare nelle versioni future).

Esempio con Reactimportato come 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>

Esempio con Reactimportato come modulo

import React from 'react';

console.log(React.version);

Ovviamente, se importi Reactcome modulo, non sarà nell'ambito globale. Il codice sopra è pensato per essere raggruppato con il resto della tua app, ad esempio usando webpack . Praticamente non funzionerà mai se utilizzato nella console di un browser (utilizza un input nudo).

Questo secondo approccio è quello consigliato. La maggior parte dei siti web lo utilizzerà. create-react-app fa questo (usa webpack dietro le quinte). In questo caso, Reactè incapsulato e generalmente non è accessibile affatto al di fuori del bundle (ad esempio nella console di un browser).

Dalla riga di comando:

npm view react version
npm view react-native version

Apri Chrome Dev Tools o equivalente ed esegui require('React').versionnella console.

Funziona anche su siti Web come Facebook per scoprire quale versione stanno utilizzando.

Con React Devtools installato puoi eseguirlo dalla console del browser:

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

Che produce qualcosa come:

react-dom: 16.12.0

Non è certo che le variabili ECMAScript globali siano state esportate e html / css non indica necessariamente React. Quindi guarda nel file .js.

Metodo 1: guarda in ECMAScript:

Il numero di versione viene esportato da entrambi i moduli react-dom e react, ma questi nomi vengono spesso rimossi dal bundling e la versione viene nascosta all'interno di un contesto di esecuzione a cui non è possibile accedere. Un punto di interruzione intelligente può rivelare direttamente il valore, oppure puoi cercare l'ECMAScript:

1. Carica la pagina Web (puoi provare https://www.instagram.com sono dei Coolaider totali)
2. Apri gli Strumenti per sviluppatori di Chrome nella scheda Sorgenti (control + shift + i o command + shift + i)
   1. Gli strumenti di sviluppo si aprono nella scheda Sorgenti
3. Nell'estrema destra della barra dei menu in alto, fai clic sui puntini di sospensione verticali e seleziona Cerca in tutti i file
4. Nella casella di ricerca in basso a sinistra, digita FIRED in lettere maiuscole, deseleziona la casella di controllo Ignora maiuscole , digita Invio
   1. Una o più corrispondenze vengono visualizzate di seguito. La versione è un'esportazione molto simile alla stringa di ricerca simile alla versione: "16.0.0"
5. Se il numero di versione non è immediatamente visibile: fare doppio clic su una riga che inizia con un numero di riga
   1. ECMAScript viene visualizzato nel riquadro centrale
6. Se il numero di versione non è immediatamente visibile: fai clic sulle due parentesi graffe in basso a sinistra del riquadro ECMAScript {}
   1. ECMAScript è riformattato e più facile da leggere
7. Se il numero di versione non è immediatamente visibile: scorri verso l'alto e verso il basso di alcune righe per trovarlo o prova un'altra chiave di ricerca
   1. Se il codice non è minimizzato, cerca ReactVersion Dovrebbero esserci 2 hit con lo stesso valore
   2. Se il codice è minimizzato, cerca SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED o react-dom
   3. Oppure cerca la stringa della versione probabile: "15. o " 16. o anche "0,15

Metodo 2: utilizza un punto di interruzione DOM:

1. Carica la pagina renderizzata da React
2. Fare clic con il pulsante destro del mouse su un elemento React (qualsiasi cosa, come un campo di input o una casella) e selezionare Inspect Element
   1. Strumenti per sviluppatori di Chrome visualizza il Elementsriquadro
3. Il più in alto possibile nell'albero dall'elemento selezionato, ma non più in alto dell'elemento radice React (spesso un div direttamente all'interno del corpo con id root: <div id = "root"> ), fai clic con il pulsante destro del mouse su un elemento e selezionaBreak On… - subtree modifications
   1. Nota: è possibile confrontare i contenuti della scheda Elementi (stato corrente DOM) con la risposta per la stessa risorsa nella scheda Reti. Questo potrebbe rivelare l'elemento radice di React
4. Ricarica la pagina facendo clic su Ricarica a sinistra della barra degli indirizzi
   1. Gli Strumenti per sviluppatori di Chrome si fermano al punto di interruzione e visualizzano il Sourcesriquadro
5. Nel riquadro più a destra, esamina il Call Stacksotto-riquadro
6. Il più in basso possibile nello stack di chiamate dovrebbe esserci una rendervoce, questa èReactDOM.render
7. Fare clic sulla riga sottostante render, ad es. il codice che richiama render
8. Il riquadro centrale ora visualizza ECMAScript con un'espressione contenente .render evidenziato
9. Posiziona il cursore del mouse sull'oggetto utilizzato per richiamare il rendering, is. il react-dommodulo esporta l'oggetto
   1. se la riga del codice è: Object (u.render) (... , passa il mouse sopra u
10. Viene visualizzata una finestra di descrizione comando contenente version: "15.6.2", ad es. tutti i valori esportati dareact-dom

La versione viene anche iniettata negli strumenti di sviluppo di React, ma per quanto ne so non viene visualizzata da nessuna parte.

Apri la console, quindi esegui window.React.version.

Questo ha funzionato per me in Safari e Chrome durante l'aggiornamento da 0.12.2 a 16.2.0.

Nel file index.js, sostituisci semplicemente il componente App con "React.version". Per esempio

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

L'ho verificato con React v16.8.1

Per un'app creata con create-react-app sono riuscito a vedere la versione:

1. Apri Chrome Dev Tools / Firefox Dev Tools,
2. Cerca e apri il file main.XXXXXXXX.js dove XXXXXXXX è un hash di build / potrebbe essere diverso,
3. Opzionale: formatta la sorgente facendo clic su {} per mostrare la sorgente formattata,
4. Cerca come testo all'interno del sorgente per react-dom,
5. in Chrome è stato trovato: "react-dom": "^ 16.4.0",
6. in Firefox è stato trovato: 'react-dom': '^ 16.4.0'

L'app è stata distribuita senza mappa di origine.

In un progetto esistente un modo semplice per vedere la versione di React è andare su un rendermetodo di qualsiasi componente e aggiungere:

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

Questo presuppone che importi React in questo modo: import React from 'react'

Prima installa gli strumenti di sviluppo React se non sono installati, quindi utilizza il codice di esecuzione seguente nella console del browser:

__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.get(1).version