React学習(一)-create-react-app

9161 ワード
javascript react.js
前言
現在、フロントエンドで人気のある3つのフレームワークVue、Angular、Reactは、Web開発者にとって、すでに見慣れない言葉ではありません.
三者は業務の最終的な目的を実現しても一致することができるが、それぞれ特色があり、その中のいかなる枠組みも、個人的には博大で奥深いと思っているが、輪は少しでもよく、勉強しなければならない内容はたくさんあり、私も簡単に味わうだけだ.
时には、仕事のプロジェクトの需要のため、自分で各技术のスタックを切り替える时、しばらくの时间が役に立たない限り、少し熟知していないで、结局自分の功力が足りないことを认めなければなりません
本文は何の教程ではありませんて、ただ自分の学习の过程の中のいくつかの総括と思考として、いっしょに学习して、共に成长します~
本文はここから~
Reactって何?
ユーザーインタフェースを構築するためのjavascriptライブラリ、MVCアーキテクチャのV層
  • 宣言プログラミング(目的を達成するには、何をすべきか、具体的には指定しないが、以下のコードに示す)
    • データプログラミングに向けて、データを構築すればいいです.reactは自動的にウェブサイトを構築してあげます.データを図面として理解することができます.図面ができたら、Reactは自動的にこの図面と結びつけて、このビルを構築して、ページ全体のDOMを構築することができます.
    データが何なのか、ページに何が表示されているのか、この宣言的な開発は、ReactプログラミングがもたらすメリットであるDOM操作を大幅に節約するのに役立ちます.
    /**
*
*   :      ，              ，              
*        toLowerCase
*           map  ，             
*/

let toLowerCase = arr => arr.map(function(item) {
return item.toLowerCase();
})

let aToCasesA = ['SUIBICHUANJI','ITCLANCODER', 'ZHONGGUO', 'BEIJING', 'AGE'];
let aToCasesB = toLowerCase(aToCasesA);
console.log(aToCasesA); // ["SUIBICHUANJI", "ITCLANCODER", "ZHONGGUO", "BEIJING", "AGE"]
console.log(aToCasesB); // ["suibichuanji", "itclancoder", "zhongguo", "beijing", "age"]
  • 命令式プログラミング(jQuery操作DOMのように、ページを作成して、DOMにどのようにマウントするか、どのようにするかを少し教えて、JQ、オリジナルでも命令式プログラミングで、すべてDOM操作をして、要素を取得して、要素をバインドして、操作を実行しています)
    • /*
*      :           
*   ，             ，             ，
               ，        
*/


var aToCasesA = ['SUIBICHUANJI', 'ITCLANCODER', 'ZHONGGUO', 'BEIJING', 'AGE'];
function toLowerCase(arr) {
var res = [];
for(var i = 0; i < arr.length; i++) {
res.push(arr[i].toLowerCase());
}
return res;
}
var aToCasesB = toLowerCase(aToCasesA);
console.log(aToCasesA); // ["SUIBICHUANJI", "ITCLANCODER", "ZHONGGUO", "BEIJING", "AGE"]
console.log(aToCasesB); // ["suibichuanji", "itclancoder", "zhongguo", "beijing", "age"]
  • 関数式プログラミング:書くのはすべていくつかの関数で、もたらすメリットは、メンテナンスが比較的に容易で、1つの関数が比較的に大きい時、分割することができて、すべての関数はそれぞれその職を司って、フロントエンドの自動化テスト(配列の中のいくつかのmap、reduce、findなどの方法の応用は関数式プログラミングです)
  • ビューレイヤフレーム(大規模なプロジェクトでは、Reactだけではだめです.データ層のフレームワークと協力して、コンポーネント間の親子コンポーネントの値伝達の問題を解決しなければなりません.Reactは自分をビュー層のフレームワークに定義します.何の問題も解決できるわけではありません.データとページレンダリングの問題を解決するのに役立ちます.コンポーネント間でどのように値を伝達するかは、他のコンポーネントに渡します.

    • 小型プロジェクトではReactの親子コンポーネントを介して値を伝達することができるが、大型プロジェクトでは、flux、redux、moboxのようなデータ層フレームワークを使用するだけでは十分ではないため、学習コストも比較的高い.
    Reactは何ができるの?
  • Webアプリケーション(Webサイト、pc端末、モバイル端末など、例えば:知乎、簡書など)
    • を書く
  • デスクトップクライアントアプリケーション(vscodeまたは一部のレポートソフトウェアがウィンドウを携帯するアプリケーションと同様)
  • webApp--react native,ハイブリッド開発アプリケーション
  • サーバ側アプリケーション(java,phpなどのバックエンド言語でできること、reactでもできる)
    • あなたが思わなかった応用だけで、実現できない技術はありません...
    Reactプロジェクトを初期化
    ぜんちじょうけん
    コマンドラインダウン(windowsにおけるDOS CMDダウンまたはgitツール)、アップルMacコンピュータは持参したTerminalを使用することができ、Linuxユーザーにとってコマンドラインの動作ダウンは言うまでもなく、ここではWindows開発ダウンを例に挙げる
    ダウンロードインストールNodeJS(React自体はNode.jsに依存していませんが、プロジェクトに必要な依存パッケージ/ツール、Node.jsのサポートが必要です)、ローカルでNodeをインストールすると、デフォルトではnpmパッケージ管理ツールがインストールされます.
    cmdまたはgitコマンドラインの下で、Nodeとnpmがインストールに成功したかどうかを検出し、npmがパッケージをダウンロードするのが遅い場合は、国内の淘宝のcnpmを使用することもできます
    D:\   \2019>node -v
v10.13.0
D:\   \2019>npm -v
6.4.1

    もちろん、cnpmをインストールして、国内の地止を使って、依存パッケージをダウンロードするのは少し速いです
    $ npm install -g cnpm --registry=https://registry.npm.taobao.org

    cnpmをインストールした後、npmと使用しても何の違いもありません.
    chromeブラウザ(アプリケーションストアでReact Developer Toolsデバッグツールをダウンロード)
    create-react-app足場ツール
    create-react-app(reactアプリケーションの作成)npmによって発行されたインストールパッケージであり、nodejsがインストールされた後、コマンド端末の下でnpmまたはcnpmコマンドを実行し、create-react-appという足場ツールをグローバルにインストールするコマンドでもある.
    D:\   \2019 npm install --global create-react-app
  
D:\   \2019 cnpm install -g create-react-app
  -g --global

    create-react-app足場ツールをインストールした後にcreate-react-appコマンドを実行します.このコマンドは、現在のディレクトリの下で指定したパラメータ名のアプリケーションディレクトリを作成します.reactプロジェクトを作成するには、3つの方法があります.1つは、create-react-appアプリケーション名です.この方法を推奨します.
    D:\   \2019 create-react-app myfirstreactapp
D:\   \2019 cd myfirstreactapp
D:\   \2019 npm start

    方式2:npm init react-app my-first-react-app
    D:\   \2019 npm init react-app myfirstreactapp
D:\   \2019 cd myfirstreactapp
D:\   \2019 npm start

    方法3:yarn,yarn create react-app my-react-appを使用する
    D:\   \2019 yarn create react-app myfirstreactapp
D:\   \2019 cd myfirstreactapp
D:\   \2019 npm start

    方法4:npx create-react-appアプリケーション名は、方法1と等価です.npx create-react-appmy-appを実行すると、最新バージョンのCreate React Appが自動的にインストールされます.create-react-appをグローバルにインストールしたことがある場合は、グローバルにアンインストールしてください.
    npx create-react-app myfirstreactapp

    注意事項
  • アプリケーション名には大文字を含めることはできません(アルパカ式ではなく、小文字のみ、例えば以下に示す
    • .
    D:\   \2019 create-react-app myFirstReactApp X
D:\   \2019 a project called "myFirstReactApp" because of npm naming restrictions
* name can no longer contain capital letters
  • npx create-react-appコマンドを使用してreactアプリケーションの作成に失敗した場合、淘宝ミラーを変更し、国内ダウンロードに置き換え、変更が完了した後、npmまたはcnpmおよびいくつかの他のコマンドを使用すると、ダウンロード依存パッケージは多くの
    • より速くなります.
    npmのミラーソースの表示
    D:\   \2019 npm config get registry
//    ：https://registry.npmjs.org/

    宝を洗う鏡像の源に修正します
    D:\   \2019 npm config set registry https://registry.npm.taobao.org

    create-react-app作成プロジェクト
    D:\   \2019 npx create-react-app

    以上のコマンドはreactプロジェクトアプリケーションを作成し、このディレクトリの下で自動的にアプリケーションフレームワークのコード構造を作成します.
    srcでサブディレクトリを作成できます.リビルドを高速化するには
    注意:Webpackはsrcのファイルのみを処理します.JSファイルとCSSファイルをsrcに置く必要があります.そうしないとWebpackはそれらを見ません.
    このcreate-react-appツールを使用して作成されたアプリケーションは、面倒な手動構成作業を避けることができます.react技術はwebpackツールに依存しています.これも技術です.
    準備が整うと、npm startコマンドを実行すると、ローカル開発モードのサービスが起動し、自動的にWebページが開き、ローカル停止を指します.http://localhost:3000下の図のように、自分で起動したポート番号を基準にします.
    次に、お気に入りのコードエディタでプロジェクトを開きます.これはこのセクションの最も重要な内容です.
    myfirstreactapp
├── package-lock.json //            ，       git，       npm install           ,        ,                  ，        、       ，      package-lock.json              ，                   ，  npm install        
├── package.json //           ,    ,   ,     ,       ,  ，    ，     
├── public
│ ├── favicon.ico // icon  
│ ├── index.html //    ,    
│ └── manifest.json //    app        ,       ,    icons，         ,              ,    ,           、  、                     ，   android   manifest.xlm    
├── README.md //     
└── src //     
├── App.css // App       
├── App.js // App         ,    react         
├── App.test.js // App       
├── index.css //     index   
├── index.js //            ,          ,        App   ，App        App.js     
├── logo.svg //   ,  
└── serviceWorker.js //                    app         ,

    Reactのコンポーネント
    reactで重要なアイデアはコンポーネント(Component)によってアプリケーションを開発することであり、コンポーネントとは、ある特定の機能を完成させることができる独立した、再利用可能なコード(ページの一部)を指す.
    コンポーネントベースの応用開発は広く使われているソフトウェア開発モデルであり、分けて治める方法で、一つの大きな応用をいくつかの小さなコンポーネントに分解し、各コンポーネントはある小さな範囲の特定の機能にしか注目していないが、コンポーネントを組み合わせることで、一つの機能の膨大な応用を構成することができる.
    適用は、他のコンポーネントをレンダリングするコンポーネントにすぎません.
    reactアプリケーションはコンポーネントから構成されているとも言えますが、コンポーネントをブラウザに新しいHTMLタグを認識させる方法と理解することができます.コンポーネントを実現するメリットは、コンポーネント間のデータストリームなど、オリジナルのHTMLタグの機能を拡張することです.
    AngularJSを使ったことがあれば,コンポーネントを類似命令の概念として理解することができ,現在の開発モデルではコンポーネントベースの開発が非常に流行している.
    reactはユーザーインタラクティブコンポーネントの構築に非常に適しています
    1つのReactアプリケーションは実際にはコンポーネントからなるツリーであり,実際には他の2つのフレームワーク(vue,Angular)も同様である.
    このツリーのルートノードでは、最上位レベルのコンポーネントがアプリケーション自体であり、ブラウザが起動したり、アプリケーションを起動したりするときにレンダリングされます.
    コンポーネントはツリー構造で構成されているため、各コンポーネントがレンダリングされると、下位コンポーネントが再帰的にレンダリングされます.
    Reactの特徴
  • 仮想DOM
    • DOM diffアルゴリズムでは、ページ全体をレンダリングせずに差分化された部分だけが更新され、効率が向上します.
  • アセンブリ化
    • ページをいくつかのコンポーネントに分けて、コンポーネントの中に論理構造とスタイルコンポーネントが含まれているのは自分の論理だけで、コンポーネントを更新する時予測することができて、全体のページを維持して複数のコンポーネントを分割するのに役立ち、再利用することができます
  • 一方向データストリーム(親コンポーネントは子コンポーネントに値を渡すことができますが、子コンポーネントは親コンポーネントしか使用できません)、子コンポーネントはこの値を直接書き換えることができず、一方向に伝えることしかできませんが、逆に修正することはできません.この目的を達成するには、子コンポーネントは親コンポーネントを呼び出す方法で、親コンポーネントで自分を変えることで操作します.メンテナンスコードが便利)
  • は、他のフレームワーク(Jq,Angular等)
    • と併存することができる.
    データは、最上位コンポーネントからサブコンポーネントに渡されるデータ制御可能
    reactアプリケーションの基本フローを書く
    実はreactだけでなくvueもAngularも、従う流れは同じです.
    プロダクトマネージャが提供するプロトタイプ図やUIデザイナーが提供する設計原稿に基づいて、まずコードを書き始めるのではなく、ページに基づいて、大きさや細さによって、ページをいくつかのコンポーネントに分割します.
    ページの内容をグループ化して、抽象的に1つのコンポーネントになって、上から下まで、私たちの応用を組み合わせて、それによって1つの完全なソフトウェアシステムの応用を構成します
    creact-react-app足場から学んだ
  • はすべてjsで、以前は内容(html)、積層様式(css)、行為(js)にこだわって分離して、この分離は物理層ファイルの分離だけで、1つの全体と見なすならば、cssはjsと同じように、モジュールの形式でjsの裏面に埋め込むことができる
    • である.
  • がコンポーネントを構成する態様
    • .
    まとめ
    本文は主にreactが何なのか、creact-react-app足場ツールを通じてreact初期化のプロジェクトを構築し、その中でreactアプリケーションを初期化し、多くの方法がある.
    その中で最も重要なのは、プロジェクトディレクトリファイルの意味を初期化し、reactコンポーネントを構築する方法と、reactのコンポーネント、reactの特徴、reactアプリケーションの基本的な流れを書くことです.初期化プロジェクトから、reactプログラミング方式を学びました.
    Python大規模データストレージと読み取り、並列計算:Daskライブラリの概要
    assertと異常の使用