React プロジェクトを構築するための実際の戦闘足場のゼロベースの React エントリ create-react-app

React をゼロから始めて実際のプロジェクトを実践する

第 2 章 React アプリケーションを構築するための create-react-app のスキャフォールディング

---

---

1. create-react-app とは何ですか?

create-react-app は、FaceBook の React チームによって正式にリリースされた、React シングルページ アプリケーションを構築するためのスキャフォールディング ツールです。
Webpack 自体を統合し、一連の組み込みローダーとデフォルトの npm スクリプトを構成し、構成なしで React アプリケーションを開発できます。
Create React App を使用すると、たった 1 行のコマンドで最新の Web アプリケーションを構築できます。多数のビルド ツールを学習して設定する必要はなく、リアルタイムのページ更新機能によりコーディングに集中できます。

次に、必要な環境

1. Node.js: http://nodejs.cn/download/
   インストール中はそのまま次のステップに進み、独自の環境ディレクトリにインストールしてください。
2. Git: https://git-scm.com/downloadsMirror
   : https://npm.taobao.org/mirrors/git-for-windows/

3. create-react-app のスキャフォールディング

1. 新しいフォルダー (例: 反応プロジェクト) を作成し、ターゲット フォルダーでターミナルまたは VsCode を開きます。

# 全局安装 create-react-app
npm install -g create-react-app
# 或者如果不想全局安装，可以直接使用npx（临时安装，拿的是最新的脚手架）
npx create-react-app

# 查看是否安装成功
create-react-app -V

2. 最初の React アプリケーションを作成します。
1) create-react-app を使用して React アプリケーションを構築します。

# 这里的 my-app 是项目名称，注意命名方式（不能有大写字母）
create-react-app my-app

--------------创建中-------------
Creating a new React app in E:\React\project\my-app.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...

しばらく時間がかかりますが、このプロセスでは実際に 3 つのものがインストールされます。

• React: React のトップレベル ライブラリ
• React-dom: React は多くの動作環境があるため、たとえばアプリ側は React-Native で、Web 上で実行する場合は React-dom が使用されます。
• 反応スクリプト: 反応アプリケーションを実行およびパッケージ化するためのすべてのスクリプトと構成が含まれています

次のインターフェイスが表示されたら、プロジェクトが正常に作成されたことを意味します。

2) プロンプトに従って、コマンドでcd my-app作成したプロジェクト ディレクトリを入力してnpm start実行します。プロジェクトを実行し、デフォルトでアクセスするためにブラウザを開くことができます。デフォルトのポート番号は 3000 です。

3) VsCode を使用して、先ほどのプロジェクトを開いてみましょう。

プロジェクト開発中のディレクトリ構造の説明:

• build/: 設定ファイルを格納します
  (dev.js: 開発環境サービスの設定ファイル。webpack.dev.conf.js: 開発環境のバックグラウンドサーバー設定ファイル)。
• node_modules: npm install によってインストールされた依存関係ファイル (プロジェクト エンジニアリングに必要な依存関係パッケージ) を保存するために使用されます。
• package-lock.json: チームが開発した依存関係の一貫性を確保するために、インストール中にパッケージのバージョン番号をロックします。
• public: 静的パブリックディレクトリ
• src: プロジェクトのソースコードディレクトリ
  (modules: モジュールコード。less: スタイルファイル)
• static: 静的リソースファイル
• static/js: パブリックライブラリ
• dist: パッケージ化された実行可能ファイル

今回はここまでです。また次の記事でお会いしましょう。