52日目TIL

今日の目標。🗒

Twitter Reactで✓を実装

JSX文法の出現の原因

JSXがないときは、上のコードのように書くそうです.
HTMLコードは設計者の協力過程でも見られます.
上記のようにHTMLがJavaScriptのコードであると解釈することは困難である.また、開発者にとって、そのような方法ですべてのHTMLコードを書くのも複雑で面倒です.
HTMLコードを記述できるJSX構文が出てきます.
JSXはJavaScriptと考えられているので、ビジネスロジックを作成することができます.(条件文)

素子単位で開発された利点

DOMを使用してページ単位で開発する場合は、ページ全体をリフレッシュして更新する必要があります.ただし,素子単位で開発する場合は,対応するUIを更新するだけでよい.

React Ellimentへのアクセス方法

元々DOMで作業していた場合、次のコードを使用して別名にアクセスできます.

<div class="title">무야호!</div>
document.querySeletor('.title').value // '무야호!'

ReactはRefを使ってこそアクセスできると言っています.

	this.usernameRef = React.createRef()
	this.textRef = React.createRef()

<input ref={this.usernameRef} className="username".../>
<input ref={this.textRef} className="text".../>

この操作は、ブラウザで情報を作成してコミットする場合に実行されます.usernameRefでElliment情報が受信されます.
console.以下に示すように、logを使用してusernameRef結果の現在のオブジェクトを表示できます.
現在のオブジェクトからvalue値を取得し、ブラウザに必要な情報を表示できます.

RefとDOM
参考課夢のコード

きょう習った

榒React Twitterの実施
リカバリUIライブラリの使用

明日やること

沴沴沴問題を解く
学習反応.