Como saber a versão do React rodando em tempo de execução no navegador?

Existe uma maneira de saber a versão runtime do React no navegador?

React.version é o que você está procurando.

No entanto, ele não está documentado (até onde eu sei), portanto pode não ser um recurso estável (ou seja, embora improvável, pode desaparecer ou mudar em versões futuras).

Exemplo com Reactimportado como um 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>

Exemplo com Reactimportado como um módulo

import React from 'react';

console.log(React.version);

Obviamente, se você importar Reactcomo módulo, não estará no escopo global. O código acima deve ser empacotado com o resto do seu aplicativo, por exemplo, usando o webpack . Praticamente nunca funcionará se for usado no console de um navegador (está usando entrada simples).

Esta segunda abordagem é a recomendada. A maioria dos sites vai usá-lo. create- react -app faz isso (ele está usando webpack nos bastidores ). Nesse caso, Reacté encapsulado e geralmente não pode ser acessado fora do pacote (por exemplo, no console de um navegador).

Na linha de comando:

npm view react version
npm view react-native version

Abra o Chrome Dev Tools ou equivalente e execute require('React').versionno console.

Isso funciona em sites como o Facebook também para descobrir qual versão eles estão usando.

Com o React Devtools instalado, você pode executar isso no console do navegador:

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

O que resulta em algo como:

react-dom: 16.12.0

Não é certo que quaisquer variáveis ​​ECMAScript globais tenham sido exportadas e html / css não indica necessariamente React. Portanto, olhe no .js.

Método 1: Procure no ECMAScript:

O número da versão é exportado por ambos os módulos react-dom e react, mas esses nomes são frequentemente removidos pelo empacotamento e a versão é escondida dentro de um contexto de execução que não pode ser acessado. Um ponto de interrupção inteligente pode revelar o valor diretamente ou você pode pesquisar no ECMAScript:

1. Carregue a página da Web (você pode tentar https://www.instagram.com eles são totalmente Coolaiders)
2. Abra as Ferramentas do desenvolvedor do Chrome na guia Fontes (control + shift + i ou command + shift + i)
   1. Ferramentas de desenvolvimento abertas na guia Fontes
3. Bem à direita da barra de menu superior, clique nas reticências verticais e selecione pesquisar todos os arquivos
4. Na caixa de pesquisa abaixo à esquerda digite FIRED em letras maiúsculas, desmarque a caixa Ignorar maiúsculas e minúsculas , digite Enter
   1. Uma ou mais correspondências aparecem abaixo. A versão é uma exportação muito próxima da string de pesquisa, parecida com a versão: "16.0.0"
5. Se o número da versão não estiver imediatamente visível: clique duas vezes em uma linha que comece com um número de linha
   1. ECMAScript aparece no painel do meio
6. Se o número da versão não estiver imediatamente visível: clique nas duas chaves na parte inferior esquerda do painel ECMAScript {}
   1. ECMAScript é reformatado e mais fácil de ler
7. Se o número da versão não estiver imediatamente visível: role para cima e para baixo algumas linhas para encontrá-lo ou tente outra tecla de pesquisa
   1. Se o código não estiver reduzido, procure por ReactVersion. Deve haver 2 resultados com o mesmo valor
   2. Se o código for reduzido, procure SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED ou react -dom
   3. Ou pesquise a própria string de versão provável: "15. ou " 16. ou mesmo "0,15

Método 2: use um ponto de interrupção DOM:

1. Carregue a página renderizada pelo React
2. Clique com o botão direito em um elemento React (qualquer coisa, como um campo de entrada ou uma caixa) e selecione Inspect Element
   1. As Ferramentas do desenvolvedor do Chrome exibem o Elementspainel
3. O mais alto possível na árvore a partir do elemento selecionado, mas não mais alto que o elemento raiz React (geralmente um div diretamente dentro do corpo com a raiz id: <div id = "root"> ), clique com o botão direito em um elemento e selecioneBreak On… - subtree modifications
   1. Observação: é possível comparar o conteúdo da guia Elementos (estado atual do DOM) com a resposta para o mesmo recurso na guia Redes. Isso pode revelar o elemento raiz do React
4. Recarregue a página clicando em Recarregar, à esquerda da barra de endereço
   1. As Ferramentas do desenvolvedor do Chrome param no ponto de interrupção e exibem o Sourcespainel
5. No painel mais à direita, examine o Call Stacksubpainel
6. O mais abaixo na pilha de chamadas possível, deve haver uma renderentrada, esta éReactDOM.render
7. Clique na linha abaixo render, ou seja. o código que invoca render
8. O painel do meio agora exibe ECMAScript com uma expressão contendo .render em destaque
9. Passe o cursor do mouse sobre o objeto usado para invocar o render, is. o react-dommódulo exporta objeto
   1. se a linha de código for: Object (u.render) (... , passe o mouse sobre u
10. Uma janela de dica de ferramenta é exibida contendo version: "15.6.2", ou seja. todos os valores exportados porreact-dom

A versão também é injetada nas ferramentas de desenvolvimento do React, mas até onde eu sei não é exibida em lugar nenhum.

Abra o console e execute window.React.version.

Isso funcionou para mim no Safari e no Chrome durante a atualização de 0.12.2 para 16.2.0.

No arquivo index.js, simplesmente substitua o componente App por "React.version". Por exemplo

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

Eu verifiquei isso com React v16.8.1

Para um aplicativo criado com create-react-app , consegui ver a versão:

1. Abra Chrome Dev Tools / Firefox Dev Tools,
2. Pesquise e abra o arquivo main.XXXXXXXX.js, onde XXXXXXXX é um hash de builds / pode ser diferente,
3. Opcional: formate a fonte clicando em {} para mostrar a fonte formatada,
4. Pesquise como texto dentro da fonte para reação,
5. no Chrome foi encontrado: "react-dom": "^ 16.4.0",
6. no Firefox foi encontrado: 'react-dom': '^ 16.4.0'

O aplicativo foi implantado sem mapa de origem.

Em um projeto existente, uma maneira simples de ver a versão do React é ir a um rendermétodo de qualquer componente e adicionar:

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

Isso pressupõe que você importou o React assim: import React from 'react'

Primeiro instale as ferramentas de desenvolvimento React se não estiverem instaladas e, em seguida, use o código de execução abaixo no console do navegador:

__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.get(1).version