Movieアプリケーションの作成

どうして反応するの?

Reactはフロントエンドフレームの1つです.反応の最大の特徴は,スクリーン出力に特化したフレームワークといえる.ReactはJavaScriptなので、Reactが消えても、強化されたJavaScript開発の知識は保持されます.

どうやって反応しますか?

moive appを作成し、vscodeで開き、応答を開始します.

npx create-react-app movie_app
code movie app

npxについて

npmでモジュールをインストールする場合、-gオプションを使用すると、各プロジェクトが同じモジュールを共有できるように、私のコンピュータ内のグローバルスペースにモジュールをインストールできます.開発者にとって、何度もインストールする必要はなく、見た目はいいですが、これは良い方法ではありません.

モジュールが更新されたかどうかを確認できません.

更新を行うと変更が発生し、他の項目に影響を与える可能性があります.

craのようなボイラープレートにとって致命的です.
(ボイラプレート:必要な、簡単だが繰り返されるコード)

npxはnpmとは異なり、モジュールをローカルに保存せず、最新バージョンのファイルのみを一時的にロードして実行し、再びファイル損失でこれらの問題を補う.
生成されたreactアプリケーションを実行しましょう.

npm start

プロジェクトの開始

srcフォルダアプリケーションへ.jsとindex.jsを変更し、残りのファイルをすべて削除します.

<App.js>
  
import React from "react";

function App() {
  return <div>Hello!!</div>;
}

export default App;

<index.js>
  
import React from "react";
import ReactDOM from "react-dom";

import App from "./App";

ReactDOM.render(<App/>, document.getElementById("root")
);

実行すると、indexという結果ウィンドウが表示されます.htmlが空であるのとは異なり、divラベルが含まれていると判断できます.


ここでreactがどのように動作しているかを見ることができます.jsを使用して要素を生成しhtmlに入れます.
正確にはindexjsのReactDOM.render(<App/> , document.getElementById("root"));はAppである.jsの構成部品のインデックスを作成します.htmlのrootの内部に置くという意味です.
reactは、空のHTMLをロードした後にコンポーネントで作成されたコンテンツを描画する順序で動作します.

Virtual DOM

JAvascriptにはjQueryとhandlearsというライブラリがあり、画面を非常に簡潔なコードで整理することができますが、いくつかの欠点があります.画面が大きいほど、画面を描く時間が長くなります.しかし、それ以上に致命的な欠点は、画面の一部を修正するだけで、画面全体を再描画できることだ.


図に示すように、修正するノードは1つしかありませんが、4つのノードはすべて修正する必要があるため、効率が低いです.
これを改善するために、Facebook開発者はゲームエンジンの原理を導入し、多くのゲームエンジンは次のシーンに必要な画面を事前に描く方法で画面を迅速に切り替える.
この方法をリアクターに導入し,次の画面の部分(ノード)を事前に描画し,画面の部分(ノード)のみを修正できる仮想DOM技術を作成した.
出典:Doit!反応プログラム設計結晶石/ノマエンコーダ