1-1. どうして反応するの?

は、性能を最大限に節約し、快適なユーザー体験を提供するために開発された反応である.

1-1-1. 反応を知る

リアクターはJavaScriptライブラリで、ユーザーインタフェースを作成します.MVC、MVWなどのフレームワークとは異なり、V(View)のみに関心を持つライブラリである.
※反応項目に特定部分を指定する宣言体があります.これを素子と呼ぶ.
コンポーネントは、他のフレームワークでユーザインタフェースを処理するために使用されるテンプレートとは異なる概念である.テンプレートは、通常、特定のデータセットでHTMLタスクタイプを文字列として返しますが、コンポーネントはより複雑な概念です.コンポーネントは、多くの機能を内蔵し、コンポーネントの外観と動作方法を定義する再利用可能なAPIです.
※ユーザー画面に表示されるビューをレンダリングと呼びます.反応ライブラリがビューをどのようにレンダリングするか、およびデータが変化するたびにパフォーマンスを再レンダリングし、最適なユーザエクスペリエンスを提供する場合は、反応素子が最初に傾斜した初期レンダリング(Initial Render)と、素子データが変更された後に再実行されるレンダリング(Render)の概念を理解する必要があります.

1-1-1-1. 初期レンダリング

UI関連のフレームワークまたはライブラリを使用する場合でも、最初の外観を決定するために初期レンダリングが必要です.reactionにrender関数があります.

render() { ... }

この関数は、構成部品の長さを定義する役割です.html形式の文字列ではなく、ビューの外観や動作に関する情報を含むオブジェクトを返します.コンポーネントの内部には、render関数を実行すると、内部のコンポーネントも再帰的にレンダリングされます.これにより、トップクラスコンポーネントのレンダリング作業が終了すると、携帯情報を使用してHTML寸法が作成され、定義した実際のページのDOM要素に注入されます.
構成部品を実際のページにレンダリングするには、次の2つの手順で分離する必要があります.

文字列形式のHTMLコード

を生成する.

は、特定のDOMに対応するコンテンツ

を注入する.
イベントが適用されます.

1-1-2協調プロセス

反応ライブラリの重要な部分である更新をどのように行うかは、反応ライブラリでビューを更新するときに「調整プロセス」と呼ばれます.これは,素子内のデータが変化すると,我々から見れば,ビューは変化するにつれて変化するが,実際には新しい要素に変換されるからである.
このタスクもrender関数が担当します.render関数は、ビューがどのように動作しているか、およびどのように動作しているかを示すオブジェクトを返しますが、コンポーネントは、データを更新するときに更新された値を簡単に変更するのではなく、新しいデータを使用してrender関数を再呼び出します.次に、データに出力されるビューを生成します.
ただし,このときrender関数が返す結果は直ちにDOMに反映されるのではなく,以前render関数で作成した素子情報と現在のrender関数で作成した素子情報とを比較する.
JavaScriptを使用して2つのビューを最小の演算に比較した後、両者の違いを見つけ、最小の演算でDOMツリーを更新します.

1-2. はんのうとくせい

1-2-1. Virtual DOM

応答の主な特徴の1つは仮想DOMの使用である.

1-2-1-1. DOMとは?

DOMはDocument Object Modelの略です.すなわち,文書構造をオブジェクトで表す手法を用い,XMLやHTMLで記述する.
WebブラウザはDOMを使用してJavaScriptとCSSをオブジェクトに適用します.DOMはツリーで、特定のノードを検索、変更、削除、または挿入できます.

1-2-1-2. Virtual DOM

仮想DOMを使用するのは、実際のDOMにアクセスして操作するのではなく、抽象的なJavaScriptオブジェクトを構成して使用します.実際のDOMの簡単なコピーのようです.
応答中のデータが変化してWebブラウザで実際のDOMが更新された場合は、次の3つのステップを実行します.

データを更新し、UI全体を仮想DOMに再表示します.

以前の仮想DOMのコンテンツと現在のコンテンツを比較します.

で変更された部分だけが実際のDOMに適用されます.

1-3. 作業環境設定パラメータ

これから本格的にスタートしますので、事前に準備しておいたものがあります.Windowsオペレーティングシステムを作成したいだけです.

1-3-1. Node.jsインストール

Node.js公式ダウンロードページ(https://nodejs.org/ko/downlode/)はwindows Installerをダウンロードしてインストールします.インストールが完了したら、コマンドプロンプトウィンドウを開きます.

node -v

v14.17.0

上図のようにnodeのバージョンを入力すると、次のv 14が表示されます.バージョンが17.0の場合は、インストールがうまく行われています.

1-3-2. yarn

Node.jsをインストールすると、npmではなく「糸」というパッケージ管理ツールがインストールされます.糸はnpmの代わりに使用できるツールであり、npmよりも高速で効率的なキャッシュシステムおよびその他の追加機能を提供する.
「糸垂れ」ページ(https://yarnpkg.com/en/docs/install#windows-stable)で、Download Installerボタンをクリックし、インストーラをダウンロードして実行します.
コマンドプロンプトウィンドウでのインストールの確認

yarn --version

1.22.5

上記説明の通り、取り付けは良好です.

1-3-3. インストールの編集

編集用はvscodeだそうです.vscodeはすでに熟知しているので、今も使っているので、簡単にリンクを書いて省略したいだけです.
VSコード公式ダウンロードページ(https://code.visualstudio.com/Download)で入手すればよい.

1-3-3-1. VSコード拡張プラグインのインストール

エディタを使用してインストールする場合は、役に立つ拡張プログラムをインストールしたいと思います.

ESLint:JavaScript構文とコードスタイルをチェックするためのツールです.

ReactjsコードSnippets:反応素子とライフサイクル関数を記述する際に、ショートカットを使用してコードを自動的に生成できます.これは、記述された検索時に似たような結果が複数発生する可能性があります.インストール著者はcharlampos karypidisの

です.

Prettier-Code formatter:コードスタイルを自動的に整理するツール.

1-3-4. Git取付

Gitはイメージ管理ツールであり、プロジェクトのバージョン管理とコラボレーションを行う際にかけがえのない核心的な役割を果たしています.
Git公式ダウンロードページ(https://git-scm.com/download/)からインストールファイルをダウンロードしてインストールすればよい.

1-3-5. create-react-appを使用してプロジェクトを作成する

create-act-appは、反応プロジェクトの作成に必要なWebパッケージ、バーベルのインストールと設定プロセスを省略し、プロジェクト作業環境を容易に構築するツールです.後で設定をカスタマイズする必要がある場合は、設定を自由に変更することもできます.このツールを使う方法は簡単です.プロジェクトを作成するディレクトリに端末を開きます.

yarn create react-app hello-react

コマンドを実行すればいいです.
レスポンス・アイテムを作成する場合は、次の操作を行います.

yarn create react-app <프로젝트 이름>

命令語を使う.プロジェクト名は自由に命名できます.
プロジェクトの作成が完了したら、次のコマンドを入力してプロジェクトディレクトリに移動し、反応開発用のサーバのみを起動します.

cd hello-react
yarn start

では.

以上のようにページが展開されると準備は終了します.