要約：技術選択の選択肢が反応する理由など、復興の前に技術文書の調査と分析、アプリケーション・プロセスの注意事項。
まず、なぜリアクト選びます
反応は、現在最も広く使用されているフロントエンドのフレームワークです。角度三のSPAフレームワークは、Vueの比較を反応します。
- 角度が最初に表示されますが、それは技術革新のパフォーマンスの最適化の原則に反応し、その比較的面倒ではなかったです。
- Vueのは、遅くとも現れ、学んだその基本原則は、単に構文の変更に反応、関係が反応のためのパイオニア、Vueの学習者でした。
- コミュニティは、強い生命力と革新を持って反応し、JSの使用を含む新興革新的な技術革新は、操作することができますネイティブネイティブコントロールを反応させ、Vueの後のフォローアップに類似Weexの研究が、より悪い多くの成熟度の両方。
両方のgithubの中に、Vueのより今はるかに大きな生態系を反応させ、stackoverflowのなど最大のテクノロジーコミュニティの検索、検索結果がVueのは、ほかに、約10倍であるサイトの最近の統計によるとVueのは、いくつかの反応使用される反応百回以上。より多くの資源利用できるより多くの生態学的手段、および問題が発生した選択されたコアの理由のパフォーマンスを反応させること以外にある参照の助けを借りて、より効果的なことができます。
リアクト選択した後、アプリケーションは以下の分野でアップグレードする必要があります。
- 元の黒と白のHTMLジャンプの間に、最初は、この問題を持たない単一ページのアプリケーションとして反応しながら、Androidのマシンのパフォーマンスの低下に特に明らかである短命現象であろう。
- 第二に、元のDOMコピー程度であり、DOM後のコントラストが変化し、DOMは唯一の疑いを超えてパフォーマンスを向上させるために、レンダリングの最小コスト、VDOM革新的なパフォーマンスの最適化を実現するために異なるノードをレンダリングし、仮想DOMは、差分アルゴリズムが含まれて提供リアクト。
- 第三に、コアコンポーネント技術、容易な結合事象の挙動を動的に特定のDOM、よりモジュールやコード、構造の明確かつ容易なメンテナンスを再利用しやすいコードを更新し反応します。
第二に、携帯端末の使用が反応します
3つのモバイルエンドフレームは、それぞれ独自のものがあります。イオンの角度、のネイティブ、VueののWeexに反応反応します。イオンコルドバの技術に基づいている、まだブラウザアプリケーションです。後者の2つの操作がWeexユーザーをWeexよりもはるかに高いネイティブリアクト成熟ネイティブインタフェース、から作られた、ネイティブコントロールのレベルにまで上昇していない、多くの企業で使用されてきたが、めったに。
現在コルドバコルドバ+ Reactjsからの移行のために、明白な生態系の全体に最良の選択を反応させ、その後、スムーズにネイティブパフォーマンスの最適な混合物を開発するために、ネイティブ、同等の方法を反応させます。平滑は、Android IOSおよび最終用途は、ネイティブコードに関与残っても、基本的なリソースが利用可能で見つけることができコード（JS）の約90％においてネイティブ反応するのでコルドバは、同じプラグインのような理由。結局のところ、あなたが開発するためにJS、OC（またはSWIFT）の両方の制御、JAVA（またはkotlin）を必要とする場合は、ネイティブに反応し、この技術は、誰かがしません。知識を開発するネイティブがある場合はもちろん、逆に、その後、ネイティブは間違いなく役立つリアクト開発します。
コードのほとんどはReactjsを再利用できるため、比較的大きなスパン、アプリケーションの基盤となるアーキテクチャに関連する変更の言葉にネイティブ直接遷移を反応し、比較的容易コルドバ+ Reactjsを回したが、ネイティブ多くを反応させることヴァ+ Reactjsによっても簡単。
第三に、開発ツールの選択肢Reactjs
まず第一に、政府開発足場作成反応するアプリの、最も人気のあるパッケージングツールは、JSのバージョンの互換性のトランスコーダを改善し、babel- webpack-統合し、これらの間ESLint-コード検出ツールおよび他の一般的なツール、比較優れた構成のツール。足場が、これらのツールの設定ファイルが隠されているということ言及する価値がある、意図は、ユーザーがコーディングに専念できるようにすることですが、通常、自分の実際の使用を設定するには、そこに必要があり、実行が発生する可能性があります。この時点でNPMの実行イジェクトあります隠されたプロファイル。
反応-ルータは、それが元のHTMLジャンプの間に単一ページのアプリケーション・インタフェースが異なるため、公式には、ルート管理ツールをお勧めしている、実質ベースでのジャンプは、コンポーネント間にあるので、管理を統一するために管理ツールをルーティングする必要があります。反応-ルータはオンデマンドでロードWebPACKのコードで実装されてもよい、ということに言及する価値があります。
一般的には、WebPACKのパッケージの後に圧縮されているものの、一般的にはまだ少なくとも数百キロバイトを持って、このファイルが前にすべてのjs jsのコードが含まれているので、ファイル全体をロードする単一のページでアプリケーションを開いて、圧縮されたJSファイルを生成します。もう少し複雑なアプリケーション、パッケージファイルがそれに応じて増加しています。ロード時間は、関係なく、パフォーマンスの無駄が生じ、それをダウンロードし、ロードするコードを実装していない人たちの、それは最後に明らかにウェブ上で重要であるが、コルドバに直接ローカルjsのコードをパックされ、等しいスキップダウンロード手順が、まだロードプロセスが存在します。コードを記述し、それに応じて改変することによってRequire.ensureルータは、JSファイルのロードに必要なオンデマンドローディング対応する、複数のファイル内のWebPACKのJSに配置することができます。
Reduxのは、最も広く使用されているサードパーティの状態の管理ツールであり、多状態相互作用データ内のアプリケーションは、明確には述べコードのより便利で統一された管理構造とすることができるときにその役割があり、下の図は、画像の解釈を示しています。実際の開発は、一般的にCRUDが向け同様の構成としながら、Reduxのを使用しない（Reduxの自体やや複雑な）のReduxの導入コストを考慮すると、複数のデータインタラクションモジュールせずに使用することができる、技術/ minの機能モジュールの独立した開発が分割されているにのでインスタントメッセージングおよびモジュールの他のWebSocketフィット再来。
プロジェクトのためにある程度のUIスタイルの開発を簡素化し、適切なUIコンポーネントライブラリを選択して、それが提供するトランジションアニメーション効果を使用して検討します。この点ではgithubの上で最も人気のあるのより多くの選択肢、Googleのマテリアルデザイン素材-UIスタイルが、その現在のデザイン言語と私たちの明確なAPPを持っている、テンセントweuiアリは、モバイルantdとより類似した、モバイルをantdましたアリは自分の足場DVAにフィットするように意図されていたので、より複雑な作成反応するアプリ足場の構成アイテムと組み合わせて使用する場合、これを一時的weuiを選択する（反応し、ルータとReduxのをカプセル化）、特定のコンポーネントの後期開発ニーズは、他と組み合わせることができますUIライブラリ。
ページジャンプ遷移アニメーションのように、一部のUIライブラリは、いくつかの過渡的なスタイルは、そのような試金石を提供します。しかし、ライブラリはもはや、貧しい人々のドキュメントを維持していない、とそこに使用して反応し、ルータの非互換性の新しいバージョンとされます。その後、公式文書がアニメーションスリーピース組み合わせCSS3アニメーション、トランジションのライブラリを使用して、公式のアニメーションライブラリ反応-アドオン-CSS-遷移グループを見つけ、あなたがそのようなプログレッシブ変換などの基本的なトランジション効果、などのアニメーション効果の様々な変換達成することができます訪問ように。
また、CSS上、それは1ページのアプリケーションなので、対処しなければ、CSSファイルは、その後、直接最終的なパッケージは、同じ名前のスタイルの影響による世界的な、交差汚染へのCSSファイルのスタイルを生成するためにつながるインポートするため。この問題の解決策を解決するために多くの方法があります。Facebookは積極的にjsの悪い方法で可読性CSSを探るが、直接インラインスタイルのコードを記述します。現在、最も広く使用されているソリューションはWebPACKの構成でオープンCSS-モジュール、すなわちモジュールのオプションである、オブジェクトスタイルを記述するためにスタイルを使用しています。
原則はその独自性を維持するためにハッシュ文字列にまとめたパッケージでCSSクラス名を解決することです。しかし、再び、あなたは少し複雑、グローバルスタイルを設定するために使用する、そしてそれは、クラスの名前が途中オブジェクトの準備の方法であるとき、あなたは全体を変更する必要があり、それを使用することで、他の、何のサポートを発見した - クラス命名のダッシュ、サポート私たちはラクダをお勧めします、そして、我々は考慮に入れて、オリジナルのHTMLとCSSクラス名が改訂に対応しなければならないことを意味し、主に水平方向の指定したスタイルのクラス名をHTMLの前で、スタイルクラス名がこのように非常に多くあり、下線あきらめます。
また、人々の数は、CSS-モジュールに基づく高次成分を使用し、単純な区別するために、ローカルおよびグローバルスタイルを命名水平線をできるように、よりになります-CSS-モジュールは反応するが、それはあきらめて大きい程度で、パフォーマンスにドラッグします表示されたベンチマークテストがありますがあります。この問題に、元のCSSの文言と互換性の最大限を解決するために、理由はCSSの膨大な数のクラススタイルの前に、最小限の変更、すなわち。
地元のプラスクラスは、クラスのこのタイプ、すなわちWebPACKを自動的にハッシュトランスコード処理のローカルスコープになります後、しかし、クラス名は明らかにプラスである：WebPACKのCSSのローダは、プロパティを持って退屈な作業のローカルソートクラス名の前に追加統一内のローカルCSSファイル：ので、私は、私は、ネストされたプロパティがSCSSになります使用と考えていました。ここでの関与は、足場SCSSのサポートを追加することで作成-反応するアプリ、コマンドラインインストール、およびスクリプトのファイルに元SCSSのCSSファイルを、CSS見るpackage.jsonの指示を追加し、最外層、ローカル自動的にcssファイルの次のSCSSファイルを生成するために、時計-CSSコマンドを実行すると、自動的にクラス名を追加します：追加のローカル良好な適合性、相当：ローカルプレフィックスを、この方法は、すべてのクラスとすべてのスタイルではないことを実際に発見されましたあなたは、代わりにファイル名を使用することができます：ローカル、しなければならない満たされているこの元のプロジェクトに固有のファイル名、ファイル名のままです。そのようなオリジナルのcssファイルの方法の導入、最低価格となるよう、CSSのグローバルな導入は、変更する必要はありません方法。
SCSSのSASS 3は、新しい文法の導入は、構文は完全に互換性CSS3であり、かつ、ネスティング、変数、相続の構文を追加するSASS、SASSと少ないフロントエンド拡張CSSの一般的な方法の強力な機能を継承しますが、CSSにコンパイルする必要があります終了する（安定性の考慮事項）を使用します。
注意することはコンバイン四、Reactjsとコルドバ
wwwディレクトリのコルドバの下に入れ、最終的に開発Reactjs足場作成反応するアプリの公式、およびNPMの実行ビルドによって単一ページのWebアプリケーションを生成するには、することができます。オリジナルの開発者が直接ディレクトリを含むプロジェクトのコルドバのwwwディレクトリの下に開発されている間により2つの別個の部分の開発に、この差は、いくつかの問題があります。例えば、いくつかでは、使用のために導入されたコルドバのエクスポート関数や変数の後にインストールプラグインは、分離の初めから、作成アプリを反応させ、これらの変数を見つけることができない、それはエラー変数があるが、ビルド時に定義されていない原因最後に置くコルドバプロジェクトは、変数やランニングで見つけることができますが、コンソールの開発の最初のステップは、開発経験に影響を与え、デバッグを妨げるエラーの束を報告した後反応します。
いくつかのgithubのリポジトリにコルドバを反応するが、本質的には、それら全てがNPMの実行ビルドでパッケージ化する必要があり、それは問題にプラグインの変数の導入を解決しないと、作成反応するアプリを撃退するための場所を持つことになりますがあります。だから、私たちは回り道を取ることができESLintエラー検出メカニズムに影響を与えずに、ここで反応を与えられていないプラグインが提供する変数を作成する方法が必要です。ときdevicereadyこのファイルのグローバルプラグインを追加することができますので、srcフォルダの下、およびパブリックフォルダ内のコンソールは、唯一のindex.htmlファイルがあるエラーのコードは最終的に、wwwディレクトリの下にパッケージ化されますビルドします変数（グローバル変数のこのクラスの一意性、または名前空間接頭辞プラグインなどの保証を使用して追加することができることに注意してください）、およびコンソールをバイパスすることができ、デバッグビルドを与えられているように、値は、srcディレクトリ内のコードに渡されます。
もう一つの小さなトリックは、コルドバのエンジニアリングプロジェクトディレクトリの下に直接反応wwwディレクトリで最終ビルドに結果のファイルを指定して、手動で転送文書を処理する必要性を排除することができます。
そこ「」に注意する事は、コルドバに置かれたとき、ローカルな場所にあるファイルプロトコルを使用して生産構成のWebPACK公共パスの前に追加する必要がありますする必要が絶対的で公共のパスのデフォルトの設定で反応させることによるものであり、またはパッケージで「../www」または 『ホームページ』：「」の代わりに相対パス、それ以外のファイルを見つけることができなかった状況が最後のオプションここで推奨されます.jsonファイルには、行「ホームページ」を追加します。
ディレクトリ構造5、プロジェクトに反応
まず、IDEを選択webstorm、強力な、とプロジェクトチームは、ダウンを使用することができますが、注意すべき点は、ディレクトリは、依存node_modulesが含まれている場合ということである前に、非常に大規模なインストールのこのフォルダのファイル数、webstorm関連するコード・インテリジェンス以来リソース集約、一部のコンピュータでは、時折私の構成で比較的高いことが立ち往生現象（SSDはプラスに8グラムメモリ）を同じコンピュータ上に現れますとき、解決策は、ファイル設定 - です設定されているファイルの種類はnode_modulesフォルダを無視します。
この図は、ディレクトリの作成反応するアプリのプロジェクト、srcディレクトリ内のメインのコードです。コンポーネントは、すべてのコンポーネントが含まれています。JSX技術htmlとjsのは、一緒に入れているため、より厳しい取締りのコンポーネント技術に反応した後、各部分は、コンポーネントベースの再利用が便利なだけではない、また明らかにいくつかの部分に分かれページも、最終的には親アセンブリの上映にすることができ、スプリット独自のロジックとページの表示機能を備えていますので、より明確にし、維持しやすいです。他の人がレンダリングされませんでしたしながら、実際には、我々は、アイデアを提案反応し、すべてのコンポーネントであるが、いくつかのコンポーネントは、インタフェースの一部をレンダリングします。
ConfigureServicesでの認証サーバのアドレスを追加すると、
コピーし
ます。public void ConfigureServices（IServiceCollectionサービス）
（ "ベアラー" www.xincheng0001.cn）services.AddAuthentication
.AddIdentityServerAuthentication（オプション=>
options.Authority =「http://www.dwyuLe.ccはlocalhost：5000 "; //認証サーバアドレス
options.RequireHttpsMetadata = www.yuanyyule.cn偽; //必要はありませんHTTPS
options.ApiName = www.qjljdgt.cn" API1「
ConfigureメソッドでIdentityServer4サービスミドルウェアを追加
）（app.UseIdentityServer。
試験
[承認]コントローラ上にクライアント側の値を増加させる
サーバ・リソースへの直接アクセスがhttp://www.jintianxuesha.com
プロジェクトメンバーは、私は日誌モジュールを書いた部品を置くwork_log公共の要求、コンポーネント上の図の下に導入外部プットの外付け部品として、独自のメソッドを書く公共のアセンブリを置くために使用される一般的なファイルがありますが、様々な機能モジュールは、それぞれそれが使用されている方法の前に、統一された方法を命名アンダースコアを使用して、フォルダを作成します。部門および階層の前に特定の機能モジュールを参照することができます。
HTML階層が最後に出現におけるフォルダに機能モジュールの非存在下で得られた、厳密に2つ（論理のジャンプパスに関連する）でなければならない前に、そのような前に上記ログブックに含まれるように、言及する価値があります直接、各ファイルや他のいくつかの機能モジュールは、フォルダ設定を一緒に配置しました。今限り、統一された構成では、コンポーネントのジャンプに、本質的には、良いルーティングルータに反応として、存在しないパスを制限するためにジャンプします。
定数は、各種インタフェース経路のような種々の定数を格納するフォルダ。フォントフォントのアイコンは、いくつかのフォルダが、スタイルの分権化SCSS / CSSスタイルファイルの一部ですReduxのReduxの下、画像保存されたファイル、画像を保存します。Index.js入り口もrouter.jsルート関係は、アプリケーション全体で維持されている最上位の親コンポーネントです。
上記の調査では、技術文書の数が多いだけでなく、アイデアや理由の練習用や探査結果のオープンソースコミュニティフォーラムの選択や組み合わせを閲覧テクニカル分析文書、である、まだいくつかの点であってもよい、それに追加されていない、将来は新しい知識と実践を取り入れます改善し続けています。