Udemy-React Front To Back

☆要所：
・propTypesをHeaderコンポーネントに指定すると型のちがいによる崩れを防げる
・typescriptはJavascriptと違う記述をする 習得難易度高い
・<> </>の意味？

13. Adding styles
    ☆要所：
    ・propsにしてスタイルCSS追加していく
    ・PropTypesで型くずれ防止策をつけておく
14. useState Hook
    ☆要所：
    ・ボタンを押すごとにprev値に１インクリする
    ・以下のコードが独特

const handleClick = () => {
setRating((prev) => {
return prev + 1;
});

☆要所：
・App.js でフック呼び出し（他では呼び出さない）
・App.js でデータ呼び出し
・App.js でリスト化するメソッド呼び出し

・App.js でデータをフック化する
↑
うまいこと組み合わせてリアクトしてる
↓
・itemとfeedbackのprops化

☆要所：
・Conditional StyleとConditional Classの書き方習得

//Conditional Styleの書き方↓
return (
<div
className="card"
style={{
backgroundColor: reverse ? "whitesmoke" : "blue",
color: reverse ? "red" : "brown"
}}
>
{children}
</div>

// Conditional Classの書き方↓
return <div className={card ${reverse && "reverse"}}>{children}</div>;

▼途中から理解ついていけない、復習する

☆要所：
・npm i react-icons でアイコン用のやつをインストールした
・react-iconsをインポートした
・FaTimesというフォントを使ってバツじるしを出した
・バツジルシをクリックしてログ出力テストした
・削除前の確認メッセージを出す
・メモリ上削除まで実装した

☆要所：
・フィードバック3件の点数合計 10+9-8＝２７を求め、フィードバックの数３件で割る
・フィードバックが０件のとき、NaNと表示される時の考慮を入れる
・小数点第1位を表示する そして、小数点第１位がゼロの時正規表現で取り除く
▼let,const,varのちがい、つかいわけ
▼reduce関数は集計関数ループをつかわなくてもいい？
　参考：https://pisuke-code.com/js-examples-of-array-reduce-usage/#reduce

☆要点：
・フォームをこしらえた
・テキスト入力のイベントハンドラを実装した
・フックを使ってtextを反映させる処理を実装した

☆要点：
▼サンドボックス上ではボタンのCSS("secondary")が反映されない。本当はピンク色のボタンに変身するはずなのに
⇨ ボタンJSX読み込み忘れ

☆要点：
・リアルタイム入力✔を実装し、10文字以下ならメッセージを出し、10文字超えたらSubmitボタンを表示する