高次コンポーネントReactReactを使い始める備考Reactは、宣言的なコンポーネントベースのJavaScriptライブラリであり、ユーザーインターフェイスの作成に使用されます。ReactのMVCフレームワークのような機能を実現するために、開発者はFluxフレーバー、例えばReduxと組み合わせて使用​​します。2017-06-13ReactJSとは何ですか?ReactJSはオープンソースのコンポーネントベースのフロントエンドライブラリで、アプリケーションのビューレイヤのみを担当します。それはFacebookによって維持されています。DOMのデータ(ビュー)を埋め込みます。それぞれが小さな再利用可能なHTMLを出力します。コンポーネントは他のコンポーネント内にネストすることができ、複雑なアプリケーションを単純なビルディングブロックから構築することができます。コンポーネントは内部状態を維持することもできます。TabListコンポーネントには、現在開いているタブに対応する変数が格納されます。Reactは、JSXというドメイン固有の言語を使ってコンポーネントを書くことができます。JSXでは、JavaScriptイベントでミキシングしながら、HTMLを使用してコンポーネントを記述することができます。Reactはこれを内部的に仮想DOMに変換し、最終的にHTMLを出力します。Reactは、仮想DOMを利用して、コンポーネントの状態変化を迅速かつ自動的にHTMLアプリケーションのDOMに再レンダリングするために反応します。仮想DOMは、実際のDOMのメモリ内表現です。Reactは、ブラウザーのDOMで直接処理するのではなく、仮想DOM内でほとんどの処理を行うことで、直ちに動作し、最後のレンダリングサイクルが発生してから変更されたコンポーネントの追加、更新、および削除のみを行います。再利用可能なコンポーネントを作成するための絶対的な基礎コンポーネントと小道具Reactはアプリケーションの視点にのみ関わっているため、Reactの開発の大部分はコンポーネントの作成です。コンポーネントは、アプリケーションのビューの一部を表します。アプリケーションがコンポーネントとやりとりする主な方法です。Reactコンポーネントをシンプルな関数と考えることは有益です。彼らは「小道具」の形で入力し、出力をマークアップとして生成します。多くのシンプルなコンポーネントはこれをさらに進化させ、「純粋な関数」を作ります。副作用を起こさず、冪等です(入力がある場合、コンポーネントは常に同じ出力を生成します)。この目標は、実際にコンポーネントを「クラス」ではなく関数として作成することによって正式に実施することができます。Reactコンポーネントを作成する方法は3つあります。}}これらのコンポーネントはまったく同じ方法で使用されます。);}上記の例はすべて同じマークアップを生成します。機能コンポーネントは、その内部に「状態」を持つことはできません。したがって、コンポーネントに状態が必要な場合は、クラスベースのコンポーネントに移動します。コンポーネントの作成」を参照してください。最後の注意として、反応小道具は、一度通過すると変更できません。コンポーネント内から変更することはできません。コンポーネントの親が小道具の値を変更した場合、Reactハンドルは古い小道具を新しいものに置き換え、コンポーネントは新しい値を使用して再レンダリングします。」を参照してください。リアクションアプリケーションの作成create-react-appはFacebookによって作成されたReactアプリの定型文生成ツールです。次のような最小限の設定で使いやすいように構成された開発環境を提供します。ES6とJSXの移行ホットモジュールリロードによるDevサーバコードlintingCSS自動プレフィックスJS、CSS、イメージバンドリング、およびソースマップによるスクリプトのビルドJestテストフレームワークインストールまず、ノードパッケージマネージャ(npm)を使用してcreate-react-appをグローバルにインストールします。create-react-app次に、選択したディレクトリでジェネレータを実行します。my-app新しく作成されたディレクトリに移動し、開始スクリプトを実行します。start構成create-react-appは、デフォルトで意図的に設定できません。Sassなどのコンパイル済みCSS言語を使用するなど、デフォルト以外の使用が必要な場合は、ejectコマンドを使用できます。ejectこれにより、すべての構成ファイルを編集できます。定型文は次のとおりです。APIを使用してReact要素をブラウザに表示する基本的な例を次に示します。</body></html>JSXで文字列からReact要素を作成する代わりに、JSX(JavaScriptでXML構文を追加するためにFacebookによって作成されたJavascript拡張機能)を使用することができます。type="text/babel">。このタグ内のすべては、Babelライブラリ(Reactライブラリに加えて必要なライブラリ)を使用してプレーンなJavascriptに変換されます。最後に、上記の例は次のようになります。クラスを拡張するES6クラスとして定義できます。メソッドを定義する必要があります。メソッドはReactノードを返します。これは、JSX構文を使用してHTMLのようなタグとして定義できます。次の例は、最小限のComponentを定義する方法を示しています。受け取ることもできます。これらは、コンポーネント自身が知ることができない値を指定するために、親によって渡されるプロパティです。プロパティには、特定のイベントが発生した後にコンポーネントが呼び出すことのできる関数を含めることもできます。プロパティの関数を受け取り、クリックされるたびに呼び出すことができます。部品自体上のオブジェクト。propに渡された任意の文字列をレンダリングする方法を示しています。コンポーネントは受け取った小道具を変更できないことに注意してください。するコンポーネントとDOMノードの両方を提供することもできます。受け入れる方法を知っています。Worldアプリケーションを作成しましょう。フルネームが与えられている場合は最初の名前のみを表示してください。Hello注:各コンポーネントは独自の状態を持つことができます。そのコンポーネントが親の状態を小道具として受け入れることができます。Codepen例へのリンク。Worldステートレスコンポーネントは、機能プログラミングから彼らの哲学を得ています。これは次のことを意味します:関数は、与えられたものと同じものを常に返します。a++;上の例からわかるように、statelessSumは常にaとbと同じ値を返します。statefulSum関数はパラメータを指定しなくても同じ値を返しません。副作用とも呼ばれます。以来、コンポーネントはそれ以上の何かに影響します。常に同じ動作を作成するため、より頻繁にステートレスコンポーネントを使用することをお勧めします。これは、あなたのアプリケーションであなたが後にしたいものです。変動する状態は、保守可能なプログラムの最悪のシナリオなのでです。反応成分の最も基本的なタイプは、状態なしのものである。それらの小道具の純粋な機能であり、内部状態管理を必要としない反応コンポーネントは、単純なJavaScript関数として記述することができます。機能だけであるからです。要素をレンダリングすることに注意してください。このコンポーネントは、どの状態も追跡しません。HelloWorldこれらのコンポーネントは状態を管理するためにバッキングインスタンスを必要としないため、Reactは最適化の余地があります。実装はクリーンですが、ステートレスコンポーネントの最適化はまだ実装されていません。含まれるJavaScriptライブラリです。メインのReactファイルとともにインストールします。</body></html>JavaScriptファイルを入手するには、公式のReactドキュメントのインストールページにアクセスしてください。ReactはJSX構文もサポートしています。JSXはFacebookによって作成された拡張機能で、JavaScriptにXML構文を追加しています。変更する必要があります。react-domJavaScriptプロジェクトでReactを使用するには、次の手順を実行します。...);糸を使ってインストールするFacebookはYarnという独自のパッケージマネージャをリリースしました。これはReactのインストールにも使用できます。react-domReactをnpm経由でインストールした場合とまったく同じ方法で、プロジェクトでReactを使用することができます。