React スキャフォールディングの構築方法を学ぶ

1. フロントエンドエンジニアリングの複雑さ

いくつかの小さなデモ プログラムを開発するだけであれば、次のような複雑な問題を考慮する必要はありません。

たとえば、ディレクトリ構造を整理して分割する方法、ファイル間の依存関係を管理する方法、サードパーティ モジュールの依存関係を管理する方法、公開前にプロジェクトを圧縮してパッケージ化する方法などです。

現代のフロントエンド プロジェクトはますます複雑になっています。

• いくつかの CSS ファイル、いくつかの独自に作成した JS ファイル、またはサードパーティの JS ファイルを HTML にインポートするだけではもはや簡単ではありません。
• たとえば、CSS は less や sass などのプリプロセッサを使用して記述されている場合、ブラウザーで解析できるように通常の CSS に変換する必要があります。
• たとえば、JavaScript コードは数個のファイルで記述されるのではなく、モジュール方式で数百または数千のファイルで構成されています。ファイル間の相互依存性を管理するには、モジュール技術を使用する必要があります。
• たとえば、プロジェクトが多くのサードパーティ ライブラリに依存する必要がある場合、それらをより適切に管理するにはどうすればよいでしょうか (依存関係の管理、バージョン アップグレードなど)?
  

上記の問題を解決するには、さらにいくつかのツールを学ぶ必要があります。

• たとえば、babel、webpack、gulp などです。変換ルール、パッケージの依存関係、ホットアップデートなどを構成します。
• 足場の出現は、この一連の問題を解決するのに役立ちます。

2. 足場とは何ですか?

伝統的な足場は建築における構造物、つまり建物や構造物を建設するときに建てられる一時的なフレームを指します。

プログラミングで言及されているスキャフォールドは、実際にはプロジェクトのエンジニアリング構造をすばやく生成するのに役立つツールです。

• 各プロジェクトは異なる結果を達成しますが、基本的なエンジニアリング構造は似ています。
• これらは類似しているため、毎回ゼロから構築する必要はありません。いくつかのツールを使用して、基本的なエンジニアリング テンプレートを作成できます。
• さまざまなプロジェクトに対して、このテンプレートに基づいてプロジェクトを開発したり、簡単な構成変更を加えたりすることができます。
• これにより、プロジェクトの基本的な構造の一貫性が間接的に確保され、その後のメンテナンスが容易になります。
  

概要: スキャフォールディングにより、プロジェクトの構築から開発、そして展開までのプロセス全体が迅速かつ便利になります。

3. フロントエンドの足場

現在、最も人気のある 3 つのフレームワークにはそれぞれ独自のスキャフォールディングがあります。

• Vue スキャフォールディング: vue-cli
• Angular スキャフォールディング: angular-cli
• React スキャフォールディング: create-react-app

彼らの役割は、共通のディレクトリ構造を生成し、必要なエンジニアリング環境を構成することです。
これらの足場は何に依存しているのでしょうか?

• 現在、これらのスキャフォールドはすべて node で記述されており、webpack に基づいています。
• そのため、コンピューターにノード環境をインストールする必要があります。

ここでは主に React を学習しているので、説明には React のスキャフォールディング ツールである create-react-app を引き続き使用します。

4. ノードをインストールする

React スキャフォールディング自体はノードに依存する必要があるため、ノード環境をインストールする必要があります。

Windows でも Mac OS でも、node の公式サイトから直接ダウンロードできます。

公式ウェブサイトアドレス: https://nodejs.org/en/download/ 注: 長期サポートバージョンであり、より安定している LTS (長期サポート) バージョンをダウンロードすることをお勧めします。

ダウンロード後、ダブルクリックしてインストールします。
1. インストールプロセス中に、環境変数が自動的に構成されます。
2. インストール中に、npm 管理ツールのインストールにも役立ちます。

次のコマンドを入力します。

ノード --version
npm --バージョン

バージョン番号が表示されれば、インストールは成功したことを意味します。

5. パッケージ管理ツール

npm とは何ですか?

• 完全な名前は Node Package Manager で、「ノード パッケージ マネージャー」を意味します。
• その役割は、依存するツールキット（react、react-dom、axios、babel、webpack など）の管理を支援することです。
• 作者は「不​​適切なモジュール管理」の問題を解決するためにこれを開発しました。

さらに、よく知られているノード パッケージ管理ツール yarn があります。

• Yarn は、Facebook、Google、Exponent、Tilde が共同でリリースした新しい JS パッケージ管理ツールです。
• Yarn は npm のいくつかの欠点を補うために作成されました。
• 初期の npm には、依存関係のインストールが遅い、バージョンの依存関係がわかりにくい、その他一連の問題など、多くの欠陥がありました。
• npm5 以降、多くのアップグレードと改善が行われてきましたが、依然として yarn を使い続ける人も多くいます。
• React スキャフォールディングもデフォルトで yarn を使用します。

npm インストール -g 糸

yarn --versionと入力します。バージョン番号が出力された場合は、インストールが成功したことを意味します。

6. Yarnとnpmコマンドの比較

7. 足場を設置する

補足：中国では、npmとyarnを使用するとライブラリが正しくインストールされない場合があります。この場合はcnpmを使用することを選択できます。

npm をインストール -g cnpm --registry=https://registry.npm.taobao.org

最後にインストールする必要があるのは、React プロジェクトを作成するためのスキャフォールディングです。

npm インストール -g 作成-react-app

create-react-app --versionと入力します。バージョン番号が出力された場合は、インストールが成功したことを意味します。

8. Reactプロジェクトを作成する

これで、スキャフォールディングを通じて React プロジェクトを作成できます。

React プロジェクトを作成するコマンドは次のとおりです。

注意: プロジェクト名に大文字を含めることはできません。

プロジェクトを作成する方法は他にもあります。GitHubのreadmeを参照してください。

create-react-app プロジェクト名

作成が完了したら、対応するディレクトリに移動してプロジェクトを実行します。

cd 01-テスト-reactyarn 開始

9. ディレクトリ構造の分析

10. PWAを理解する

PWA の概念を除けば、ディレクトリ構造全体は非常に理解しやすいです。

• PWA は Progressive Web App の略で、プログレッシブ WEB アプリケーションです。
• PWA アプリケーションはまず Web ページであり、Web アプリケーションは Web テクノロジを使用して作成できます。
• 次に、App Manifest と Service Worker を追加して、PWA のインストールとオフライン機能を実装します。
• この形式の Web の存在は Web アプリとも呼ばれます。
  

PWA はどのような問題を解決しますか?

• ホーム画面に追加できます。ホーム画面アイコンをクリックするとアニメーションが開始され、アドレスバーが非表示になります。
• オフライン キャッシュ機能を実装し、携帯電話にネットワークがない場合でも、ユーザーが一部のオフライン機能を使用できるようにします。
• メッセージプッシュを実装しました。
• ネイティブ アプリに類似した一連の機能。

11. webpackとは何か

React のスキャフォールディングは Webpack に基づいて構成されていると述べました。

• webpack は、最新の JavaScript アプリケーション用の静的モジュール バンドラーです。
• webpack はアプリケーションを処理する際に、アプリケーションに必要なすべてのモジュールを含む依存関係グラフを再帰的に構築し、これらのモジュールすべてを 1 つ以上のバンドルにパッケージ化します。
  

12. スキャフォールディングでの Webpack

webpack については内容がたくさんあるため、ここでは説明しません (後で webpack に関する特別なトピックがあります)。
しかし、奇妙なことに、ディレクトリ構造には webpack に関連するものが何も見当たりません。

その理由は、React スキャフォールディングが webpack 関連の設定を隠してしまうからです (実際、Vue CLI3 以降も隠されています)。

webpack の設定情報を確認したい場合はどうすればよいでしょうか?

• package.json ファイル内のスクリプトを実行できます: "eject": "react-scripts eject"
• この操作は元に戻せないため、実行中にプロンプ​​トが表示されます。

糸排出

13. スキャフォールディングでの Webpack

14. ファイル構造の削除

スキャフォールディングを通じてプロジェクトを作成した後でも、多くの学生がディレクトリ構造が複雑すぎると感じているため、全員がゼロからコードを記述できるようにする予定です。
まず、不要なファイルをすべて削除しましょう。

src の下にあるすべてのファイルを削除します。public の下にある favicon.ico と index.html 以外のすべてのファイルを削除します。

15. コードを書き始める

src ディレクトリに index.js ファイルを作成します。これが webpack パッケージ化のエントリ ポイントになります。
index.js で React コードを書き始めます。

コードのロジックは私たちが書いたものと一致していることがわかります。モジュール開発では、React と ReactDOM はインストールしたモジュール内にあるため、手動でインポートする必要があるだけです。

ReactDOM.render に直接多くのコードを書きたくない場合は、コンポーネント App.js を別途抽出できます。

React スキャフォールディングの構築方法を学ぶこの記事はこれで終わりです。React スキャフォールディングに関するより関連性の高いコンテンツについては、123WORDPRESS.COM で過去の記事を検索するか、以下の関連記事を引き続き参照してください。皆様が今後も 123WORDPRESS.COM を応援してくれることを願っています。