1. フロントエンドエンジニアリングの複雑さ
現代のフロントエンド プロジェクトはますます複雑になっています。
上記の問題を解決するには、さらにいくつかのツールを学ぶ必要があります。
2. 足場とは何ですか?伝統的な足場は建築における構造物、つまり建物や構造物を建設するときに建てられる一時的なフレームを指します。 プログラミングで言及されているスキャフォールドは、実際にはプロジェクトのエンジニアリング構造をすばやく生成するのに役立つツールです。
概要: スキャフォールディングにより、プロジェクトの構築から開発、そして展開までのプロセス全体が迅速かつ便利になります。 3. フロントエンドの足場現在、最も人気のある 3 つのフレームワークにはそれぞれ独自のスキャフォールディングがあります。
彼らの役割は、共通のディレクトリ構造を生成し、必要なエンジニアリング環境を構成することです。
ここでは主に React を学習しているので、説明には React のスキャフォールディング ツールである create-react-app を引き続き使用します。 4. ノードをインストールするReact スキャフォールディング自体はノードに依存する必要があるため、ノード環境をインストールする必要があります。 Windows でも Mac OS でも、node の公式サイトから直接ダウンロードできます。 公式ウェブサイトアドレス: https://nodejs.org/en/download/ 注: 長期サポートバージョンであり、より安定している LTS (長期サポート) バージョンをダウンロードすることをお勧めします。 ダウンロード後、ダブルクリックしてインストールします。 次のコマンドを入力します。 ノード --version npm --バージョン バージョン番号が表示されれば、インストールは成功したことを意味します。 5. パッケージ管理ツールnpm とは何ですか?
さらに、よく知られているノード パッケージ管理ツール yarn があります。
npm インストール -g 糸
6. Yarnとnpmコマンドの比較7. 足場を設置する補足:中国では、npmとyarnを使用するとライブラリが正しくインストールされない場合があります。この場合は npm をインストール -g cnpm --registry=https://registry.npm.taobao.org 最後にインストールする必要があるのは、React プロジェクトを作成するためのスキャフォールディングです。 npm インストール -g 作成-react-app
8. Reactプロジェクトを作成するこれで、スキャフォールディングを通じて React プロジェクトを作成できます。 React プロジェクトを作成するコマンドは次のとおりです。 注意: プロジェクト名に大文字を含めることはできません。 プロジェクトを作成する方法は他にもあります。GitHubのreadmeを参照してください。 create-react-app プロジェクト名 作成が完了したら、対応するディレクトリに移動してプロジェクトを実行します。 cd 01-テスト-reactyarn 開始 9. ディレクトリ構造の分析10. PWAを理解するPWA の概念を除けば、ディレクトリ構造全体は非常に理解しやすいです。
PWA はどのような問題を解決しますか?
11. webpackとは何かReact のスキャフォールディングは Webpack に基づいて構成されていると述べました。
12. スキャフォールディングでの Webpack webpack については内容がたくさんあるため、ここでは説明しません (後で webpack に関する特別なトピックがあります)。 その理由は、React スキャフォールディングが webpack 関連の設定を隠してしまうからです (実際、Vue CLI3 以降も隠されています)。 webpack の設定情報を確認したい場合はどうすればよいでしょうか?
糸排出 13. スキャフォールディングでの Webpack14. ファイル構造の削除スキャフォールディングを通じてプロジェクトを作成した後でも、多くの学生がディレクトリ構造が複雑すぎると感じているため、全員がゼロからコードを記述できるようにする予定です。 src の下にあるすべてのファイルを削除します。public の下にある favicon.ico と index.html 以外のすべてのファイルを削除します。 15. コードを書き始めるsrc ディレクトリに index.js ファイルを作成します。これが webpack パッケージ化のエントリ ポイントになります。 コードのロジックは私たちが書いたものと一致していることがわかります。モジュール開発では、React と ReactDOM はインストールしたモジュール内にあるため、手動でインポートする必要があるだけです。 ReactDOM.render に直接多くのコードを書きたくない場合は、コンポーネント App.js を別途抽出できます。 React スキャフォールディングの構築方法を学ぶこの記事はこれで終わりです。React スキャフォールディングに関するより関連性の高いコンテンツについては、123WORDPRESS.COM で過去の記事を検索するか、以下の関連記事を引き続き参照してください。皆様が今後も 123WORDPRESS.COM を応援してくれることを願っています。 以下もご興味があるかもしれません:
|
>>: MySQL で指定エンコーディングを実装する際の落とし穴について
目次1. Reactの基本的な理解1. はじめに2. Reactの特徴3. Reactが効率的な理由...
ウェブサイトのデザインを編集または変更する必要がある場合、CSS が重要な役割を果たします。 CSS...
現象: divを一定の振幅で円、楕円などに変更する方法: CSSのborder-radiusプロパテ...
Awk は、ソートを含む他の一般的なユーティリティによって実行できるいくつかのタスクを実行できる強...
最近、会社で DELL R730 サーバーを購入したのですが、偶然次のチュートリアルを見つけたので、...
モバイル ブラウザは、Web ページを仮想の「ウィンドウ」(ビューポート) に配置します。このウィン...
この記事では、Dockerを使用してMySQLデータベースとリモートアクセス構成をデプロイする方法を...
レイアウトにul>liを使用した単一行レイアウトを以下に示します。 <ul class=...
目次CentOS7をインストールする静的IPの設定viを使用してファイルを編集するCentOS7をイ...
この記事では、オンラインチャットを実現するためのVue + sshフレームワークの具体的なコードを参...
1: Baiduウェブサイトログイン入口ウェブサイト: http://www.baidu.com/s...
目次保守可能なコードとは何ですか?コード規約1. 読みやすさ2. 変数と関数の命名3. 透過的な変数...
序文最近、フロントエンドの知識をまとめており、いくつかのインタビューにも参加しました。インタビュー中...
目次01 コンテナの本質とは何か? 02 Cgroupテクノロジーと名前空間テクノロジーの概要03 ...
1. HTMLページの文字セットを指定する2つの方法方法1: <メタ文字セット="u...