【初心者向け】React バージョンを確認する3つの簡単な方法
ブラウザで実行中の React バージョンを確認する方法
react-dom パッケージのバージョンを確認する
React のバージョンは、react-dom パッケージのバージョンによって決まります。以下の方法でバージョンを確認できます。
方法 1: ブラウザの開発者ツールを使用する
- ブラウザの開発者ツールを開きます。
- ソース タブに移動します。
node_modulesフォルダを開きます。react-domパッケージを見つけます。- パッケージのバージョン番号を確認します。
方法 2: コンソールを使用する
- 以下のコードを実行します。
console.log(React.version);
- コンソールに React のバージョン番号が表示されます。
方法 3: package.json ファイルを確認する
dependenciesオブジェクトの中のreact-domのバージョン番号を確認します。
React DevTools は、ブラウザの拡張機能で、React アプリケーションのデバッグに役立ちます。React DevTools を使用すると、実行中の React バージョンを確認できます。
- React DevTools をインストールします。
- ブラウザで React アプリケーションを開きます。
- アイコンをクリックします。
window オブジェクトを使用する
React は、window オブジェクトに React というプロパティを追加します。このプロパティを使用して、React のバージョンを確認できます。
console.log(window.React.version);
ソースコードを確認する
React アプリケーションのソースコードを確認することで、使用されている React のバージョンを確認できます。
- ソースコード内に
reactやreact-domのバージョン番号が明記されている場合があります。
ブラウザで実行中の React バージョンを確認するには、いくつかの方法があります。上記の方法を参考に、自分に合った方法を選択してください。
// 方法 1: ブラウザの開発者ツールを使用する
// ソースタブを開き、node_modulesフォルダを開きます。
// react-domパッケージを見つけ、バージョン番号を確認します。
// 方法 2: コンソールを使用する
console.log(React.version); // コンソールにReactのバージョン番号が表示されます。
// 方法 3: package.jsonファイルを確認する
// package.jsonファイルを開き、dependenciesオブジェクトの中のreact-domのバージョン番号を確認します。
// 方法 4: windowオブジェクトを使用する
console.log(window.React.version); // コンソールにReactのバージョン番号が表示されます。
// 方法 5: ソースコードを確認する
// ソースコード内にreactやreact-domのバージョン番号が明記されている場合があります。
// importステートメントを確認することで、使用されているReactのバージョンを推測できます。
上記は、ブラウザで実行中の React バージョンを確認する方法のサンプルコードです。ご自身の環境に合わせてコードを変更してください。
ブラウザで実行中の React バージョンを確認するその他の方法
React Router は、React アプリケーションのルーティングを管理するライブラリです。React Router を使用している場合は、以下のコードを使用して React のバージョンを確認できます。
import { useRoutes } from 'react-router-dom';
const routes = useRoutes();
console.log(routes.version);
Reduxを使用する
import { createStore } from 'redux';
const store = createStore(() => ({}));
console.log(store.version);
Babelを使用する
Babel は、JavaScript のコードを古いブラウザで実行できるように変換するツールです。Babel を使用している場合は、以下のコードを使用して React のバージョンを確認できます。
// .babelrcファイル
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
// コード
console.log(React.version);
Webpackを使用する
// webpack.config.js
module.exports = {
entry: './index.js',
output: {
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
],
},
};
// コード
console.log(React.version);
NPM または Yarn を使用して React をインストールしている場合は、以下のコマンドを使用して React のバージョンを確認できます。
npm list react --depth=0
または
yarn list react --depth=0
これらのコマンドは、インストールされている React のバージョンと、その依存関係を表示します。
javascript reactjs
