React

リアクターは,ユーザインタフェースを作成するためのJavaScriptライブラリである.
応答によって作成されたアプリケーションは、サーバ上ではなくWebブラウザで実行されます.
ここで、リアクターの利点は、サーバの応答を待って新しいページを取得したり、新しいコンテンツをレンダリングしたりする必要がないことです.
ユーザインタフェースの観点から,リアクターはコンポーネントを用いてユーザがWeb上で見るインタフェースを実現する.

はんのうきほん

素子ユニットの開発の利点

JSX構文規則

JSXは、応答において要素1を生成するための構文であり、JavaScriptのすべての機能を含む.必ずしも使う必要はありませんが、UI関連の作業を行う際には視覚的に役立ちます.
1ユニット:react appの最小単位は、不変の通常オブジェクト(plain object)である.

JavaScript式

を含むおよび使用

const name = 'Sooyeon Nah';
const element = <h1>Hello, {name}</h1>;
ReactDOM.render(
  element,
  document.getElementByID('root')
);

JSXの括弧には、すべての有効なJavaScript式が含まれます.
コンパイルが完了すると、JSX式は通常のJavaScript関数呼び出しとなり、JavaScriptオブジェクトとして認識されます.
2-1. 属性引用符を使用した文字列テキストの定義

const element = <div tabIndex="0"></div>;

2-2. 属性にJavaScript式を挿入する

const element = <img src={user.avatarUrl}></img>;

括弧の周囲に引用符を入力しないでください.
同じプロパティでは、単一引用符""と中括弧{}のいずれかしか使用できません.
2-3. JSXで子を定義する

空のラベルは、/>に直接閉じられます.

JSXラベルにサブラベルが含まれている場合は、Divラベルでラベル全体を上書きする必要があります.

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

2-4. JSXで対象を表すReact.createElement()は、次のオブジェクトを生成します.

const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

React Ellimentとは、画面に表示する項目の説明を含むオブジェクトを指します.

レンダーエフェクト(Render Effects)

react DOMによってすべての領域を管理するDOMノードをルートノードと呼ぶ.

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

レンダリングは、JSXのカッコでreact要素とルートDOMノードをユーザーに渡します.

ReactDOM.render(element, document.getElemenByID('root'));

REACT DOMは、当該エンティティおよびそのサブエンティティを従来のエンティティと比較し、必要に応じてDOMのみを更新する.
応答と仮想DOM(YouTubeビデオ)

Reactの重要な概念と使い方

反応素子に関する公式文書

関数素子vsクラス素子

かんすうがた

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

クラス#クラス#

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

関数クラスpropsのみを使用し、stateを使用する場合、stateまたはLifeCycle APIを全く使用しない場合、propsを渡してビューをレンダリングするだけで、LifeCycleを使用して構成部品を画面に表示し、ステータスの変更と消失時の操作を実行します.
レンダーユーザ定義コンポーネント(Render User Defined Components)

class React extends Component {
  render() {
    return <h1> 리액트 잘 하고싶다</h1>;
  }
}

構成部品の名前は常に大文字で始まる

props vs state

PropssState外部から伝達される値内部変化の値は読み取り専用であり、多非同期変化が可能であり、修正できず、this.setStateで修正できる
＜stateの条件かどうかを決める＞
propsで両親から伝えますか?
時間が過ぎても変わらないの?
素子内の他のstateやpropsは計算できますか?
そのうちの1つがstateであればstateではありません!

const element = <Welcome name="Sooyeon" />;
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

ReactDOM.render(
  element,
  document.getElementByID('root');
);
// "Hello, Sooyeon"

ステータスの変更方法(setState)

render()メソッドのthis.props.엘리먼트(어트리뷰트)をthis.props.엘리먼트(어트리뷰트)に変更します.

指定した初期this.stateのclass constructorを追加します.

JSXのカッコ内の既存クラスの別名からpropを削除します.

ライフサイクル

componentDidMount():構成部品出力はDOMでレンダリングされた後に実行されます.componentDidUpdate():最初のレンダリングでは呼び出されませんが、更新が発生するとすぐに呼び出されます.componentWillUnmount():構成部品が除去され、画面が消える前に呼び出される.

イベントの処理

Reactのイベント構文規則

Reactのイベントでは、小文字ではなくCAMEL CASEが使用されます.

JSXを使用して、文字列ではなく関数にイベントハンドルを渡します.

<button onClick={activateLasers}>
  Activate Lasers
</button>

このバインディング

リアクター内のデータストリーム

データが下に流れる

昇格ステータス

親構成部品の「ステータスを変更する関数」自体を子構成部品に渡し、子構成部品によって実行します.
参考資料:バーベルとは
サンプルコードソース:正式な書類