この記事について
筆者がReactやJSX初心者がReact Foundationsやった時の備忘録
経緯とか
経歴
1,2年くらい前まではSaaSの開発
PMやら事業開発やらと開発から離れる
開発してた頃からReact触らなきゃなーと思っていたら、なんやかんやあって時間ができたのでこれを機に勉強してみる
Next.jsのServer Actionsが気になってる
「Next.js知らんな」 → 「React知らんな」となって今
開発してる時は基本的にバックエンドやら設計やらという感じで、フロントはお気持ち程度なので、そもそもの浅さが露呈するかもしれないという恐怖を感じております。
やったこと
React Foundationsを最初から最後まで
Chapter 0−4
フレームワークとかDOM周りの話とか、素のJavaScriptでDOMをいじろうとするとこうやるよという話。
一定Vueを触ってたのでわかっているつもりで、スラスラと進みました。
Chapter 5
なんとなくの流れは掴んだ気でいます。
JSXで子からどんどんHTMLを返していって最後にマウントするぞー！って感じなのかなと思いました。厳密には違うのかもしれませんが、全然違うぞって感じだったらコメントで教えていただけると助かります。
Chapter 6
JSXではhtmlをreturnする時に`()`で括れみたいなのを見たことがあった気がしたんですが、全然括ってないやん…となりました。
そこに気づいてからのこのmapで少し悩みました。
```javascript
<ul>
{names.map((name) => (
<li>{name}</li>
))}
</ul>
```
最初コピペじゃなくて見ながらなんとなく打っていたので以下のようにしていて、結果が出力されず少し悩みました。今考えるとそりゃそうだという感じではあるんですが…。
```javascript
<ul>
{names.map((name) => { // ( -> {
<li>{name}</li>
})} // ) -> }
</ul>
```
この`()`なんやねんと思っていたんですが、returnを省略する為の()でした。アロー関数noobでしたわ。
```javascript
<ul>
{names.map((name) => {
return (<li>{name}</li>)
})}
</ul>
```
Chapter7
```javascript
const [likes, setLikes] = React.useState(0);
function handleClick() {
setLikes(likes + 1);
}
```
これね、いや、わかる。やりたいことはわかるし、こういう書き方でできるよーもわかる。
なぜここでsetterっぽいのが出てきたのかと、引数としてインクリメントしたらうまくいくのかがわかってない。そもそもこいつは関数なのか？引数として渡した処理をしていい感じに保管しておきまーすってこと？
本当は調べた方がいいんだけど、どうせ将来的に調べなきゃいけなくなる予感がしているのと、もう少し周りが見えてから調べた方が効率良さそうな気がしたので一旦置きです。
Chapter8−10
Likeボタンを押す度に全てのDOMが全て更新されているのか、他のコンポーネントに入れた`Console.log()`が出力されているのが少し気になった。
Likeボタンだけを更新するわけじゃないんだ…くらいのもので、将来的にパフォーマンスを気にし始めてから調べるでもいいかなという所感です。
感想
最初JSXに違和感バリバリでしたが、慣れてしまえばそんなに問題なさそう。
`()`とか`{}`だけちょっと気を付ける必要があるけど、JavaScriptの書き方に慣れてきたら普通にいけそうな気がしている。
コンポーネント化というベースの考え方は一緒なので仕方ないかもしれないが、書き方以外にReactとVueの差を感じることができなかったので、今後Next.jsを触っていったりする際に使い分けの部分は意識して考えたい。