【Reactファミリーのバケット学習】reactスキャフォールディングの初期化とプロジェクト構造の説明

React 足場の紹介

プロジェクトを作成して開始

1.グローバルインストール npm i create-react-app -g

2. 作成するプロジェクトのディレクトリに移動し、次のコマンドを使用します: create-react-app hello-react (カスタムプロジェクト名)

プロジェクト構造の概要

主に public-->index.html ファイルを分析します

src フォルダーを分析する

プロジェクトの実行プロセス

React 足場の紹介

xxx スキャフォールディングは、プログラマーが xxx ライブラリに基づいてテンプレートプロジェクトをすばやく作成するのに役立ちます。
1. 必要なすべての構成が含まれています (構文チェック、jsx コンパイル、devServer...)
2.関連するすべての依存関係をダウンロードします
3.簡単なエフェクトを直接実行できます
React は、react プロジェクトを作成するための足場ライブラリを提供します: create-react-app
プロジェクトの全体的な技術アーキテクチャは次のとおりです。react + webpack + es6 + eslint
足場を使用して開発されたプロジェクトの機能:モジュール化、コンポーネント化、およびエンジニアリング

プロジェクトを作成して開始

最初のステップは、グローバルにインストールすることです: npm install -create-react-app
2 番目のステップは、作成するプロジェクトのディレクトリに切り替えて、次のコマンドを使用することです: create-react-app hello-react (カスタムプロジェクト名)
3 番目のステップでは、プロジェクトフォルダーに入ります: cd hello-react
4 番目のステップは、プロジェクトを開始することです: npm start

1.グローバルインストール npm i create-react-app -g

2. 作成するプロジェクトのディレクトリに移動し、次のコマンドを使用します: create-react-app hello-react (カスタムプロジェクト名)

注: プロジェクト名に大文字を使用することはできません。大文字を使用すると、エラーが報告されます

エラー翻訳:

小文字またはアンダースコアに変更

次に、作成され、プロジェクトディレクトリに入り、起動します

この小さな花を見たら大成功〜

プロジェクト構造の概要

主に public-->index.html ファイルを分析します

補足：manifest.jsonはパッキング技術適用後の設定ファイルです。

アプリケーションパッキング技術とは何ですか? 実際、モバイル端末を書きたい場合、androidやiosの開発を専門とする人に開発を依頼すると、コストと技術コストが比較的高くなるため、アプリケーションのパッキング技術を使用して実現します。携帯端末のHTMLページを書いて、書いた後、シェルを入れて、最後にapkファイルにパックします携帯電話にインストールした後、それを開くと実際にはシェルであり、html Webページがネストされています中身。これにより、大幅な省人化と開発効率の向上により、同様の効果が得られます。したがって、manifest.json は、パッケージ化された apk アプリケーションの名前、権限、アイコン、およびアプリケーションデバイスへのアクセス権限を構成するものです。

以下はmanifest.jsonの基本的な構成で、実際のアプリケーションではさらに多くの構成項目があります。