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

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 を応援してくれることを願っています。

以下もご興味があるかもしれません:
  • React スキャフォールディングのパスエイリアスを設定する方法
  • React Native スキャフォールディングの基本的な使い方の詳細な説明
  • webpack4.X をベースに React スキャフォールディングをゼロから構築する方法と手順
  • React公式scaffoldingがLessに対応していない問題の解決方法(まとめ)
  • React アプリケーションを開発するための最適な基盤である create-react-app の詳細な説明
  • Webpack+react+antd スキャフォールディング最適化方法

<<:  HTML コードの書き方に関する提案のまとめ

>>:  MySQL で指定エンコーディングを実装する際の落とし穴について

推薦する

React 入門レベルの詳細なメモ

目次1. Reactの基本的な理解1. はじめに2. Reactの特徴3. Reactが効率的な理由...

ウェブデザインを改善するための 8 つの CSS ツールを共有する

ウェブサイトのデザインを編集または変更する必要がある場合、CSS が重要な役割を果たします。 CSS...

CSSのborder-radiusプロパティを使用して円弧を設定します

現象: divを一定の振幅で円、楕円などに変更する方法: CSSのborder-radiusプロパテ...

テキスト ファイルの並べ替えに役立つ Awk コマンドラインまたはスクリプト (推奨)

Awk は、ソートを含む他の一般的なユーティリティによって実行できるいくつかのタスクを実行できる強...

DELL R730 サーバーの構成 RAID とインストール サーバー システムとドメイン制御の詳細なグラフィック チュートリアル

最近、会社で DELL R730 サーバーを購入したのですが、偶然次のチュートリアルを見つけたので、...

モバイル ブラウザのビューポート パラメータ (Web フロントエンド デザイン)

モバイル ブラウザは、Web ページを仮想の「ウィンドウ」(ビューポート) に配置します。このウィン...

MySQL (8 および 5.7) の Docker インストール

この記事では、Dockerを使用してMySQLデータベースとリモートアクセス構成をデプロイする方法を...

Flex モバイルレイアウトにおけるシングルラインレイアウトとダブルラインレイアウトの違いと使い方

レイアウトにul>liを使用した単一行レイアウトを以下に示します。 <ul class=...

Mac VMware Fusion CentOS7 静的 IP 構成チュートリアル図

目次CentOS7をインストールする静的IPの設定viを使用してファイルを編集するCentOS7をイ...

オンラインチャットを実現するVue+sshフレームワーク

この記事では、オンラインチャットを実現するためのVue + sshフレームワークの具体的なコードを参...

検索エンジンのウェブサイトの入り口の無料コレクション

1: Baiduウェブサイトログイン入口ウェブサイト: http://www.baidu.com/s...

メンテナンス可能なJSコードの書き方を教えます

目次保守可能なコードとは何ですか?コード規約1. 読みやすさ2. 変数と関数の命名3. 透過的な変数...

CSS レイアウト チュートリアル: 垂直方向の中央揃えを実現する方法

序文最近、フロントエンドの知識をまとめており、いくつかのインタビューにも参加しました。インタビュー中...

Dockerコンテナの原理の分析

目次01 コンテナの本質とは何か? 02 Cgroupテクノロジーと名前空間テクノロジーの概要03 ...

HTMLページの文字セットを指定する2つの方法

1. HTMLページの文字セットを指定する2つの方法方法1: <メタ文字セット="u...