React を Windows にインストールするには? 完全ガイド

ReactJS は無料のオープンソース JavaScript ライブラリであり、古くからのフロントエンド開発手法を大幅に変更しました。 2013 年に公開された React は、Facebook の社内プロジェクトでした。 それ以来、React はさまざまな組織やスタートアップに採用されています。 JavaScript、HTML、および CSS に関する十分な知識を持つフロントエンド開発者は、Web アプリケーションとモバイル アプリケーションの両方のインタラクティブなユーザー インターフェイスを作成できます。 ReactJS の最大の利点の 1 つは、コンポーネント ベースのアプローチです。 カプセル化された再利用可能なコンポーネントを独自の独立した状態で構築すると、複雑なユーザー インターフェイスが簡素化されます。

興味深いことに、ReactJS で記述したものは HTML のように見えるかもしれませんが、そうではありません。 これは、JSX、JavaScript XML ファイルとして知られています。 この JSX は、ドキュメント オブジェクト モデルにレンダリングされる React の「要素」を生成します。 簡単に言うと、JSX を使用すると、JavaScript ロジックを HTML 本体内に記述できます。 したがって、React ははるかにシンプルで理解しやすいものになります。

理想的な使い方をするために、 React JS を Windows にインストールする方法を学びましょう。

React JS を Windows にインストールするには?

Windows のシステム要件

ReactJs を使用するのは簡単ですが、 React JS を Windows にインストールするプロセスは非常に面倒です。 ReactJS はオープンソース プロジェクトであるため、インターネットからソフトウェアをダウンロードするほど単純ではありません。 何よりもまず、Windows で ReactJS を使用するにはいくつかの前提条件があります。

1. Windows バージョン: Windows XP、Windows 7 (32/64 ビット) 以上。
2. 最低 4 GB の RAM が必要です。
3. ハード ドライブに 10 GB 以上のディスク容量。
4. Chrome、Microsoft Edge、Firefox などのインターネット ブラウザ。
5. ReactJS で書かれたコードをデバッグおよびテストするための 1 つのエディター。

世界トップクラスの大学が提供するソフトウェア開発コースをオンラインで学びましょう。 エグゼクティブ PG プログラム、上級認定プログラム、または修士プログラムを取得して、キャリアを加速させましょう。

Node.js のダウンロードとインストール

Node.js は、システムで ReactJS コードを実行するのに役立つサーバーです。 ReactJS と同じように、オープン ソースでもあります。 Node.js インストーラーには NPM (Node Package Manager) が含まれています。これには、開発者がオープンソース コミュニティで独自のモジュールをホストおよび公開するために使用するさまざまなノード モジュールが含まれています。 このように、Node は NPM レジストリと並行して動作するため、NPM CLI を使用して任意のパッケージを簡単にインストールできます。 ノードは、簡単にインストールできるように、Web パックを使用して ReactJS アプリケーションを 1 つにさらにラップします。

Node.js をダウンロードしてインストールする段階的な手順は次のとおりです。

1. Node.js をインストールするには、 https://nodejs.org/en/にアクセスします。
2. Windows OS のバージョンに応じて、適切なインストーラーを選択する必要があります。
3. Node.js ホームページでは、オペレーティング システムに応じて LTS バージョンを推奨しています。 それをクリックすると、自動的にダウンロードが開始されます。
4. インストーラーは、ダウンロード フォルダーにあります。 インストーラーを実行します。
5. 画面にセットアップ ウィザードが表示され、エンド ユーザー ライセンス契約を求められます。 利用規約に同意して、インストールを続行します。
6. 次に、ユーザーは、インストーラーのデフォルト パスで宛先フォルダーを選択する必要があります。 次へをクリックして進みます。
7. インストーラーは、インストールされる機能を表示し、環境パス変数をコマンド プロンプトに設定します。 [次へ] をクリックして、インストールを開始します。
8. インストールが完了したら、コマンド プロンプトを使用してシステム内の Node.js を確認します。
9. コマンド プロンプトで「node -v」と入力して、インストールされている Node.js のバージョンを確認します。
10. コマンド プロンプトで「npm -v」と入力して、npm のインストールも確認します。

Reactのインストール

Node.js のインストール後、次の 2 つの手法を使用してReact JS を Windows にインストールできます。

• Web パックと Babel の使用

1. ルート フォルダーの作成

ReactJS をインストールする前に、コマンド プロンプトで次のコマンドを使用して、「reactFile」という名前のルート フォルダーを作成します。

C:\Users\username\Desktop>mkdir reactFile

C:\Users\username\Desktop>cd reactFile

ディレクトリを作成したら、コマンド プロンプトで次のコマンドを使用して package.json ファイルを生成します。 package.json ファイルは、モジュールの作成に役立ちます。

C:\Users\username\Desktop>reactFile>npm init

コマンド プロンプトは、モジュールに関する情報を要求します。 「-y」オプションを選択してスキップします。

2. React と react-dom をインストールする

次の npm コマンドを使用して React および react-dom パッケージをインストールし、「-save」コマンドを使用してパッケージを package.json ファイルに追加します。

C:\Users\username\Desktop>reactFile> npm install react –save

C:\Users\username\Desktop>reactFile> npm install react-dom –save

ソフトウェア開発の無料コースをご覧ください

3. Webpack をインストールする

次のコマンドを使用して、webpack、webpack-dev-server、および webpack-cli をインストールします。

C:\Users\username\Desktop>reactFile> npm install webpack webpack-dev-server webpack-cli –save

4.バベルをインストールする

Babel は、JavaScript コードをブラウザーが理解できるコードに変換するトランスパイラーです。 したがって、Babel とその次のプラグイン、つまり、babel-loader、babel-preset-env、babel-preset-react、および html-webpack-plugin をインストールすることは非常に重要です。

次のコマンドを使用して、すべての babel プラグインを一度にインストールします。

C:\Users\username\Desktop\reactFile>npm install babel-core babel-loader babel-preset-env babel-preset-react html-webpack-plugin –save-dev

5.ReactJS ファイルを作成する

インストール プロセスを完了するには、コマンド プロンプトを使用して特定のファイルを手動で作成する必要があります。

C:\Users\username\Desktop\reactFile>type nul > index.html

C:\Users\username\Desktop\reactFile>type nul>App.js

C:\Users\username\Desktop\reactFile>type nul > main.js

C:\Users\username\Desktop\reactFile>type nul > webpack.config.js

C:\Users\username\Desktop\reactFile>type nul > .babelrc

6. コンパイラ、サーバー、ローダーのセットアップ

これらの ReactJS ファイルが「reactFile」フォルダー内に作成されたら、ポート 8001 または webpack.-config.js で任意のポートに設定するデプロイ サーバーを準備できます。

webpack-config.js ファイルで次のコードを使用します。

const path = require('パス');

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

エントリ: './main.js',

出力: {

パス: path.join(__dirname, '/bundle'),

ファイル名: 'index_bundle.js'

}、

開発サーバー: {

インライン: 真、

ポート: 8001

}、

モジュール: {

ルール: [

{

テスト: /\.jsx?$/,

除外: /node_modules/,

ローダー: 'babel-loader',

クエリ: {

プリセット: ['es2015', 'react']

}

}

]

}、

プラグイン:[

new HtmlWebpackPlugin({

テンプレート: './index.html'

}))

]

}

7. index.html の設定

index.html 内に、ルート要素として div id="app" を持つ通常の HTML コードを記述し、さらに HTML 本体に index_bundle.js スクリプトを追加します。

需要の高いソフトウェア開発スキル

8. App.js と main.js の設定

App.js 内に React コンポーネントを記述して、クラスまたは関数をレンダリングします。 レンダリングするテキストをコンポーネント内に挿入します。これは、コンパイル後にブラウザーに表示されます。 次に、コンポーネントを main.js 内のルート App 要素にインポートして、ブラウザに結果が表示されるようにします。

ファイル「.babelrc」を作成し、次のコード行を挿入します。

{

「プリセット」：[「env」、「反応」]

}

9. ウェブページへのコンテンツの表示

セットアップがようやく完了し、コマンド プロンプトで次のコマンドを入力すると、サーバーが起動して実行されます。

C:\Users\username\Desktop\reactFile>npm start

Enter キーを押すとすぐに、コンポーネント内でレンダリングしたメッセージがブラウザーに表示されます。

• create-react-app コマンドの使用

1. create-react-app をインストールする

コマンド プロンプトを開き、次のコードを記述して create-react-app をインストールします。

C:\Users\username\Desktop>npx create-react-app my-app

このコマンドは、必要なすべてのファイルとフォルダーをデスクトップの「my-app」フォルダー内にインストールします。 この 1 行のコードで、システムへの React のインストールが数分で完了します。

2. サーバーを実行する

コマンドプロンプトに移動して入力します

C:\Users\username\Desktop>cd my-app

C:\Users\Tutorialspoint\Desktop>my-app> npm start

React プロジェクトは、利用可能なポートでプロジェクトをホストする localhost の助けを借りて、ブラウザー上で稼働しています。

人気のソフトウェア エンジニアリング コースを探す

結論

ReactJS は、リリース以来フロントエンド開発ゲームを変え、最も人気のあるオープンソース JavaScript ライブラリの 1 つに成長しました。 Meta、Netflix、Slack などのいくつかの企業が ReactJS を使用しています。 最大の利点の 1 つは、Web ページに変更をレンダリングするためのコンポーネントの再利用性です。 Azure DevOps を使用して、いくつかの React アプリが Azure Web アプリにデプロイされます。 これは、現在IT業界で最も求められているスキルの1つです。

React 開発者は、 IIIT バンガロールの DevOps の upGrad の Advanced Certificate Programを通じて Azure DevOps を知ることで、スキルセットを強化できます。 このコースでは、250 時間以上の学習モジュールと面接準備ガイドを提供しています。 また、業界が期待する明確なロードマップを提供できる DevOps の専門家によるキャリア メンターシップ セッションに参加することもできます。 コースの最後に証明書と IIITB 卒業生のステータスを受け取り、履歴書に追加することができます。