chapter 2　JSXをマスターしよう

k-hitoshi commented 2 years ago

chapter 2　JSXをマスターしよう

学習期間06月27日〜7月10日

[x] ① Reactの基本を復習
[x] ② Bootstrapでデザインしよう
[x] ③ JSXを使う
[x] ④ JSXの構文的な使い方
[x] ⑤ 表示の更新とイベント　←次ここ

k-hitoshi commented 2 years ago

06月27日(月)

「基本復習」と「bootstrap」章について熟読

■感想仮想DOM作成とそのレンダリングについてイメージが少しずつ湧いてきた。 bootstrapについても抵抗なく読み込めた。これまでにVuetityやQuasarには触れたことがあるが、その違いや使用パターンについて調べてみよっと

ある程度内容を理解した為、次は手を動かします。

k-hitoshi commented 2 years ago

06月29日(水)

「基本復習」

レンダリングまでの手順について、実際コーディングして改めて復習してみた。

①組込タグのelement取得(.querySelector)
②仮想DOMのelement作成(.createElement(タグ, 属性, 組み込まれる値 ))
③レンダリング実行(.render(②, ①))

配列を意識した複数elementのレンダリングも理解できた。が、この書き方は確かにしんどいかも

k-hitoshi commented 2 years ago

06月30日

「bootstrapによるデザイン」

デザインclassの指定とそのバリエーションについて、手を動かして学習した。定義自体は実にシンプルだが、スタイリッシュな感じがして良い感じ

でも使わないと忘れそうだな。。

k-hitoshi commented 2 years ago

07月04日(月)

　「JSXを使う」「JSXの構文的な使い方」「表示の更新とイベント」

chapter 2の残分をを読み切った。認知できた事は主に以下

JSXをbabelってJSにコンパイル
JSXの定義内では一つのエレメントしか定義できない

配列を用いてcreateElementをしていた時より視認性が向上し、全体に優しいコードだと感じる。今日は実際に手を動かします。

k-hitoshi commented 2 years ago

07月05日(火)

　「JSXを使う」「JSXの構文的な使い方」（実践編）

感想
- エレメントは1つしか定義できない（再認識）実際に複数個指定したところ、エラーメッセージJSX expressions must have one parent elementが出力されました
- 三項演算子が登場して、ふとASYメンバーを思い出して懐かしさを覚えた。よく使ってたなー
疑問点

対象ファイル : react_app(list2-13).html、script(list2-13).js
- Q1:scriptファイルが別だと動作しない理由が知りたい　→ 試し実装したところwait...となりました
- Q2:変数elへの代入時、書き方として前後の()は通常必要か否か知りたい　→ どちらもブラウザ上は同じように表示はされています

y-kawase commented 2 years ago

Q1:scriptファイルが別だと動作しない理由が知りたい　→ 試し実装したところwait...となりました

script(list2-13).jsの中身がjsではなくhtmlになっていますねー scriptタグを外すと動きそうな気がします。

Q2:変数elへの代入時、書き方として前後の()は通常必要か否か知りたい　→ どちらもブラウザ上は同じように表示はされています

必須ではないです。プロジェクトのコーディング規約次第ですかね。 JSXはReact.createElementの糖衣構文なので、全体がReact.createElement()で囲まれているようなものです。

k-hitoshi commented 2 years ago

07月07日(木)

　「表示の更新とイベントについて」

本日も手を動かして学習しました。

■学習内容

JSXの値は処理を実行する都度代入する必要がある

■感想次からコンポーネントについての学習となります。

k-hitoshi commented 2 years ago

chapter 2 の学習が完了した為close

k-hitoshi / Project-learning