リーンReact学習ガイド(Lean React)-1.1 React紹介

書籍カタログ
1.1 Reactの紹介
1.1.1 Reactとは
React IS A JAVASCRITT LIBRARY FOR BUILDING USER INTERFACES:React公式サイト
狭義にはReactはFacebook内部のオープンソースのフロントエンドUI開発フレームワークであり、広義にはReactはjsフレームワーク自体だけでなく、完全なフロントエンド開発生態系であり、このシステムには以下のものが含まれている.

React.js

ReactRenders: ReactDOM/ReactServer/ReactCanvas

Fluxモードおよびその実装(Redux,Fluxor)

Reactオープンソースコンポーネント

React Native

GraphQl + Relay

いかなる技術も同様であり、技術自体の核心はあまり複雑ではないが、この主体をめぐって多くの依存知識点が体系化された技術スタックを形成している.だから私たちはReactを学ぶのはReact自身を学ぶだけではなくて、この開発体系を学ぶことについて話して、全体の技術スタック、本書もこの技術スタックシステムをめぐる説明です.
本書ではReact Native以外でもシステムの説明が行われており、React NativeはWEBにとってもう一つの大きな技術体系であり、本書ではReact Web開発に重点を置く.
1.1.2 Reactにおける基本概念
まずReactの基本概念を見てみましょう
React.jsReact.jsはReactのコアライブラリであり、アプリケーションではまずコアライブラリをロードする必要があります.
ReactDOM.js ReactDOM.jsはReactのDOMレンダラーである、Reactはコアライブラリとレンダラーを分離しており、ウェブページに開発したコンポーネントを表示するためにReactDOMを呼び出す必要がある.renderメソッドでは、最初のパラメータはReactコンポーネントで、2番目のパラメータはHTML Elementです.
JSXJSXはReactカスタム構文で、最終的にJSXはJSに変換されてページ内で実行されます.
コンポーネントコンポーネントはReactの核心概念であり、ページ内のすべての要素はReactコンポーネントによって表現されており、私たちが書くReactコードのほとんどはReactコンポーネントの開発をしています.
VIRTUAL DOMReactが抽象化した仮想DOMツリーで、仮想ツリーはReactの高性能の鍵です.
一方向データストリーム:one-way reactive data flowReactアプリケーションのコア設計モード、データはトップダウンに流れる
1.1.3 Hello React World
私もせっかちな人で、技術界の慣例に従って、一つの技術を学ぶ前に、まず「Hello World!」と言わなければなりません.

  
    
    
    
    
    
  
  
    

    
        var Hello = React.createClass({
          render: function() {
            return <div>Hello {this.props.name}</div>;
          }
        });

        ReactDOM.render(
          <Hello name="World" />,
          document.getElementById('example')
        );
    
  

読者は新しいHTMLファイルにアクセスし、ブラウザで開くことができます.上のhtmlでは現在、scriptラベル内のコードに関心を持っているだけです.scriptラベル内の構文はJSX構文で、ReactDOMはReactのDOMレンダラーです.
基本的な概念を理解し、Hello Worldを見た後、読者は疑問を抱くかもしれません.

jsx文法はどのようにHTMLの書き方と同じですか?

答え:はい、同じように見えますが、jsxとHTMLの本質の違いは、jsxが直接関数にxmlラベルを書くことです.1.2節では、jsxについて詳しく説明し、HTMLと比較します.

Reactはjsx以外に特別なところはないように見えますが、テンプレート文字列をDOMにレンダリングするのではないでしょうか.Reactと他のフレームワークの違いを教えてくれませんか?

答えは1.1.4節を参照

Hello WorldもReactの能力を見ることができません.まずReactが何ができるか教えてくれませんか.

答えは1.1.5節を参照
1.1.4 Reactの特徴
他のフロントエンドフレームワークに比べて、なぜReactが独創的で、際立っているのでしょうか.

コンポーネントの組み合わせパターン

一方向データストリームの設計

の効率的なパフォーマンス

分離設計

1.1.4.1コンポーネントの組み合わせパターン
コンビネーションモード:コンビネーションモードは部分-全体モードとも呼ばれ、ツリー型構造の問題では、単純な要素と複雑な要素の概念が曖昧になり、クライアントプログラムは単純な要素を処理するように複雑な要素を処理することができ、クライアントプログラムを複雑な要素の内部構造とデカップリングすることができます.
Reactは,アプリケーションレベルでもフォームでもボタンでもコンポーネントと見なし,コンポーネントの組合せに基づいてアプリケーション全体を構築する組合せモードであり,このような構造は,フロントエンド界が望んでいるのになかなか来ないweb componentである.
Reactのコンポーネントの組み合わせ:
コンビネーション・モードに基づく利点:

再利用可能なコンポーネントを構築する:コンポーネントの開発は会社のコンポーネントライブラリを形成することができ、各業務の開発は再利用可能なコンポーネントを蓄積することができる.

学習障害なし:自然にHTMLの構造に合致し、フロントエンド開発者にとって学習障害はほとんどありません.

は弾力性のあるアーキテクチャを持っています.組み合わせモードは簡単ですが、効果的で、簡単なページを構築したり、大規模なフロントエンドアプリケーションを構築したりすることができます.

ソースコードの高いメンテナンス性:開発は仕事の一部にすぎず、アプリケーションのオンライン化は悪夢の始まりであり、多くの大規模なアプリケーションは複製されたビジネスロジックのため、ビジネスニーズに迅速に応答できず、メンテナンス性が低い.

1.1.4.2一方向データストリームの設計
Javascriptはスクリプト言語であることはよく知られていますが、静的言語のようにコンパイルによって位置決めすることはできません.アプリケーションに位置決めするバグを明確にするには、ビジネスコードを深く理解する必要があります.大規模なフロントエンドアプリケーションでは、ビジネスコードの量が大きく複雑なため、バグに位置決めすることは難しいです.しかしReactの一方向データストリームの設計はフロントエンドのバグの位置決めを簡単にし、ページのUIとデータの対応は唯一であり、位置決めデータの変化によってページの表現問題を位置決めすることができる.
一方向データストリームの設計:
1.1.4.3効率的な性能
ここでは、virtual domという概念を理解しているか、聞いているかもしれません.Reactがこのように設計できるのはVirtual DOMアルゴリズムのおかげで、アルゴリズムに基づいて変更する必要がある要素だけを再レンダリングすることができます.virtual DOMアルゴリズムの実装については後述する内部実装章で詳細に説明する
1.1.4.4分離フレーム設計
React.jsの現在のバージョンでは、ソースコードはReactDOMとReactに分かれています.js . これは、Reactがウェブ側だけでなく、サービス側(nodejs)、Native側でも動作できることを意味します.
同時に、Threeのような独自のレンダラーをカスタマイズすることができます.js, Pixi.js, D3.jsのReact方式でレンダリングします.
1.1.5 React応用範囲
Reactが適用できる範囲:

webエンドアプリケーション

ネイティブアプリケーション-IOS、Android、Nativeアプリケーション

Node.Jsサービス側レンダリング

1.1.5.1 Webエンドアプリケーション
WebアプリケーションはReactの出発点であり、Reactを通じて簡単なTODOAPPから大規模な電子商取引ショッピングサイトアプリケーションを構築することができます.また、HTMLの処理以外にも、Web側ではReactによってデータの可視化、グラフの表示、ゲーム開発を実現することができます.
1.1.5.2原生応用
Web端末のほかに、同じjsx構文を使用してIOSまたはAndroidアプリケーションを構築することができます.これはフェイスブックのオープンソースのReact Nativeのおかげです.React Nativeに基づいて、jsxを使用して、IOSおよびandroidで動作するオリジナルのアプリケーション性能を有するUIを実現することができ、NWを使用することもできる.jsまたはElectronは、Reactベースのデスクトップアプリケーションを実現する.
1.1.5.3サービス側レンダリング
Reactは、Web環境やNative環境のほか、サーバ側でHTMLをレンダリングすることも可能です.