React

what is React?
規模を拡大し、複雑なアプリケーションを開発し、生産性を向上させ、大量のデータ管理とコードメンテナンスを簡素化するために、さまざまな「Frontend Framework」(Library)が登場しています.代表的なのはreact、Angular、Vueです.
So basically...
React is a JavaScript library for building user interfaces.
reactにはVirtualDomというものがあります.
では、What is Virtual Dom...?
リンクテキスト.によると.
The Vitual DOM (VDOM) is a programming concept where an ideal, or 'virtual' representation of a UI is kept in memory and synced with the 'real' DOM by a library such as ReactDOM.
翻訳すると、VCOMは理想的または仮想UIを表すプログラミング概念である.実際のドームの使用効率を低下させるため,比較的軽く変更しやすいVCOMが出現した.

1. Create a VDOM with a new state
2. Compare it with older VDOM using diffing.
3. Update only different nodes in real DOM.
4. Assign new VDOM as an older VDOM.

抽象的な概念は理解できますが...
詳しくは後で見なければなりません.今からまず.
VirtualDom=Blueprintと理解すればよい.
重要なのは、VCOMを使えばDOMを操作する必要はありません!
VCOMコンポーネントを通過した状態が変化すると、反応は自動的にDOMを変更された状態に更新します!
'React' is called React because
it essentially reacts to the state changes!!
Difference Between React and Angular??
Angular is a framework whereas React is a library.
モデル-ビュー-コントローラ(MVC)とは異なり、rejectはビューのみを表示し、ビューとステータスが同期していることを確認します.これらの理由からreactは、APIが小さいため、他のライブラリとともに使用されます.
CRA( Create- React App)/Node.js & npm
CRAはCreate-React Appの略で、Facebook開発者がReactアプリケーションを起動するために作成した開発ツールです.REEXはUI機能のみを提供し、開発者自身が開発環境を構築する必要があり、CRAは開発環境の設定を簡素化することができる!CRAには、バーベルやWebパッケージなど、さまざまなパッケージが含まれており、反応アプリケーションの実行を支援します.
Node.jsはjavascriptをブラウザ以外(サーバ)で実行する環境であり、プロジェクト開発に必要な主なツール(バーベル、Webパッケージ)はNodeである.jsベースなので、必ずCRAと一緒に取り付けましょう.
npm(node package manager)はnode packageを管理するために必要なツールで、npmをインストールすると自動的にインストールされます.
Reactの構成部分を見てみましょう.
まずcomponentというものがあります.
component
: A piece of the UI.
We build a bunch of independant, isolated, resusable components and compose them to use complex user interfaces.
コンポーネントはUIを構成する独立した再利用可能なコンポーネントです!
Every React application has at least one component which we refer to as 'root component'. This compenent represents the internal applications and contain other child components. Every React application is essentially a tree of components.

class Tweet {
	state = {};  
	render() {
   }


//State = Data that we want to display when the component is rendered.
State(상태)는 컴포넌트가 렌더되었을 때 우리가 보여주고 싶은 데이터를
의미한다. Render는 UI가 어떻게 보여질지 나타내기
위해서 사용되는 메소드이다.