人気は間違いなくすべての人の目に入りcreact反応するアプリ、反応時間の経過とともに、より多くのエンジニアが、フロントエンドの開発に反応し、反応すると、この記事では、最初からcreact-使用方法に焦点を当てて反応 - アプリ開発者は、実行上の最後の行まで、アプリケーション、およびローカルデバッグを反応させます。
この記事では、主に以下の12個のセクションでは、コンテンツの構造を示しています。
1. nodejsをインストールします。
nodejs NPMパッケージのインストールモジュールの2.作成反応するアプリ
3.私たちのレコード生成反応するアプリモジュールを使用してプロジェクトを作成します。
4.パッケージのテストプロジェクトを実行するために、いくつかのコマンドに私たちをコントロールすることを学びます
5.私たちのNPM開始してプロジェクトを実行します
6.生産のプロジェクトのディレクトリ構造を確認し、その役割を理解します
7.私たち自身のコンポーネントの数を作成し始めました
8.再び私たちのプロジェクトを実行
本番環境での梱包9.スタートコードが必要です
10.当社のサーバーへの我々のコードの展開
11. [OK]を、ライン上で、我々は、ユーザーへの公式訪問を行うことができます
12.保守のデバッグ
まず、インストールノード：
私たちは、開発者が作成反応するアプリをインストールするには、まずパッケージマネージャを介して、反応するように作成反応するアプリを使用し、nodejsが構築された後、パッケージマネージャは、通常はインストールされているので、私たちの最初のステップノードは、当社のコンピュータにインストールされています。
次nodejsインストールのチュートリアルを参照してください。
Node.jsのインストール構成
：第二に、検出NPMパッケージが提供され
、インストール後に、また、環境変数に設定され、その後、次の我々は、表示バージョン場合は、以下に示すように、テスト用のNPM -vを入力し、CMDウィンドウを開き、あなたのNPMパッケージが提供されて検出しますいいえ、インストールが成功し、正常に設定、環境変数、インストールcreact反応するアプリを起動するために使用することができます反応し開発されました。あなたはNPM -vポップバージョン番号を入力しない場合、それはあなたの環境変数が設定されていないかもしれません。環境変数を設定する方法については、次のチュートリアルを参照してください。
どのような環境変数？環境変数を設定する方法
第三には、素早く反応構築するために作成反応するアプリの開発環境を使用して
Facebookのから作成反応するアプリを、私たちは、このコマンドは迅速な開発環境に反応構築することができます設定する必要があります。
プロジェクトの作成反応するアプリは自動的にWebPACKの+ ES6に基づいて作成されます。
プロジェクトを作成するには、次のコマンドを実行します。
作成、インストール、CNPM -g $ -REACTのApp
$作成-REACTアプリはPROJECT_NAMEの
$ PROJECT_NAMEのCDが/
$ NPMが起動し
、ブラウザのHTTPでのオープン：// localhostを：3000 /、結果、以下のように：
コマンド・インタプリタ：
NPM：NPMパッケージがインストールされてノードとのコールを表し、
インストール：名前が示すように、の意味をインストールすることです
-g：グローバルインストールを表し、インストールはグローバル平均にインストールされているシステム内のどこにでも使用することができます
作成反応するアプリ：これは、我々はモジュールをインストールしたいものです
ヒント：あなたがアンインストールしたい場合は、インストールした後、あなたは直接UNINSTALはつまり、国連の前にアンインストール表現することができ、変更することができますインストールすることができます。時には、インストールをアンロードした後、あなたが直接作成反応するアプリがディレクトリをインストールし、解決することができ、一般的に、このディレクトリを削除して配置され、間違った報告することがあります。
第四に、一般的に使用されるコマンドインタープリター
のインストール後には、あなたは彼がおおよそ以下のいくつかのコマンドを与えたと言います
標高開始
コマンド効果は：開発用サーバを起動します。
NPM実行ビルド
コマンド効果：の生産に使用される静的コードをビルド[我々の開発が完了し、このコマンドを発行するとき、我々は、サーバーへのコードの生産のために欲しいものを得るために使用されています]
高度試験
コマンド役割：テストサーバーを実行します
NPMの実行イジェクト
コマンド効果：
アプリケーションディレクトリにビルド依存関係、設定ファイルやスクリプトをコピーします。（既定の依存関係は、この操作を実行する場合は、あなたのプロジェクトが依存関係になることを、隠されています）
注意：このアクションは不可逆的です、
あなたのプロジェクトを開始する方法：
CDのPROJECT_NAME
標高開始
V.ビューのプロジェクトのディレクトリ構造
と、我々はプロジェクトディレクトリを開き、あなたはそれらのディレクトリ構造を見ることができます
示されるように、実質的に、3つのフォルダ、ファイル4があります
次のように説明しました：
3つのフォルダ
すべてのインストールされたフォルダを保持するためのnode_modules //ノードモジュール
そのようなHTMLテンプレート、プロジェクトのアイコンとして、すべてのパブリックフォルダを保持するための//パブリックリソース
デフォルトapp.jsによって生成されたコードの中にも、独自のコードのフォルダを保持するためのSRC //
4つのファイル
無視されるように、リモートでコードがライブラリに提出したときに.gitignore //これは、それらの文書を定義するために使用されます
package.json //プロジェクトのモジュールのインストールのさまざまな情報を宣言するために使用され、スクリプト情報
パッケージlock.jsonが//モジュールインストールされたバージョンをロックするために使用、あなたは一貫性のインストールモジュールのバージョンを確保することができます
プロジェクトについてREADME.md //ブルームのドキュメント（英語では、見ることができます興味を持っています）
srcフォルダ
私たちは、コンポーネントのコードが内部に書き込まれる反応するので、その後、我々は、フォーカスsrcフォルダを見てみましょう。
多くの文書、四つの部分はありません
1、APP関連のjs、cssファイルに自動的に私たちが作成したコンポーネント//へ
2、インデックス関連のjs、cssファイル
3、シンプルなアイコンファイルのlogo.svg //デフォルトのアイコン
4、registerServiceWorker.jsファイル//このファイルには、いくつかのリソースは、一般的に本番環境で使用されているキャッシュされた主にアクセス速度を高速化するために使用することができます
アセンブリの構造の分析は、実質的に
より重要な文書についての主な話
1.最初は公開ディレクトリ内のindex.htmlテンプレートで満開になり、単一ページのアプリケーションの開発場合は、コードのすべてがここにレンダリングされます。[Index.htmlとも三つの部分を提出。1.ホーム導入アダプティブビューポートの肉のラベルの声明。2.プロジェクトのリンクラベルは、基本的なコンフィギュレーションファイルのanifest.json mとアイコンのdivタグを作るために使用3.コンポーネントを導入レンダリング反応]
2.また、パブリックディレクトリ内のmanifest.jsonをファイルに、このファイルはAPPが反応するアプリケーションの基本的な設定情報を記録し、彼はAndroidのAndroidManifest.xmlをに似ています
3.次に、SCRファイルがディレクトリに存在しindex.js、彼はコンポーネント反応しないで、彼は橋のリンクですhtnlテンプレートと反応して、すべてのコンポーネントは、最終的に彼によってHTMLテンプレートをレンダリングするために反応しています。次に、アセンブリ全体が導入された文書APPがレンダリングindex.js、デフォルトが発生しました。
本番環境で使用される4 registerServiceWorker.jsファイルは、オフラインモードで、ユーザーがユーザーに無用より良い経験、開発環境を提供するためにキャッシュされたコンテンツにアクセスすることができますできるように、これらのリソースをキャッシュすることができます。。。
5.最後に、主にコンポーネントをテストするために使用さapp.test.jsファイルがある、興味を持っているのをよく見てとることができ、これについて多くの話はありません。
当社独自のコンポーネントを作成する第六に、
プロジェクトファイルの1.基本的な分析が終わって、我々は独自のコンポーネントを作成することができます。
2.私たちは、SRCの下に新しいディレクトリを作成します。myselfComponentを、新しく作成された当社の部品を保持するために
3.我々は、それぞれ、二つの成分C1、C2を作成して、それら各々は、単一の文を表示します
4.その後、我々は内部のindex.jsにC1、C2のコンポーネントを導入し、
5.そして、それがブラウザでどのように動作するかを見ます
C1.js
インポートは、「反応」から、{コンポーネント}を反応させ;
インポート」./C1.css';
クラスC1は、コンポーネント{延び
{レンダリング（）
（戻ります
<DIVクラス名= "C1">
こんにちは、私は同じディレクトリにC1.cssファイルを導入しましたC1-onsサイトのSRC / myselfComponentディレクトリ内のファイルC1.jsよ、私は赤に含まれるテキストに使用されます
</ div>
）;
}
}
輸出デフォルトC1;
C2.js
インポートは、「反応」から、{コンポーネント}を反応させ;
インポート」./C2.css';
クラスC2は、コンポーネント{延び
{レンダリング（）
（戻ります
<DIVクラス名= "C2">
こんにちは、私は同じディレクトリにC2.cssファイルを導入しましたC1-onsサイトのSRC / myselfComponentディレクトリ内のファイルC2.jsよ、私は青に含まれるテキストに使用されます
</ div>
）;
}
}
輸出のデフォルトC2;
index.js
インポートは「反応」からリアクト。
「反応-DOM」からインポートReactDOM。
インポート」./index.css';
「./App」からインポートするアプリケーション。
「./myselfComponent/C1.js'からインポートC1;
「./myselfComponent/C2.js'からインポートC2;
「./registerServiceWorker」からインポートregisterServiceWorker。
ReactDOM.render（
<div>
<C1 />
<アプリケーション/>
<C2 />
</ DIV>、
document.getElementById（ 'ルート'））;
registerServiceWorker（）;
OK、cssファイルを表示するので、あなたの目は過ごしてはいけません
ブラウザの営業結果
それは完璧に動作して見ることができます
そして、より複雑な
以上、私たちは、すべてのコンポーネントがすべてのindex.jsファイルと統一されたレンダリングを導入している置きます。しかし、それは別の構成要素内にネストの成分であり、ネストされた関係の構成要素の実際の開発の間に不可避あります
今、私たちは、コンポーネントC3を記述する必要があり、その後、巣APPアセンブリに連れて行きました。
C3.js
インポートは、「反応」から、{コンポーネント}を反応させ;
インポート」./C3.css';
クラスC3は、コンポーネント{延び
{レンダリング（）
（戻ります
<DIVクラス名= "C3">
こんにちは、私は同じディレクトリにC3.cssファイルを導入しましたC3-onsサイトのSRC / myselfComponentディレクトリ内のファイルC3.jsよ、私は大胆な黄色に含まれるテキストに使用されます
</ div>
）;
}
}
輸出デフォルトC3。
APP.js
インポートは、「反応」から、{コンポーネント}を反応させ;
「./logo.svg」からの輸入のロゴ;
インポート」./App.css';
「./myselfComponent/C3.js'からインポートC3。
クラスアプリケーションは、コンポーネント{延び
{レンダリング（）
（戻ります
<DIVクラス名= "アプリケーション">
<ヘッダ・クラス名=「アプリヘッダ」>
<IMG
SRC = {}ロゴ
クラス名= "のApp-ロゴ"
ALT = "ロゴ" />
<H1クラス名= "のApp-タイトル"> </ H1>を反応させるためにようこそ
</ヘッダ>
<C3 />
<Pクラス名= "のApp-イントロ">
開始、編集の<code>のsrc / App.js </ code>を取得し、リロードする保存します。
</ P>
</ div>
）;
}
}
輸出のデフォルトアプリケーション。
製品版としてパッケージ七、
[OK]を基本的には非常に簡単で、その後、私たちは完成実証プロジェクトを開発し、今我々は（いわゆる本番環境は、コード内のサーバーに公開するために使用される値で、コード生成本番環境を開始する必要がありますコードに応じて、我々は、開発環境を生成します）
コマンドを実行します。
NUM実行ビルド
このコマンドを実行した後、彼は生産環境のニーズのコードに保存されている私たちのプロジェクトのディレクトリにビルドフォルダを作成し、
八、実行するサーバー上に置き
、ユーザーのアクセスに使用し、当社のサーバー上に置かれていること、コード生成環境の世代がリリース開発します
これは比較的単純な、直接のコピー次のように（私は直接内部に構築私のローカルサーバーapachのルートディレクトリにコピーされた場合）、サーバのルートディレクトリにビルド内のすべてのファイルができています
ブラウザ内で実行した結果を見ると（私のapachサーバポートは8087です）
九、内部のリモートサービスの展開にそれを置く
だけで、デモ今ローカルサーバであり、その後、私は、リモートサーバーの展開の中に置きます
あなたは、リモートサーバーにファイルをアップロードする方法がわからない場合は、こちらの記事を参照してください。
サーバーにアップロードする方法H5
ブラウザでのアクセス、[OK]を、すべてが正常です
注：ルートディレクトリにファイルをコピーしたくない場合は、inde.htmlのjsとcssファイルのファイル・パスを変更する必要がある、または通常アクセスすることはできません。
テン、サーバーを維持するために展開
我々のプロジェクトの行が新しい機能を開発する必要があり、バグも、プロジェクトの操作中にどのようにそれを行うには、この時間を発生する可能性がありますか？
1.あなたが新しい機能を開発したい場合は、私たちは地域の発展に直接あることは、次いで包装農産物書類良好で、最終的には直接内部のリモートサーバーへの
問題は、我々はブラウザ内で直接アクセスして、オンラインのコンソールデバッグを開いて、ローカルに良く、さらに修正のために変更した後、HTMLコードの実行を変更することができます2。バグが非常に複雑である場合はもちろん、それは真剣に考えが必要ですが、バグは解決できないことを信じたくありませんでした
その後、下にまとめる：プロセスは次のように
1. nodejsをインストールします。
nodejs NPMパッケージのインストールモジュールの2.作成反応するアプリ
3.私たちのレコード生成反応するアプリモジュールを使用してプロジェクトを作成します。
4.パッケージのテストプロジェクトを実行するために、いくつかのコマンドに私たちをコントロールすることを学びます
5.私たちのNPM開始してプロジェクトを実行します
6.生産のプロジェクトのディレクトリ構造を確認し、その役割を理解します
7.私たち自身のコンポーネントの数を作成し始めました
8.再び私たちのプロジェクトを実行
本番環境での梱包9.スタートコードが必要です
10.当社のサーバーへの我々のコードの展開
11. [OK]を、ライン上で、我々は、ユーザーへの公式訪問を行うことができます
12.保守のデバッグ
これでも完成品は、単に自分のプロジェクトを開発、プロジェクトを反応させ、そして最終的には運転中に、自分のプロジェクト、およびメンテナンスを展開し、ゼロから構築するための開発環境をどのように対処するか、作成語りました。
オリジナルます。https：//blog.csdn.net/tiangongkaiwu152368/article/details/80847494
著作権：この記事はブロガーオリジナル記事です、再現は、ボーエンのリンクを添付してください！