Why React?

ブラウザを開いてサイトにアクセスすると、見えることとできること(UX:User Experience)がたくさんあります.
そのため、Webアプリケーションという言葉は、Webページに比べて多く使われています.
Webアプリケーションで様々なUIやUXを実現するために、従来の(DOM,jQuery)ではコドラーのメンテナンスが困難であり、より便利な操作や管理のためにFrontend Framework(Library)が登場した.その中で最もよく使われるのがAngular、Vue、Reactです.

1.Reactのメリット

UIの迅速な更新
反応器は、スクリーンの一部を素子に分割し、独立して管理することができる.
コンポーネントは、ロールと機能に基づいて個別に管理されやすく、重複する部分を置き換えることができ、コードの再利用性が向上します.
宣言プログラム
Javascriptは、How方式でアクセスして徐々に展開する方法ですが、インタラクティブUIの作成に伴う困難を軽減します.アプリケーションの状態に応じて、データの変更に基づいて適切なコンポーネントを効率的に更新およびレンダリングします.
Virtual DOM
以前は、DOMを操作してブラウザに画面を表示する形式だった.ただし、DOM全体に直接アクセスして変更するたびに、HTML、CSS、JSファイル全体が再レンダリングされるため、遅くなるしかありません.したがって、reactionが仮想DOMを使用することで、実際にDOMを操作する回数が減少し、パフォーマンスが迅速に改善されます.応答でデータを変更する場合は、仮想DOMを既存の仮想DOMと比較し、変更した部分を確認し、変更した部分のみを実際のDOMに適用します.

2.作業環境の設定

Node.js & npm
Node.js
Node.jsは、JavaScriptをブラウザの外で実行する環境を意味します.応答アプリケーションは、Webブラウザで実行されるコードであるため、ノード.jsとは直接的なつながりはありませんが、プロジェクト開発に必要な主なツール(exbarbell、webpack)はNodeです.jsベースにインストールする必要があります.Node.jsをインストールすると、npmが自動的にインストールされます.
npm
npmでは、異なるパッケージと管理バージョンをインストールできます.

3.CRA(create-react-app)

反応プロジェクトの開始に必要な開発環境を設定するためのツール(toolchain)
CRAには、対応アプリケーションを実行するために必要な様々なパッケージ(バーベルやWebパッケージなど)が含まれており、開発環境を設定しているため、既存の機能を改善したり、新しい機能を実行したりする場合は、パッケージバージョンをアップロードするだけでよい.

3-1.CRAのインストール

npx create-react-app directoryName
ローカルサーバビュー(npm start)を開くと、http://localhost:3000アドレスが得られます.

3-2.CRAのデフォルトフォルダとファイルの設定

1) node.modules
CRAを構成するすべてのパッケージソースコードを含むフォルダ
2) package.json
CRAマスターパッケージ以外にインストールされているリポジトリ/パッケージ情報(タイプ、バージョン)のファイルを記録します.
-dependencis
3) .gitignore
.gitignoreファイルにgithubにアップロードしたくないフォルダとファイルを作成できます.
4) public - index.html

<div id="root"></div>

5) src - index.js

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

ReactDOM.render関数のパラメータは2つの

があります.

の最初のパラメータは、画面に表示する要素

である.

の2番目のパラメータは、画面に表示する素子位置

である.
6) src - App.js

現在の画面に表示する初期素子

稼働時

<Login /> 컴포넌트, <Main /> 컴포넌트

仕事をその場に置き換えればいい.

React Routerを学習した後、

を学習します.

<Routes /> 

この構成部品はトップレベルの構成部品として配置されます.