브라우저에서 런타임에 실행되는 React 버전을 어떻게 알 수 있습니까?

브라우저에서 런타임에 실행되는 React 버전을 어떻게 알 수 있습니까?

---

브라우저에서 React의 런타임 버전을 알 수있는 방법이 있습니까?

---

React.version 당신이 찾고있는 것입니다.

(내가 아는 한) 문서화되지 않았으므로 안정적인 기능이 아닐 수 있습니다 (예 : 가능성은 낮지 만 향후 릴리스에서 사라지거나 변경 될 수 있음).

React스크립트 로 가져온 예

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>

React모듈 로 가져온 예

import React from 'react';

console.log(React.version);

분명히 React모듈로 가져 오면 전역 범위에 포함되지 않습니다. 위의 코드는 앱의 나머지 부분에 번들로 제공됩니다 (예 : webpack 사용) . 브라우저의 콘솔에서 사용하면 거의 작동하지 않습니다 (베어 입력 사용).

이 두 번째 방법이 권장되는 방법입니다. 대부분의 웹 사이트에서 사용합니다. create-react-app 이이 작업을 수행합니다 ( 뒤에서 웹팩 사용 ). 이 경우 React는 캡슐화되어 있으며 일반적으로 번들 외부에서 (예 : 브라우저의 콘솔에서) 액세스 할 수 없습니다.

---

Chrome Dev Tools 또는 이와 동등한 도구를 열고 require('React').version콘솔에서 실행 합니다.

Facebook과 같은 웹 사이트에서도 작동하여 사용중인 버전을 알아냅니다.

---

전역 ECMAScript 변수가 내보내 졌는지 확실하지 않으며 html / css가 반드시 React를 나타내는 것은 아닙니다. 따라서 .js를 살펴보십시오.

방법 1 : ECMAScript에서보기 :

버전 번호는 react-dom 및 react 모듈 모두에서 내보내 지만 해당 이름은 번들링 및 액세스 할 수없는 실행 컨텍스트 내에 숨겨진 버전을 통해 제거되는 경우가 많습니다. 영리한 중단 점은 값을 직접 나타내거나 ECMAScript를 검색 할 수 있습니다.

1. 웹 페이지를로드합니다 ( https://www.instagram.com 을 시도 할 수 있습니다. 그들은 전체 Coolaiders입니다)
2. 소스 탭에서 Chrome 개발자 도구를 엽니 다 (control + shift + i 또는 command + shift + i).
   1. 소스 탭에서 열리는 개발 도구
3. 상단 메뉴 표시 줄의 맨 오른쪽에서 세로 줄임표를 클릭하고 모든 파일 검색을 선택 합니다.
4. 그는 왼쪽 유형에 아래 검색 창에서 해고 대문자로, 확인란을 지 웁니다 경우 무시 , 유형 입력
   1. 하나 이상의 일치 항목이 아래에 나타납니다. 버전은 "16.0.0"버전 과 같은 검색 문자열에 매우 가까운 내보내기입니다 .
5. 버전 번호가 즉시 표시되지 않는 경우 : 줄 번호로 시작하는 줄을 두 번 클릭합니다.
   1. ECMAScript가 가운데 창에 나타납니다.
6. 버전 번호가 즉시 표시되지 않는 경우 : ECMAScript 창 왼쪽 하단에있는 두 개의 중괄호 {}를 클릭합니다.
   1. ECMAScript는 형식이 변경되어 읽기가 더 쉽습니다.
7. 버전 번호가 즉시 표시되지 않는 경우 : 몇 줄을 위아래로 스크롤하여 찾거나 다른 검색 키를 시도합니다.
   1. 코드가 축소되지 않은 경우 ReactVersion을 검색 합니다. 동일한 값을 가진 2 개의 적중이 있어야합니다.
   2. 코드가 축소 된 경우 SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED 또는 react-dom을 검색합니다.
   3. 또는 가능한 버전 문자열 자체를 검색합니다 : "15. 또는 "16. 또는 "0.15

방법 2 : DOM 중단 점 사용 :

1. React에서 렌더링 한 페이지로드
2. React 요소 (입력 필드 또는 상자와 같은 모든 요소)를 마우스 오른쪽 버튼으로 클릭하고 Inspect Element
   1. Chrome 개발자 도구에 Elements창이 표시됨
3. 선택한 요소에서 가능한 한 트리에서 높지만 React 루트 요소보다 높지 않은 경우 (종종 id root : <div id = "root">를 사용하는 본문 내부의 div ) 요소를 마우스 오른쪽 버튼으로 클릭하고Break On… - subtree modifications
   1. Note: It is possible to compare contents of the Elements tab (DOM current state) with the response for the same resouce on the Networks tab. This may reveal React’s root element
4. Reload the page by clicking Reload left of the address bar
   1. Chrome Developer Tools stops at the breakpoint and displays the Sources pane
5. In the rightmost pane, examine the Call Stack sub-pane
6. As far down the call stack as possible, there should be a render entry, this is ReactDOM.render
7. Click the line below render, ie. the code that invokes render
8. The middle pane now displays ECMAScript with an expression containing .render highlighted
9. Hover the mouse cursor over the object used to invoke render, is. the react-dom module exports object
   1. if the code line goes: Object(u.render)(…, hover over the u
10. A tooltip window is displayed containing version: "15.6.2", ie. all values exported by react-dom

The version is also injected into React dev tools, but as far as I know not displayed anywhere.

---

Open the console, then run window.React.version.

This worked for me in Safari and Chrome while upgrading from 0.12.2 to 16.2.0.

---

For an app created with create-react-app I managed to see the version:

1. Open Chrome Dev Tools / Firefox Dev Tools,
2. Search and open main.XXXXXXXX.js file where XXXXXXXX is a builds hash /could be different,
3. Optional: format source by clicking on the {} to show the formatted source,
4. Search as text inside the source for react-dom,
5. in Chrome was found: "react-dom": "^16.4.0",
6. in Firefox was found: 'react-dom': '^16.4.0'

The app was deployed without source map.

---

In index.js file, simply replace App component with "React.version". E.g.

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

I have checked this with React v16.8.1

---

In an existing project a very simple way to see the React version is to go to a render method of any component and add :

<p>{React.version}<p>

I assume you import React like this : import React from 'react'

참고URL : https://stackoverflow.com/questions/36994564/how-can-one-tell-the-version-of-react-running-at-runtime-in-the-browser