新しい React プロジェクトを開始するのは、非常に多くのビルド ツールがあるため、非常に複雑です。 React コードを 1 行記述する前に、多くの依存関係、設定ファイル、および Babel、Webpack、ESLint などのその他の要件を使用します。 Create React App CLI ツールは、その複雑さをすべて取り除き、React アプリをシンプルにします。このためには、NPM を使用してパッケージをインストールし、いくつかの簡単なコマンドを実行して新しい React プロジェクトを取得する必要があります。

の 反応アプリの作成 は初心者にとって優れたツールであり、React プロジェクトを非常に迅速に作成して実行できます。手動で構成する必要はありません。このツールは、次のような必要な依存関係をすべてラップしています。 ウェブパック 、 バベル React プロジェクト自体については、React コードの作成のみに集中する必要があります。このツールは開発環境をセットアップし、優れた開発者エクスペリエンスを提供し、実稼働用にアプリを最適化します。

要件

Create React App は次によって保守されています。 フェイスブック どれでも動作します プラットホーム 例: macOS、Windows、Linux など。 create-react-app を使用して React プロジェクトを作成するには、システムに次のものをインストールしておく必要があります。

1. ノードのバージョン >= 8.10
2. NPM バージョン >= 5.6

現在のバージョンを確認してみましょう ノード そして 故宮 システム内で。

コマンドプロンプトで次のコマンドを実行してノードのバージョンを確認します。

 $ node -v 

コマンド プロンプトで次のコマンドを実行して、NPM のバージョンを確認します。

 $ npm -v 

インストール

ここでは、次を使用して React をインストールする方法を学びます。 CRA 道具。このためには、以下の手順に従う必要があります。

React をインストールする

次のコマンドを使用して、npm パッケージ マネージャーを使用して React をインストールできます。 React のインストールの複雑さを心配する必要はありません。 create-react-app npm パッケージ マネージャーは、React プロジェクトに必要なすべてを管理します。

 C:Usersjavatpoint> npm install -g create-react-app 

新しい React プロジェクトを作成する

React のインストールが成功したら、create-react-app コマンドを使用して新しい React プロジェクトを作成できます。ここでは、プロジェクトに「reactproject」という名前を選択します。

 C:Usersjavatpoint> create-react-app reactproject 

注記：次を使用して、上記の 2 つの手順を 1 つのコマンドで組み合わせることができます。npx。 npx は、npm 5.2 以降のバージョンに付属するパッケージ ランナー ツールです。

 C:Usersjavatpoint> npx create-react-app reactproject 

上記のコマンドは、React をインストールし、「reactproject」という名前の新しいプロジェクトを作成するのに少し時間がかかります。これで、以下のようにターミナルが表示されます。

上の画面は、React プロジェクトがシステム上に正常に作成されたことを示しています。次に、ブラウザ上でアプリケーションにアクセスできるようにサーバーを起動する必要があります。ターミナル ウィンドウに次のコマンドを入力します。

 $ cd Desktop $ npm start 

NPM は、サーバーを起動し、デフォルトのサーバー http://localhost:3000 でアプリケーションにアクセスするパッケージ マネージャーです。次の画面が表示されます。

次に、コードエディタでプロジェクトを開きます。ここでは Visual Studio Code を使用しています。私たちのプロジェクトのデフォルト構造は以下の画像のようになります。

React アプリケーションでは、ルート ディレクトリにいくつかのファイルとフォルダーがあります。その一部は次のとおりです。

ノードモジュール:これには、React ライブラリと必要なその他のサードパーティ ライブラリが含まれています。公共：アプリケーションの公開資産を保持します。これには、React がデフォルトでアプリケーションを要素にマウントするindex.html が含まれています。ソース:これには、App.css、App.js、App.test.js、index.css、index.js、およびserviceWorker.js ファイルが含まれています。ここで、App.js ファイルは常に React で出力画面を表示する役割を果たします。パッケージロック.json:これは、npm package が node_modules ツリーまたは package.json を変更する操作に対して自動的に生成されます。公開することはできません。最上位パッケージではなく他の場所が見つかった場合は無視されます。パッケージ.json:プロジェクトに必要なさまざまなメタデータが保持されます。これにより npm に情報が提供され、プロジェクトを識別したり、プロジェクトの依存関係を処理したりできるようになります。README.md:React トピックについて読むためのドキュメントを提供します。

React 環境のセットアップ

さて、開いてください ソース >> App.js ファイルを開き、画面に表示する変更を加えます。必要な変更を加えた後、 保存 ファイル。ファイルを保存するとすぐに、Webpack がコードを再コンパイルし、ページが自動的に更新され、変更がブラウザ画面に反映されます。これで、必要な数のコンポーネントを作成し、新しく作成したコンポーネントを App.js ファイルが作成され、そのファイルがメインに含まれます インデックス.html Webpackでコンパイルした後のファイルです。

次に、実稼働モード用のプロジェクトを作成する場合は、次のコマンドを入力します。このコマンドは、最適化された運用ビルドを生成します。

 $ npm build